场景:表格数据勾选了某条数据或某几条数据,再通过搜索框搜索数据,此时界面上看不到刚才已勾选的数据,但是点击提交时却需要提交所有刚刚勾选的数据。
搜索出来的数据勾选或取消勾选,当重新搜索或重置搜索时,勾选不会受影响。
这就需要做一些特殊操作,不能直接把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, });
 
  |