公司搭建网站模板公众号代运营

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

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

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

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

<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>