如何做动态表格校验（以vue3+ele-plus或者vue+ele-ui为例）

需求：

动态表格校验 动态内容受上一级表单项的影响 动态渲染的表单内容接口数据返回

举例：

el-ui中的el-form表单内容（我这里以ele-ui为例子），有几项（2~5项）是动态的，lable，prop和表单接口的入参key也都是接口随机提供给前端的，那么这边要求前端在拿到这个动态表格数据去做一个相对应的表单项展示外，还需要对对应的项做校验，校验规则已知（我这里假设以校验为必填项，否则不给提交）

后端接口返回类似：

其中：primary是表单提交的key，“智能解析-神舟路”是label。对应上去就是如下：

分析：

受el-form影响，子项的prop和model绑定的form对象下的关系是一一对应的，静态项可以固定住，那么动态项要解决的主要问题就是prop和model所绑定的obj在的key键一致

代码：

代码控制块是一致的，控制动态项的显示与否根据标识或者对应的上一项的value值控制：例如：

绑定动态项，可以有以下两种便捷方式实现：

获取接口返回动态表单项： 定义：

1.数组，循环，不确定为多项：

//定义
 dynamicItems:[],
 
 //接口获取数据
 let labelObj = res.data.multi_idc_name;
for (let key in labelObj) {
  this.dynamicItems.push({
    label:labelObj[key],
    prop:key
  })
}

//表单
 <template v-if="ruleForm.multi_idc == '是'">
<el-form-item
  v-for="(domain,ind) in dynamicItems"
  :key="ind"
  :label="domain.label"
  :prop="domain.prop"
  :rules="{
    required: true, message:`此项为必填项`, trigger: 'blur'
  }"
>
  <el-input v-model="ruleForm[domain.prop]" placeholder="多IP用英文逗号分隔"></el-input>
</el-form-item>
</template>

2.确定动态的为几项，可以标识特定的项：

//定义
dynamicKeys: [],
dynamicValues: [],
      
   //接口获取数据  
 let labelObj = res.data.multi_idc_name;
for (let key in labelObj) {
  this.dynamicKeys.push(key);
  this.dynamicValues.push(labelObj[key]);
}

//表单项
 <el-form-item
              :label="dynamicValues[0]"
              v-if="ruleForm.multi_idc == '是'"
              :prop="dynamicKeys[0]"
              :rules="{
                required: true, message:`此项为必填项`, trigger: 'blur'
              }"
            >
              <el-input v-model="ruleForm[dynamicKeys[0]]" placeholder="多IP用英文逗号分隔"></el-input>
            </el-form-item>
            <el-form-item
              :label="dynamicValues[1]"
              :prop="dynamicKeys[1]"
              :rules="{
                required: true, message:`此项为必填项`, trigger: 'blur'
              }"
              v-if="ruleForm.multi_idc == '是'"
            >
              <el-input v-model="ruleForm[dynamicKeys[1]]" placeholder="多IP用英文逗号分隔"></el-input>
            </el-form-item>

其中，prop绑定的和el-input绑定的v-model的key指向的是一致的

在做提交项时，注意提供的入参写法，可以有：

let obj = Object.assign({}, this.ruleForm);
obj.target_multi_idc = {
  [this.dynamicKeys[0]]: this.ruleForm[this.dynamicKeys[0]],
  [this.dynamicKeys[1]]: this.ruleForm[this.dynamicKeys[1]]
};

总结：

受el-form影响，子项的prop和model绑定的form对象下的关系是一一对应的，静态项可以固定住，那么动态项要解决的主要问题就是prop和model所绑定的obj在的key键一致（这个的设计可以去看一下el-ui 表单校验的源码），做到动态绑定的key键是一致的ok。