效果如下:
一、第一种方法
定义一个变量 selectKeysBack 用于维护所有勾选的数据value, 然后用 onSelect 拿到当前操作的数据,以及时候勾选。
这个方法便于拿到后端的数据之后用于回显
1、template
<a-tableclass="custom-table-data":dataSource="state.dataSource":row-selection="{ selectedRowKeys: state.selectedRowKeys, onSelect: onRowChange }":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、method
<script setup>
const state = reactive({open: false,targetVlanValue: null,dataSource: [],noDataSource: [],// table绑定的值selectedRowKeys: [],selectedRowKeysStr: '',// 用于维护所有勾选的值selectKeysBack: [],
})/*** @description: 弹窗初始化* @param {*} params vlan请求参数* @param {*} selectKeys 回显的所有勾选key* @return {*} {void}*/
const init = (params, selectKeys = []) => {state.params = params;// 回显paginationParams.page = 1;state.selectKeysBack = selectKeys ? selectKeys.map(item => item * 1) : [];state.selectedRowKeys = selectKeys ? selectKeys.map(item => item * 1) : [];state.selectedRowKeysStr = state.selectedRowKeys.join(',');state.open = true;getVlanListFn(); // 查询的方法
};// 勾选改变
const onRowChange = (record, selected) => {// 点击行勾选, 用于维护我勾选的所有数据if (selected) {state.selectKeysBack.push(record.value);} else {state.selectKeysBack.splice(state.selectKeysBack.indexOf(record.value), 1);}// 将拿到的所有勾选数据 复制给 table绑定的值selectedRowKeysstate.selectedRowKeys = state.selectKeysBack;state.selectedRowKeysStr = state.selectedRowKeys.join(',');
};// 分页改变
const pageChange = (page, size) => {paginationParams.size == size ? (paginationParams.page = page) : (paginationParams.page = 1);paginationParams.size = size;// 分页改变的时候 将所有的数据复制给table绑定的值用于回显state.selectedRowKeys = state.selectKeysBack;getVlanListFn();
};
</script>
二、第二种方法
1、效果:
第一页勾选了2, 3, 4
翻到第三页勾选24, 25
回显,比如跳转返回第一页的时候触发分页改变, 在映射中的第一页的数据给到a-table绑定的state.selectedRowKeys即可,如下方法
2、勾选思路:
因为每次翻页 a-table 勾选绑定的值都重置,因此用一个 selectRowKeyMap 变量进行映射, 只需要把勾选到的 key 添加到 以分页为 key , 当前页勾选的key为 value ,映射到selectRowKeyMap保存即可,即如下:
selectRowKeyMap: {1: [2, 3, 4], // 第一页勾选了 2, 3, 42: [5, 6, 7], // 第二页勾选了 5, 6, 73: [8, 9, 10]
},
实现核心代码:
1)、template
绑定勾选keys数组是 state.selectedRowKeys, 勾选触发的方法 onSelectChange
<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
<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>