循环表单+表格动态校验规则

1.demo 功能如下

截屏2022-01-11 10.51.33.png

2.代码结构如下

  

      
        
          
            
              
                
              
              
                
              
              
                
              
            
          
        
       
      
    
    
    
    export default{
         tables: [],
      tableColumns: {
        HDFS: [
          { prop: "dsTypeLabel", label: "数据类型", width: "100px" },
          { prop: "objName", label: "路径", width: "300px" },
          { prop: "operations", label: "操作权限", width: "" },
          { prop: "recursion", label: "是否包含子文件", width: "200px" }
        ],
        HIVE: [
          { prop: "dsTypeLabel", label: "数据类型", width: "100px" },
          { prop: "extraData", label: "库名", width: "" },
          { prop: "objName", label: "表名", width: "200px" },
          { prop: "operations", label: "操作权限", width: "200px" }
        ],
        KUDU: [
          { prop: "dsTypeLabel", label: "数据类型", width: "100px" },
          { prop: "extraData", label: "库名", width: "" },
          { prop: "objName", label: "表名", width: "200px" },
          { prop: "operations", label: "操作权限", width: "200px" }
        ]
    }

3.校验规则

tabRules: {
        obj: [
          {
            required: true,
            message: "请选择",
            trigger: "change"
          }
        ],
        extraData: [
          {
            required: true,
            message: "请选择",
            trigger: "change"
          }
        ],
        perations: [
          {
            red: true,
            age: "请选择",
            igger: "change"
          }
        ],
        operations: [
          {
            required: true,
            message: "请选择",
            trigger: "change"
          }
        ]
      },

4.设置props

  :prop="'tableData.' + scope.$index + '.operations'"

5.使用promise 做每个表单的校验

let newArr = []; //承接promise的返回结果
          let _self = this;
          this.tables.forEach((item, index) => {
            //将有权限的表单做校验等等
            checkForm(item.formRef); //校验
          });

          function checkForm (arrName) {
            //根据form表单的ref，动态生成promise，再对其坐表单校验，都通过了再去做处理
            let result = new Promise(function (resolve, reject) {
              _self.$refs[arrName][0].validate(valid => {
                if (valid) {
                  resolve();
                } else {
                  reject();
                }
              });
            });
            newArr.push(result); //push 得到promise的结果
          }
          // 校验通过
          Promise.all(newArr)
            .then(() => {
                console.log('所有表单校验通过')
            }