element表单多行数据自定义校验以及自定义传参

场景说明:如下图

在form表单中迁移table表格,每行数据都要能编辑,单独校验

注释:此处的资源下拉框校验,还需要走异步请求获取结果,然后再对比校验

element表单多行数据自定义校验以及自定义传参_第1张图片

 话不多,上代码说明

1.首先获取的接口数据如下

form: {

vmDataList: [],

},

2.界面html 代码部分


      
        

         
          
        
        
        
          
        
      
    

核心部分:

a. 一个是form-item; prop指向验证问题;因为是多行,需要区分验证的是第几行

:prop="'vmDataList[' + scope.$index + '].migrate_ds_info.ds_mig.ds_id'"

b.第二是自定义校验规则(如果是单纯的自定义,不需要额外传参)


    
                
                
              

// 校验规则

data(){

    let that = this;
    var validateDs = (rule, value, callback) => {
      // 这里面就能处理一些列的校验逻辑了
      if (!value) {
        callback(new Error(`请选择资源池`));
      }
      let zztotalItem = that.form.vmDataList.find((item) =>
        item.data_stores_info.some((a) => a.ds_id =

你可能感兴趣的:(element,VUE,vue.js,elementui,表单自定义校验)