场景:

el-table动态表格 绑定输入框 并加入自定义验证规则

代码:

// html
<el-form ref="form" :model="form" label-width="80px" >
      <el-table
        :data="form.tableOne"
        style="width: 100%">
        <el-table-column
          prop="name"
          label="名字"
          align="center"
          width="180">
        </el-table-column>
        <el-table-column
          v-for="(item, index) in form.tableOne[0].tableTwo"
          :label="item.name+''"
          :key="index"
          align="center"
          width="180">
          <template slot-scope="scope">
          	// 注意事项:
          	// prop传入字符串
          	// prop必须传入form的子属性
          	// prop和rule的属性名字一致
            <el-form-item :prop="'tableOne.'+scope.$index+'.tableTwo.'+index + '.value'" :rules="rules.value">
              <el-input v-model="form.tableOne[scope.$index].tableTwo[index].value"></el-input>
            </el-form-item>
          </template>
        </el-table-column>
      </el-table>
    </el-form>

// vue.js_data属性
data() {
		// 自定义验证规则
        const checkNum = function (rule, value, callback) {
          console.log(rule);
          console.log(value);
          console.log(1111111111)
          callback()
        }
        return {
          test: '测试',
          form: {
          	// tableOne动态表示行
            tableOne: [{
              name:'测试',
               // tableTwo动态表示列
              tableTwo: [{
                name: '值1',
                value: ''
              },{
                name: '值2',
                value: ''
              },{
                name: '值3',
                value: ''
              }]
            }]
          },
          rules: {
            value: [
              {required: true, validator: checkNum, trigger: 'blur'},
            ],
          }
        }
      },