vue实现表格批量删除
Vue 实现表格批量删除的方法
基础实现思路
在 Vue 中实现表格批量删除功能，通常需要以下几个核心步骤：
- 表格数据渲染
- 复选框绑定与选中状态管理
- 批量删除逻辑处理
具体实现代码示例
模板部分
<template>
<div>
<table>
<thead>
<tr>
<th><input type="checkbox" v-model="selectAll" @change="toggleSelectAll"></th>
<th>ID</th>
<th>名称</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr v-for="item in tableData" :key="item.id">
<td><input type="checkbox" v-model="selectedItems" :value="item.id"></td>
<td>{{ item.id }}</td>
<td>{{ item.name }}</td>
<td><button @click="deleteSingle(item.id)">删除</button></td>
</tr>
</tbody>
</table>
<button @click="deleteMultiple" :disabled="!selectedItems.length">批量删除</button>
</div>
</template>脚本部分
<script>
export default {
data() {
return {
tableData: [
{ id: 1, name: '项目1' },
{ id: 2, name: '项目2' },
{ id: 3, name: '项目3' }
],
selectedItems: [],
selectAll: false
}
},
methods: {
toggleSelectAll() {
if (this.selectAll) {
this.selectedItems = this.tableData.map(item => item.id)
} else {
this.selectedItems = []
}
},
deleteSingle(id) {
this.tableData = this.tableData.filter(item => item.id !== id)
},
deleteMultiple() {
this.tableData = this.tableData.filter(
item => !this.selectedItems.includes(item.id)
)
this.selectedItems = []
this.selectAll = false
}
}
}
</script>进阶优化建议
API 集成 在实际项目中，通常需要与后端 API 交互。可以将删除方法修改为异步操作：
async deleteMultiple() {
try {
await axios.delete('/api/items', { data: { ids: this.selectedItems } })
this.tableData = this.tableData.filter(
item => !this.selectedItems.includes(item.id)
)
this.selectedItems = []
} catch (error) {
console.error('删除失败:', error)
}
}状态管理 对于大型应用，建议使用 Vuex 管理选中状态和表格数据：
// 在 store 中定义 mutations
mutations: {
REMOVE_ITEMS(state, ids) {
state.tableData = state.tableData.filter(item => !ids.includes(item.id))
}
}
// 组件中调用
this.$store.commit('REMOVE_ITEMS', this.selectedItems)用户体验优化
- 添加删除确认对话框
- 实现批量删除进度提示
- 添加成功/失败通知
- 对空选状态禁用删除按钮
注意事项
- 确保为每行数据设置唯一的 key 值
- 处理删除后的选中状态重置
- 考虑分页情况下的批量删除实现
- 对于大量数据，建议使用虚拟滚动优化性能
