在Vue.js开发中，表格数据的批量删除是一个常见的功能需求。本文将详细介绍如何在Vue.js中实现HTML多选批量删除的实用技巧，包括组件的搭建、数据交互以及相关的事件处理。
1. 组件搭建
首先，我们需要搭建一个基本的Vue组件，该组件将包含一个Element UI的表格，用于展示数据，并支持多选和批量删除功能。
2. 数据交互
在组件的
data
函数中，我们需要定义表格数据
tableData
和选中的行数据
selectedRows
。
export default {
data() {
return {
tableData: [
{ id: 1, name: ‘张三’, age: 30 },
{ id: 2, name: ‘李四’, age: 25 },
{ id: 3, name: ‘王五’, age: 28 }
],
selectedRows: []
};
},
methods: {
// …其他方法
}
};
3. 事件处理
在Element UI表格中，我们可以通过监听
selection-change
事件来获取选中的行数据。当用户点击批量删除按钮时，我们可以遍历
selectedRows
数组，并调用删除接口来删除选中数据。
handleSelectionChange(selection) {
this.selectedRows = selection;
},
handleBatchDelete() {
if (this.selectedRows.length === 0) {
this.$message.error(‘请选择要删除的行！’);
return;
}
// 调用删除接口
this.deleteSelectedRows();
},
deleteSelectedRows() {
// 删除操作逻辑
// …
}
4. 删除操作
在
deleteSelectedRows
方法中，我们需要实现删除操作。这里以调用一个假设的删除接口为例。
deleteSelectedRows() {
const ids = this.selectedRows.map(row => row.id);
// 调用删除接口
this.$http.delete(‘/api/delete’, { data: { ids } })
.then(response => {
if (response.status === 200) {
this.$message.success(‘删除成功！’);
this.tableData = this.tableData.filter(row => !ids.includes(row.id));
}
})
.catch(error => {
this.$message.error(‘删除失败！’);
});
}
总结
通过以上步骤，我们可以在Vue.js中实现HTML多选批量删除的功能。在实际开发中，根据具体需求，可以调整表格的列定义、删除接口以及相关的事件处理逻辑。