项目记录:el-table中的验证

项目记录:el-table中每行数据分别添加验证

在elementUI中,会有表单多层嵌套的prop校验与重置的需要.

el-form-item标签的:prop属性,必须是父级组件el-form中绑定model字段中的一个直接子属性.
比如:this.form.userInfo[0].name获取到，那么prop就需要设置成userInfo[0].name,来校验

例子

<el-form ref="form" :model="form">
	<span v-for="(item,index) in form.problemSingleArr">
           <el-form-item :label="item.label+'：'" :prop="'problemSingleArr.' + index + '.'+ item.prop">
                  <el-input :autosize="{ minRows: 5}" type="textarea" v-model="item[item.prop]"
                      placeholder="请输入问题"></el-input>
              </el-form-item>
              <template v-for="(e, i) in item.arr ">
                  <el-form-item :prop="'problemSingleArr.'+ index + '.arr.' + i + '.'+ e.prop">
                      <el-radio-group v-model="e[e.prop]">
                          <template v-for="(j,x) in e.option">
                              <el-radio :label="j.label" style="display: block;">
                                  {{j.label}}
                                  <el-form-item :prop="'problemSingleArr.'+ index + '.arr.' + i + '.option.' + x + '.' + j.prop " style="display: inline-block;">    
                                      <el-input  v-model="j[j.prop] "  :placeholder=`请输入${j.label}选项对应的答案` class="radio-margin"></el-input>
                                  </el-form-item>
                              </el-radio>
                          </template>
                      </el-radio-group>
                  </el-form-item>
              </template>
      </span>
 </el-form>

form:{
	problemSingleArr: [
        {
               label: '问题1',
               prop: 'problemArea',
               problemArea: '',
               arr: [
                   {
                       label: 'A',
                       prop: 'problemSingle',
                       problemSingle: '',
                       option: [
                           {
                               label: 'A',
                               prop: 'problemTextA',
                               problemTextA: ''
                           }, {
                               label: 'B',
                               prop: 'problemTextB',
                               problemTextB: ''
                           }, {
                               label: 'C',
                               prop: 'problemTextC',
                               problemTextC: ''
                           }, {
                               label: 'D',
                               prop: 'problemTextD',
                               problemTextD: ''
                           }, 
                       ]
                   }
               ]
           },
	]
 }

使用prop+rules

 <el-form ref="tableFormRef" :model="form" size="mini" label-width="110px" :rules="formRules" hide-required-asterisk>
	<el-table :data="form.android_config" size="mini" :pagination="false" border>
          <el-table-column
            v-for="col in columns"
            :key="col.id"
            :prop="col.id"
            :label="col.name"
          >
            <template v-slot="scope">
                <el-form-item class="custom-item" label-width="0" style="margin-bottom: 0px;" :prop="`android_config.${scope.$index}.${col.id}`" :rules="formRules[col.id]">
                  <el-input v-model.trim="scope.row[col.id]" type="text" placeholder="请输入" size="mini">
                  </el-input>
                </el-form-item>
            </template>
          </el-table-column>
        </el-table>
</el-form>

验证部分

formRules: {
		//为例  trigger
        max_price: [rules.required, { pattern: /^\d{1,4}(\.\d{1,2})?$/, message: '请输入小于10000或最多保留两位小数的数字' }, { validator: (rule, value, callback) => {
          if ((value) {
          //判断条件
            callback(new Error('错误'))
          } else {
            callback()
          }
      } }],
 }
//验证某个属性:
this.$refs.tableFormRef.validateField('')
//清除验证:
this.$refs.tableFormRef.clearValidate([])


//提交前判断
this.$refs.tableFormRef.validate(valid => {
        if (!valid) return
		//提交操作
}

error属性+验证

 <el-form-item class="custom-item" label-width="0" style="margin-bottom: 0px;" :error="validatorMultPrice(scope)">

 </el-form-item>

验证:

validatorMultPrice({row,$index}){
	//处理返回错误信息:string
},

adjustError(){
	const errorList = R.pluck('validateMessage')(this.$refs.tableFormRef.fields)
	  if (errorList.length) {
	    this.$message.error('请输入正确的数据')
	    return false
	  }
	  return true
}
const bool = await this.adjustError()  
//提交操作