根据数组对象中的某个属性值删除元素（ts环境）

### Element UI 动态表单元素实现 #### 使用 Vue 和 Element UI 构建动态表单 为了创建一个可以动态增加和删除条目的表单，Vue 的响应式数据绑定特性和 Element UI 提供的强大组件库相结合是非常有效的解决方案。通过这种方式，不仅可以轻松管理复杂的表单逻辑，还能确保用户体验的一致性和友好性。 在实际应用中，可以通过定义一个数组来存储各个表单项的数据，并利用 `v-for` 指令循环渲染这些项。每当用户点击按钮添加新条目时，在该数组末尾追加一个新的对象；当移除某个特定条目时，则从数组中剔除此对象即可[^2]。 对于每一个输入框或其他类型的控件来说，都需要为其指定唯一的键名以便于识别不同的实例。这通常意味着要给每一条记录分配一个唯一标识符（ID），从而允许精确控制每个字段的行为以及执行相应的验证规则[^4]。 下面是一个简单的例子展示如何使用上述概念构建具有增删功能的动态表单： ```html <template> <div class="dynamic-form"> <!-- 定义 el-form 并设定其属性 --> <el-form :model="formItems" label-width="80px" ref="ruleFormRef"> <!-- 循环遍历 formItems 数组中的每一项 --> <div v-for="(item, index) in formItems" :key="index"> <el-row> <!-- 输入框 --> <el-col :span="10"> <el-form-item prop="name" :rules="{ required: true, message: '请输入名称', trigger: ['blur'] }"> <el-input placeholder="请输入内容" v-model.trim="item.name"></el-input> </el-form-item> </el-col> <!-- 删除按钮 --> <el-button @click.prevent="removeFormItem(index)">删除</el-button> </el-row> <!-- 如果不是最后一个元素则显示分隔线 --> <hr v-if="index !== (formItems.length - 1)"> </div> <!-- 添加新的表单项 --> <el-button type="primary" @click="addFormItem">新增条目</el-button> </el-form> </div> </template> <script setup lang="ts"> import { reactive, ref } from 'vue' const ruleFormRef = ref(null) // 初始化表单列表 let idCounter = 0; const formItems = reactive([ { name: '', key: ++idCounter, } ]) function addFormItem() { const newItem = { name: '', key: ++idCounter, }; // 向表单列表中添加一项 formItems.push(newItem); } function removeFormItem(index:number){ // 移除选定索引位置上的那一项 if(formItems.length>1){ formItems.splice(index, 1); } } </script> ``` 此代码片段展示了怎样基于 Vue 及 Element UI 创建具备基本操作能力——即添加与移除条目——的动态表单界面。注意这里还加入了必要的样式调整以增强视觉效果。 此外，针对某些特殊类型的输入域如数字型 (`type="number"`), 需要在对应的 `<el-input>` 标签上加上 `.number` 修饰符(`v-model.number`) ，这样能保证即使用户手动修改了值也能保持正确的数值类型处理。