elment-ui提供表单验证,而在实际中表格里也涉及表单验证,其关键点在于如何给表格中须要验证的字段动态添加prop,再给其绑定规则。javascript
<el-form :rules="ruleProcessForm.rules" :model="ruleProcessForm" ref="formProcess"> <el-table :data="ruleProcessForm.processData" tooltip-effect="dark" style="width: 100%" > <el-table-column label="工序名称" prop="processName" > <template slot-scope="scope"> <el-form-item :prop="'processData.' + scope.$index + '.processName'" :rules='ruleProcessForm.rules.processName'> <el-select v-model="scope.row.processName" @visible-change="getProcessNameInfo" @change="processNameChange(scope.row)" placeholder="工序名称"> <el-option v-for="item in processNameList" :key="item.processId" :label="item.processName" :value="item.processName"> </el-option> </el-select> </el-form-item> </template> </el-table-column> </el-table> </el-form> <script> export default { data () { return { formProcess:{ processName:"", }, ruleProcessForm : { rules: { processName:[{ required: true, message: '请选择工序名称', trigger: 'change' }], }, processData: [] } } }, methods: { this.$refs["formProcess"].validate((valid,ruleProcessForm) => { console.log(valid) if (valid) { } } } } </script>