vue3：使用：批量删除功能

帅帅哥的兜兜2023-09-02 15:01

场景：vue中使用el-table,常需要记住上一页所勾选的数据，批量删除操作，或者弹窗分页勾选，进行第一页勾选，在调后端接口选择第二页勾选其他数据。

1、element-ui 的table表格可以轻松实现多选的功能，只要在表格列中增加type="selection"的一列即可。

2、保存勾选值，分页记录，添加 :reserve-selection="true"

大部分情况下，表格的数据是有分页的，分页一般是要请求后台接口，这样上一页也就是上一次请求的数据的选中状态就没有了。element-ui提供了reserve-selection，可以保存数据更新前选中的值，仅对 type=selection 的列有效，类型为 Boolean，为 true 则会在数据更新之后保留之前选中的数据（需指定 row-key）。

javascript 复制代码

<el-table 
    v-loading="loading" 
    ref="multipleTableRef" 
    :data="tableList" 
    @selection-change="handleSelectionChange" // 多选事件
    :row-key="getRowKeys"
>
    <el-table-column type="selection" :reserve-selection="true" width="55" fixed='left' />
</el-table>

<script setup name="serviceLeader">
const multipleTableRef = ref();
const multipleSelection = ref([]) // 多选的数据
// 多选
const handleSelectionChange = (val) => {
    console.log('多选', val)
    multipleSelection.value = val
}
// 
const getRowKeys = (row) => {
    return row.id
}
</script>