vue3 antd-vue 超简单方式实现a-table跨页勾选以及解决全选异常的问题

个人博客（纯手戳 vue3 + nodejs + mysql ）http://snows-l.site

一、第一种方法

定义一个变量  selectKeysBack 用于维护所有勾选的数据value,  然后用 onSelect 拿到当前操作的数据，以及是否勾选。const onRowChange = (record, selected) => {}), 详情请查看代码

重点：每次分页改变的时候都将维护的  selectKeysBack（所有选择的value） 都赋值给a-table绑定的值selectedRowKeys， 因为selectKeysBack收集的是所有勾选的值， 所以不管翻页到哪一页都有回显勾选

这个方法便于拿到后端的数据之后用于回显

        1、template

<a-table
  class="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: [],
  // 用于维护所有勾选的值
  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绑定的值selectedRowKeys
  state.selectedRowKeys = state.selectKeysBack;
};


// 分页改变
const pageChange = (page, size) => {
  paginationParams.size == size ? (paginationParams.page = page) : (paginationParams.page = 1);
  paginationParams.size = size;
  // 分页改变的时候  将所有的数据复制给 table绑定的值用于回显
  state.selectedRowKeys = state.selectKeysBack;
  getVlanListFn();
};
</script>

3、解决全选异常的问题

问题描述：当全选的时候会出现点击了全选但是下面的所有项没有勾选的情况， 只有当鼠标划过的时候才会出现勾选的样式，至少我出现了这个问题

这个时候需要加上全选的自定义方法（onSelectAll: onSelectAll）即可，代码如下（注意： 点击全选的时候先判断是否存在， 不然会出现先勾n个，在点击全选的这种情况， 出现重复的清空）

<a-table
  class="custom-table-data"
  :dataSource="state.dataSource"
  :row-selection="{ 
    selectedRowKeys: state.selectedRowKeys,
    onSelect: onRowChange,
    onSelectAll: onSelectAll
  }"
  :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>



<script setup>
const state = reactive({
  open: false,
  targetVlanValue: null,
  dataSource: [],
    
  // table绑定的值
  selectedRowKeys: [],
  // 用于维护所有勾选的值
  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绑定的值selectedRowKeys
  state.selectedRowKeys = state.selectKeysBack;
};



// 触发全选
const onSelectAll = selected => {
  // 拿到当前页的数据
  let rows = state.dataSource;
  // 注意： 先判断是否存在， 不然会出现 先勾两个，再点击全选， 出现重复

  if (selected) {
    rows.forEach(item => {
            if (!state.selectKeysBack.includes(item.value)) {
        state.selectKeysBack.push(item.value);
      }
    });
    state.selectedRowKeys = state.selectKeysBack;
  } else {
    // 取消勾选 循环查找 当前的value是否存在，存在就删除
    rows.forEach(item => {
      state.selectKeysBack.splice(state.selectKeysBack.indexOf(item.value), 1);
    });
    // 手动清空绑定值 才能实现当前页 全部取消勾选
    state.selectedRowKeys = [];
  }
};


// 分页改变
const pageChange = (page, size) => {
  paginationParams.size == size ? (paginationParams.page = page) : (paginationParams.page = 1);
  paginationParams.size = size;
  // 分页改变的时候  将所有的数据复制给table绑定的值用于回显
  state.selectedRowKeys = state.selectKeysBack;
  getVlanListFn();
};
</script>