el-table写一个批量删除功能
时间: 2023-08-04 18:36:01 浏览: 109
好的,下面是一个简单的示例代码(假设你已经有了一个el-table,并且数据使用v-for循环渲染):
```html
<el-button type="danger" @click="handleBatchDelete">批量删除</el-button>
<el-table :data="tableData">
<el-table-column type="selection"></el-table-column>
<el-table-column prop="name" label="姓名"></el-table-column>
<el-table-column prop="age" label="年龄"></el-table-column>
<el-table-column prop="address" label="地址"></el-table-column>
<el-table-column label="操作">
<template slot-scope="scope">
<el-button type="danger" size="small" @click="handleDelete(scope.$index)">删除</el-button>
</template>
</el-table-column>
</el-table>
```
在上面的代码中,我们添加了一个“批量删除”按钮,它通过调用handleBatchDelete方法来执行批量删除操作。
接下来,我们需要在Vue实例中实现handleBatchDelete方法:
```js
methods: {
handleBatchDelete() {
const selectedRows = this.$refs.table.selection; // 获取选中行的数据
const ids = selectedRows.map(row => row.id); // 获取选中行的id集合
this.$confirm(`确认删除以下${ids.length}条记录?`, '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
// 发送批量删除请求
this.$http.post('/api/delete', { ids }).then(() => {
this.$message.success('删除成功');
// 重新加载数据
this.loadData();
}).catch(() => {
this.$message.error('删除失败');
})
}).catch(() => {
// 取消删除
})
},
handleDelete(index) {
const row = this.tableData[index];
this.$confirm(`确认删除${row.name}?`, '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
// 发送删除请求
this.$http.post('/api/delete', { id: row.id }).then(() => {
this.$message.success('删除成功');
// 重新加载数据
this.loadData();
}).catch(() => {
this.$message.error('删除失败');
})
}).catch(() => {
// 取消删除
})
}
}
```
在上面的代码中,我们使用了element-ui组件库提供的confirm对话框来提示用户是否进行删除操作。在用户点击“确定”按钮后,我们通过选中行的数据来获取需要删除的id集合,然后发送批量删除的请求。在请求成功后,我们重新加载数据,以更新表格的显示。
注意,上面的代码中,我们还提供了一个handleDelete方法,用于删除单个记录。这里只是为了方便说明批量删除的实现方式,实际应用中,我们可以只保留批量删除的代码即可。
阅读全文