el-table批量删除
时间: 2023-11-16 17:06:04 浏览: 55
好的,关于el-table批量删除,你可以这样实现:
1. 在el-table中添加一个checkbox列,用于选择要删除的行。
2. 给checkbox绑定一个v-model,用于记录选中的行。
3. 添加一个删除按钮,点击按钮时获取选中的行,发送请求删除数据。
具体实现可以参考以下代码:
```html
<template>
<div>
<el-table :data="tableData" style="width: 100%">
<el-table-column type="selection" width="55"></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>
<div style="margin-top: 20px">
<el-button type="danger" @click="handleDelete">删除</el-button>
</div>
</div>
</template>
<script>
export default {
data() {
return {
tableData: [
{ name: '张三', age: 18, address: '北京市' },
{ name: '李四', age: 20, address: '上海市' },
{ name: '王五', age: 22, address: '广州市' },
{ name: '赵六', age: 24, address: '深圳市' }
],
selectedRows: [] // 记录选中的行
}
},
methods: {
handleDelete() {
// 获取选中的行
const ids = this.selectedRows.map(row => row.id)
// 发送删除请求
// ...
}
}
}
</script>
```