在 Element UI 中，实现 el-form 动态添加和删除验证规则有多种方法。 ### 动态添加验证规则 - **借助 el-form 的校验机制**：可以在 el-table 外层嵌套一层 el-form，利用 el-form 的校验机制。由于每行都需要校验，可借助 `scope.$index` 给表单设置 `rules` 属性传入验证规则，给表单设置 `model` 属性传入表单数据，给表单项（Form-item）设置 `prop` 属性，值为需要校验的字段名 [^1]。 - **直接将规则写在 el-form-item 中**：当 form 需要动态添加行组件时，若在 `rules` 中设置校验规则不合适，可直接将规则写在 el-form-item 中。示例代码如下： ```vue <template> <div> <div v-for="(item, index) in budgetAddForm.Budgetdetails" :key="index"> <el-row :gutter="10" class="row-content"> <el-col :span="4"> <el-form-item label="" label-width="0" :rules="{required: true, message: '请选择媒体类型', trigger: 'blur'}" :prop="item.Typeid"> <el-select v-model="item.Typeid" clearables filterable @change="mediaTypeChange(item)" placeholder="请选择媒体类型" class="industry-selector"> <el-option v-for="items in mediatTypeList" :key="items.typeid" :label="items.typename" :value="items.typeid"></el-option> </el-select> </el-form-item> </el-col> <el-col :span="5"> <el-form-item label="" label-width="0" :rules="{required: true, message: '请输入预算金额', trigger: 'blur'}" prop="Cost"> <el-input type="text" v-model="item.Cost" autocomplete="off"></el-input> </el-form-item> </el-col> </el-row> </div> </div> </template> ``` [^3] ### 动态删除验证规则 动态删除验证规则可以通过移除相应的表单项来实现。例如，在动态添加的输入框场景中，当删除某个输入框时，对应的验证规则也会随之移除。示例代码如下： ```vue <template> <div> <div v-for="(item, index) in xqcunModel.dynamicItem" :key="index"> <el-form-item :rules="{required: true, message: '请输入姓名', trigger: 'blur'}" prop="name"> <el-input v-model="item.name" autocomplete="off"></el-input> </el-form-item> <el-form-item :rules="{required: true, message: '请输入电话', trigger: 'blur'}" prop="phone"> <el-input v-model="item.phone" autocomplete="off"></el-input> </el-form-item> <el-button @click="deleteItem(item, index)">删除</el-button> </div> <el-button @click="addItem">添加</el-button> </div> </template> <script> export default { data() { return { xqcunModel: { dynamicItem: [] }, rules: [] }; }, methods: { addItem() { this.xqcunModel.dynamicItem.push({ name: '', phone: '' }); }, deleteItem(item, index) { this.xqcunModel.dynamicItem.splice(index, 1); }, handlegetData() { console.log(this.xqcunModel.dynamicItem); } } }; </script> ``` [^4]