### 实现 Element UI 中动态增减 Table 表单数据并触发校验 在 Vue 和 Element UI 的开发场景下，当需要对表格形式的数据进行表单验证时，可以通过 `el-form` 和 `el-form-item` 来实现动态增删功能，并确保每次操作都能正确触发表单校验。 #### 1. **基础数据结构** 为了支持动态增减以及校验需求，可以定义如下初始数据结构： ```javascript data() { return { formData: { dataLists: [ { property1: '', property2: '' }, { property1: '', property2: '' } ] }, rules: { 'dataLists.*.property1': [{ required: true, message: '请输入属性1', trigger: 'blur' }], 'dataLists.*.property2': [{ required: true, message: '请输入属性2', trigger: 'blur' }] } }; } ``` 此部分代码初始化了一个包含多个对象的数组 `dataLists`，用于存储每一行的输入字段。同时，在 `rules` 对象中设置了针对这些字段的校验规则[^1]。 --- #### 2. **模板渲染逻辑** 以下是基于上述数据结构的 HTML 模板设计： ```html <el-form :model="formData" :rules="rules" ref="formRef"> <div v-for="(item, index) in formData.dataLists" :key="index"> <!-- 属性1 --> <el-form-item :prop="'dataLists.' + index + '.property1'" :label="'属性1-' + (index + 1)"> <el-input v-model="formData.dataLists[index].property1"></el-input> </el-form-item> <!-- 属性2 --> <el-form-item :prop="'dataLists.' + index + '.property2'" :label="'属性2-' + (index + 1)"> <el-input v-model="formData.dataLists[index].property2"></el-input> </el-form-item> <!-- 删除按钮 --> <el-button type="danger" icon="el-icon-delete" circle @click="removeItem(index)" /> </div> <!-- 添加新项 --> <el-button type="primary" @click="addItem">新增</el-button> <!-- 提交按钮 --> <el-button type="success" @click="submitForm">提交</el-button> </el-form> ``` 在此模板中： - 使用了 `v-for` 循环来遍历 `dataLists` 数组。 - 每一项都绑定了唯一的 `prop` 路径以便于校验。 - 提供了删除当前行的功能并通过事件绑定调用方法 `removeItem`[^2]。 --- #### 3. **核心方法实现** ##### （1）添加新项目 通过向 `dataLists` 数组追加新的空对象来实现新增功能： ```javascript methods: { addItem() { this.formData.dataLists.push({ property1: '', property2: '' }); } } ``` ##### （2）移除指定项目 在删除某一行的同时需重新构建整个 `dataLists` 数组以解决潜在的校验路径错误问题： ```javascript removeItem(index) { const newDataLists = [...this.formData.dataLists]; newDataLists.splice(index, 1); this.$set(this.formData, 'dataLists', newDataLists); // 手动重置校验状态 this.$refs.formRef.clearValidate(); }, ``` 此处利用 `$set` 方法更新响应式数据，并清除之前的校验状态以防残留警告信息[^3]。 ##### （3）提交前整体校验 最后提供一个统一的方法来进行最终提交前的整体校验工作： ```javascript submitForm() { this.$refs.formRef.validate((valid) => { if (valid) { alert('提交成功！'); } else { console.log('表单校验失败'); return false; } }); } ``` 以上实现了完整的动态增删与校验流程[^4]。 --- ###