vue3 antd-vue 超简单方式实现a-table跨页勾选

server/2024/9/23 2:00:00/

一、效果如下：

第一页勾选了2， 3， 4

翻到第三页勾选24， 25

回显，如比返回第一页的时候触发分页改变，在映射中的第一页的数据给到a-table绑定的state.selectedRowKeys即可，如下方法

二、勾选思路：

因为每次翻页 a-table 勾选绑定的值都重置，因此用一个 selectRowKeyMap 变量进行映射，只需要把勾选到的 key 添加到以分页为 key , 当前页勾选的key为 value ，映射到selectRowKeyMap保存即可，即如下：

javascript">selectRowKeyMap: {1: [2, 3, 4],  // 第一页勾选了 2， 3， 42: [5, 6, 7],  // 第二页勾选了 5， 6， 73: [8, 9, 10]
},

1、实现核心代码：

1)、template

绑定勾选keys数组是 state.selectedRowKeys，勾选触发的方法 onSelectChange

javascript">
<a-tableclass="custom-table-data":dataSource="state.dataSource":row-selection="{ selectedRowKeys: state.selectedRowKeys, onChange: onSelectChange }":row-key="record => record.value":columns="state.columns"bordered:scroll="{ x: state.tableWidth }":pagination="pagination":row-class-name="(_record, index) => (index % 2 === 1 ? 'table-striped' : null)"></a-table>

2）、javascript

javascript"><script setup>
import { computed, reactive } from 'vue';const state = reactive({open: false,targetVlanValue: null,dataSource: [],noDataSource: [],// 当前页勾选的keysselectedRowKeys: [],selectedRowKeysStr: '',columns: [],nocolumns: [],// 映射MapselectRowKeyMap: {},tableWidth: 1200
});// 分页改变
const pageChange = (page, size) => {paginationParams.size == size ? (paginationParams.page = page) : (paginationParams.page = 1);paginationParams.size = size;// 当分页改变的时候  回显当前页的勾选数据state.selectedRowKeys = state.selectRowKeyMap[paginationParams.page];// 接口方法getVlanListFn();
};// 触发选择
const onSelectChange = (selectedRowKeys, selectedRows) => {// 把当前勾选页勾选的数据存入mapstate.selectRowKeyMap[paginationParams.page] = selectedRowKeys;// 回显当前页勾选的keysstate.selectedRowKeys = selectedRowKeys;// 拿到所有勾选的keyslet resultKeys = [];for (let key in state.selectRowKeyMap) {resultKeys = resultKeys.concat(state.selectRowKeyMap[key]);}// 转换成字符串的形式用于展示state.selectedRowKeysStr = resultKeys.join(',');console.log('-------- state.selectRowKeyMap --------', { selectRowKeyMap: state.selectRowKeyMap, resultKeys });
};</script>