vue实现element表格嵌套表单进行复杂验证

来源：网络文章列表 2020-06-19 8

表单嵌套在表格里的动态数据进行验证的解决办法

需求是表格需要能动态增加，然后又根据归还方式不同，如果是邮寄方式，后面快递信息都是必填。如果不是邮寄方式，那后面数据就不用填。先把效果展示出来

需要进行每一项表单里面的数据进行验证！

查element找到了需要的代码。

因为是动态的，所以prop绑定的时候需要不能唯一，就是动态数据。官方写法

:prop="'domains.' + index + '.value'"

其实主要就是这个了。然后添加验证规则就行。我直接附上代码记录一下

参考代码：

<el-table-column prop="returnType" label="归还方式" align='center' width="150">
  <template slot-scope="scope">
    <el-form-item :prop="'FC_ReturnEquipmentList.'+scope.$index+'.returnType'" label-width="0px"
      :rules='formContentRules.returnType'>
      <el-select size="mini" placeholder="归还方式" v-model="scope.row.returnType">
        <el-option v-for="item in returnTypeBox" :key="item.value" :label="item.label" :value="item.value">
        </el-option>
      </el-select>
    </el-form-item>
  </template>
</el-table-column>
<el-table-column prop="expressage" label="快递公司" align='center' width="180">
  <template slot-scope="scope">
    <el-form-item :prop="'FC_ReturnEquipmentList.'+scope.$index+'.expressage'" label-width="0px"
      :rules='formContentRules.expressage' v-if="scope.row.returnType=='postSend'">
      <el-input v-model="scope.row.expressage" placeholder="快递公司" size="mini"></el-input>
    </el-form-item>
    <span v-else></span>
  </template>
</el-table-column>

js代码

data(){
  return{
    returnTypeBox: [{ value: 'postSend', label: '邮寄方式' }, { value: 'theReturn', label: '现场归还' }],
    //校验规则
    formContentRules: {
      expressageNum: [{ required: true, message: '请填写', trigger: 'blur' }],
      expressage: [{ required: true, message: '请填写', trigger: 'change' }],
    },
  }
}