场景:表格数据勾选了某条数据或某几条数据,再通过搜索框搜索数据,此时界面上看不到刚才已勾选的数据,但是点击提交时却需要提交所有刚刚勾选的数据。
搜索出来的数据勾选或取消勾选,当重新搜索或重置搜索时,勾选不会受影响。
这就需要做一些特殊操作,不能直接把selectedRowKeys赋值给选中的keys
,具体应该怎么处理,请看下文。
1 2 3 4 5 6 7 8 9 10 11 12 13
| <a-table @change="handleTableChange" :row-selection="{ selectedRowKeys: data.selectedRowKeys, onChange: onSelectChange, getCheckboxProps: checkboxPropsFn, }" :loading="data.loading" :columns="data.columns" :data-source="data.dataList" :pagination="showPage ? data.options : false" > </a-table>
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46
| const data = reactive({ dataList: [], selectedRowKeys: [], options: { position: ['bottomRight'], showSizeChanger: true, showQuickJumper: true, pageSizeOptions: ['10', '20', '50', '100', '200'], current: 1, pageSize: 9999, total: 0, pages: 0, onChange: page => { data.options.current = page; }, onShowSizeChange: (_current, size) => { data.options.pageSize = size; }, }, })
const handleTableChange = () =>{}
const onSelectChange = selectedRowKeys => { const listIds = data.dataList .map(item => item.roleId) .filter(item => !selectedRowKeys.includes(item));
const oldIds = data.selectedRowKeys.filter(item => !listIds.includes(item));
data.selectedRowKeys = [...new Set(oldIds.concat(selectedRowKeys))]; };
const showPage = computed(() => data.options.total > 9999);
const checkboxPropsFn = record => ({ disabled: record.roleName == '企业管理员' && data.creator, });
|