场景: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>