[element-ui] el-form rule v-for 动态校验

动态获取form表单内容,包括是否必填,双向绑定

 <el-form-item
     v-for="item in dynamicFormList"
     :key="item.rpid + 'rsid'"
     :label="item.rpname + ':'"
     :prop="item.rpisrequired ? 'objList.' + item.rpid : false"
   >
       <el-input
         v-model="ruleForm.objList[item.rpid]"
         class="formWidthdpls"
         :placeholder="'请输入' + item.rpname"
       >el-input>
 el-form-item>
        

 ruleForm: {
     title: "",
     objList: {},
     // tag: "",
   },
 dynamicFormList:[]

 接口.then((res) => {
   console.log(res);
   this.dynamicFormList = res.data;
   this.dynamicFormList.forEach((item) => {
     item.rpid = "name" + item.rpid;
     let form = {
       required: true,
       message: "请输入" + item.rpname,
       trigger: "blur",
     };
     this.rules.objList[item.rpid] = [];
     this.rules.objList[item.rpid].push(form);
     // this.ruleForm.objList[item.rpid]=''
     this.$set(this.ruleForm.objList, item.rpid, "");
   });


element+vue2循环渲染v-model及附带rule规则遍历

你可能感兴趣的:(element-ui,vue.js,javascript,前端)