element动态添加表单（element-plus el-table、动态添加、删除行、input输入框）
模板部分 ，使用 <el-table> 元素作为表格容器 ，绑定 data 属性传入表格数据 。用 v-for 指令遍历每一项数据 ，使用普通文本或 <el-input> 组件渲染每个单元格 。表格最后一列为操作列 ，包含 “Add ” 和 “Delete ” 两个按钮 ，点击它们可以增加或删除数据行：
<template> <div> <el-table :data="tableData"> <el-table-column label="Name" prop="name"> <template #default="{row}"> <el-input v-model="row.name" /> </template> </el-table-column> <el-table-column label="Age" prop="age"> <template #default="{row}"> <el-input v-model.number="row.age" type="number" /> </template> </el-table-column> <el-table-column label="Actions"> <template #default="{row}"> <el-button @click="addRow(row)">Add</el-button> <el-button @click="deleteRow(row)">Delete</el-button> </template> </el-table-column> </el-table> </div> </template>逻辑部分 ，定义 tableData 数据数组 ，并分别实现 addRow 和 deleteRow 两个方法 ，以响应用户的添加 、删除操作 。在 addRow 方法中 ，向 tableData 数组中添加一个空对象 。在 deleteRow 方法中 ，通过 Array.prototype.findIndex() 找到要删除的行在数组中的索引 ，并使用 Array.prototype.splice() 方法从数组中删除该行：
在这里 ，我们仍然使用了 ref 函数将 tableData 声明为响应式数据 。然后在 template 中调用 addRow 和 deleteRow 方法 ，并传入当前操作的行数据作为参数 。
希望这能帮到您！
创心域SEO版权声明：以上内容作者已申请原创保护，未经允许不得转载，侵权必究！授权事宜、对本内容有异议或投诉，敬请联系网站管理员，我们将尽快回复您，谢谢合作！