Element UI 表格树形结构表单校验优化

在 Element UI 表格树形结构中，我们经常需要对表单项进行校验。但是，由于表格树形结构的特点，表单项的 prop 属性往往需要动态绑定，这会导致校验规则无法正确匹配到对应的表单项，从而出现校验失效的问题。

以下代码展示了一个常见的场景，其中 el-form-item 组件的 prop 属性使用了动态绑定，导致数量、其余等字段无法进行校验：

<el-form :model="form" ref="formRef" :rules="rules" label-position="top"><el-table v-if="treeFlag" style="margin-bottom:20px;" ref="tableTree" :data="form.detail" row-key="sourceCode" border default-expand-all highlight-current-row @row-click="rowClick" :tree-props="{children: 'children', hasChildren: 'hasChildren'}"><el-table-column prop="count" align="center" label="数量" width="250"><template #default="scope"><el-form-item :prop="'detail.' + scope.$index + '.count'"  :rules="[{ required: scope.row.level == 2 ? true : false, message: '数量不能为空', trigger: 'blur' }]"><el-input v-model="scope.row.count" placeholder="数量" :disabled="scope.row.level != 2"/></el-form-item></template></el-table-column><el-table-column prop="sourceFrom" align="center" label="自制/外购/代装" width="250"><template #default="scope"><el-form-item :prop="'detail.' + scope.$index + '.sourceFrom'" :rules="[{ required: scope.row.level == 2 ? true : false, message: '自制/外购/代装不能为空', trigger: 'blur' }]"><el-input v-model="scope.row.sourceFrom" placeholder="自制/外购/代装" :disabled="scope.row.level != 2"/></el-form-item></template></el-table-column><el-table-column prop="other" align="center" label="其余" width="250"><template #default="scope"><el-form-item :prop="'detail.' + scope.$index + '.other'" :rules="[{ required: scope.row.level == 2 ? true : false, message: '其余不能为空', trigger: 'blur' }]"><el-input v-model="scope.row.other" placeholder="其余" :disabled="scope.row.level != 2"/></el-form-item></template></el-table-column></el-table></el-form><el-button type="primary" plain icon="Plus"  @click="handleAdd">提交</el-button>

为了解决这个问题，我们可以将 el-form-item 组件的 prop 属性改为直接绑定表单项的属性名，例如：

<el-form-item prop="count" :rules="[{ required: true, message: '数量不能为空', trigger: 'blur' }]"><el-input v-model="scope.row.count" placeholder="数量" :disabled="scope.row.level != 2"/></el-form-item>

这样就可以正确校验表单项了。

除了上述方法，我们还可以通过以下方式解决这个问题：

• 使用 el-form 组件的 validateFields 方法，并传入要校验的字段名数组，例如：this.$refs['formRef'].validateFields(['count', 'sourceFrom', 'other'], (valid, fields) => { ... });
• 使用 Vue.js 的 $set 方法将表单项添加到 Vue 实例的数据对象中，例如：this.$set(this.form.detail[scope.$index], 'count', value);

选择哪种方法取决于具体的业务需求和代码风格。