好的，以下是
使用 Vue3 +
Element-Plus 实现表格批量删除的代码示例：
```
<template>
<div>
<el-button type="primary" @click="handleBatchDelete">批量删除</el-button>
<el-
table :data="
tableData" style="width: 100%">
<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>
</div>
</template>
<
script>
import { reactive, to
Refs } from '
vue'
import { ElMessage, ElMessageBox } from '
element-plus'
export default {
setup() {
const state = reactive({
tableData: [
{ id: 1, name: '张三', age: 18 },
{ id: 2, name: '李四', age: 20 },
{ id: 3, name: '王五', age: 22 }
]
})
// 批量删除
const handleBatchDelete = () => {
const selection = state.selection
if (selection.length === 0) {
ElMessage.warning('请至少选择一项进行删除')
return
}
ElMessageBox.confirm('确定要删除选
中的数据吗？', '提示', { type: 'warning' }).then(() => {
// 删除选
中的数据
state.
tableData = state.
tableData.filter(item => !selection.includes(item))
ElMessage.success('删除成功')
}).catch(() => {})
}
return {
...to
Refs(state),
handleBatchDelete
}
}
}
</
script>
```
在这个例子
中，我们
使用了
Element-Plus 的 `El
Table` 组件和 `ElButton` 组件。`El
Table` 组件
中的 `type="selection"` 属性表示开启选择模式，这样就可以在表格左侧显示多选框，方便进行批量删除操作。点击批量删除按钮时，会弹出确认对话框，用户确认后会删除选择的数据。在删除数据时，我们
使用了
Vue3 的响应式 API `reactive` 和 `to
Refs`，这样可以自动更新视图。同时，我们也
使用了
Element-Plus 的消息提示组件 `ElMessage` 和确认对话框组件 `ElMessageBox`，提高了用户体验。
扫一扫
964
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
