react hook+antdesign 实现table组件表格跨页多选

Sylvasylva

已于 2022-12-15 11:27:16 修改

阅读量1.4k

点赞数 4

分类专栏： react 文章标签： react.js javascript vue.js

于 2022-06-10 15:11:40 首次发布

本文链接：https://blog.csdn.net/Sylvasylva/article/details/125221871

版权

  //先定义两个空的数组，用于存放选中的id和数据，可根据具体需求选择是否存贮选中行所有数据
  const [checkedData, setCheckedData] = useState<any>([]); // 选中行的数据
  const [selectedRowKeys, setSelectedRowKeys] = useState<any>([]); // 选中的数据id


   //在table组件中添加rowSelection配置
   rowSelection={
  {
      selectedRowKeys: selectedRowKeys,//展示选中的数据
      onSelect: tableSelect,//单条数据取消/选中的回调
      onSelectAll: tableSelectAll,//全选/取消全选的回调
   }}

   // 手动选择/取消选择某行
  const tableSelect = (record: any, selected: any) => {
    //如果选中某一行，把选中的这行数据及id分别存到checkedData、selectedRowKeys中
    if (selected) {
      const arr = checkedData.map((item: any) => {
        return item.id;
      });
      setSelectedRowKeys([...arr, record.id]);
      setCheckedData([...checkedData, record]);
    //取消选中，则在checkedData、selectedRowKeys中过滤掉这条数据
    } else {
      const newData = checkedData.filter((item: any) => item.id !== recor