vue实现表格数据增删
实现表格数据增删的Vue方案
数据绑定与渲染
使用v-for指令循环渲染表格数据，绑定到Vue实例的data属性。示例代码：
<table>
<tr v-for="(item, index) in tableData" :key="item.id">
<td>{{ item.name }}</td>
<td>{{ item.age }}</td>
<td>
<button @click="deleteItem(index)">删除</button>
</td>
</tr>
</table>新增数据方法
通过表单输入绑定v-model，在提交时更新数据数组：
methods: {
addItem() {
this.tableData.push({
id: Date.now(),
name: this.newItem.name,
age: this.newItem.age
});
this.newItem = { name: '', age: '' }; // 清空表单
}
}删除数据方法
使用数组的splice方法或filter实现删除：
methods: {
deleteItem(index) {
this.tableData.splice(index, 1);
}
}完整组件示例
<template>
<div>
<input v-model="newItem.name" placeholder="姓名">
<input v-model="newItem.age" placeholder="年龄">
<button @click="addItem">添加</button>
<table>
<tr v-for="(item, index) in tableData" :key="item.id">
<td>{{ item.name }}</td>
<td>{{ item.age }}</td>
<td>
<button @click="deleteItem(index)">删除</button>
</td>
</tr>
</table>
</div>
</template>
<script>
export default {
data() {
return {
tableData: [
{ id: 1, name: '张三', age: 25 },
{ id: 2, name: '李四', age: 30 }
],
newItem: { name: '', age: '' }
};
},
methods: {
addItem() {
this.tableData.push({
id: Date.now(),
name: this.newItem.name,
age: this.newItem.age
});
this.newItem = { name: '', age: '' };
},
deleteItem(index) {
this.tableData.splice(index, 1);
}
}
};
</script>关键注意事项
响应式更新
直接通过索引修改数组元素（如this.array[0] = newValue）不会触发视图更新，应使用Vue.set或splice方法
唯一key值
v-for循环时必须指定:key，推荐使用唯一标识符而非循环索引，避免渲染性能问题
数据验证 新增数据时应添加基础验证逻辑，例如：
addItem() {
if (!this.newItem.name || !this.newItem.age) return;
// ...其余逻辑
}进阶实现方案
使用计算属性 对表格数据进行过滤或排序时，使用计算属性保持原始数据不变：
computed: {
sortedData() {
return [...this.tableData].sort((a,b) => a.age - b.age);
}
}服务端交互 结合axios实现数据持久化：
async deleteItem(id) {
await axios.delete(`/api/items/${id}`);
this.tableData = this.tableData.filter(item => item.id !== id);
}
