vue实现表格数据增删
Vue实现表格数据增删的方法
数据绑定与渲染
在Vue中，表格数据通常通过v-for指令动态渲染。定义一个数组类型的数据源（如tableData），结合<table>或<el-table>（Element UI）实现渲染。示例代码：
<template>
<table>
<tr v-for="(item, index) in tableData" :key="index">
<td>{{ item.name }}</td>
<td>{{ item.age }}</td>
<td>
<button @click="deleteRow(index)">删除</button>
</td>
</tr>
</table>
</template>
<script>
export default {
data() {
return {
tableData: [
{ name: '张三', age: 25 },
{ name: '李四', age: 30 }
]
}
}
}
</script>新增数据
通过表单输入绑定v-model，在提交时使用数组的push方法添加新数据。示例代码：
<template>
<input v-model="newItem.name" placeholder="姓名">
<input v-model="newItem.age" placeholder="年龄">
<button @click="addRow">添加</button>
</template>
<script>
export default {
data() {
return {
newItem: { name: '', age: '' }
}
},
methods: {
addRow() {
this.tableData.push({...this.newItem});
this.newItem = { name: '', age: '' }; // 清空表单
}
}
}
</script>删除数据
通过数组的splice方法根据索引删除指定行。结合事件绑定传递当前行的索引：
methods: {
deleteRow(index) {
this.tableData.splice(index, 1);
}
}使用Element UI增强功能
若使用Element UI组件库，可简化表格操作。示例代码：
<template>
<el-table :data="tableData">
<el-table-column prop="name" label="姓名"></el-table-column>
<el-table-column prop="age" label="年龄"></el-table-column>
<el-table-column label="操作">
<template #default="scope">
<el-button @click="deleteRow(scope.$index)">删除</el-button>
</template>
</el-table-column>
</el-table>
</template>注意事项
- 唯一键值：确保
v-for的:key使用唯一标识（如ID而非索引）。 - 响应式更新：直接修改数组长度或通过索引赋值可能无法触发视图更新，推荐使用
push、splice等变异方法。 - 深层数据：嵌套对象需使用
Vue.set或this.$set确保响应式。
