react跨页多选实现

🚀🚀🚀 前端实现跨页多选 🚀🚀🚀

---

使用条件

㊙️ react
㊙️ antd

---

实现思路

💭 使用页码作为key，当前页选中项的编号数组作为value，以js对象的形式存入组件state中

---

使用方式

示例

在Table组件直接加入pagination配置，如果使用的是Pagination组件，也可以参照着改，思路是一样的

---

关键代码

// 分页参数
const [pagination, setPagination] = useState({
      current: 1,
      pageSize: 10,
      total: 0,
});

// 被选中行
const [selectedRowKeys, setSelectedRowKeys] = useState({});

// 跨页多选处理
const onSelectChange = (keys, rows) => {
	// 这个是当前被选中的 所有 数据的  "index";
	// 这里 不能直接解构赋值，因为我给selectedRowKeys 对象 的key值是number
    let temp = { ...selectedRowKeys };
    // 因此要使用这种方式来 添加 or 更新 当前页码对应的被选中数组
    temp[pagination.current] = keys;
  
    if (keys.length === 0) {
        delete temp[pagination.current];
    }
  
    // 判断总选中是否为空以确定是否隐藏批量操作按钮
    if (Object.keys(temp).length > 0) {
        setBatchOperateHide(false);
    } else {
        setBatchOperateHide(true);
    }

    setSelectedRowKeys(temp);
}

// 多选配置
const rowSelection = {
    type: 'checkbox',
    selectedRowKeys: selectedRowKeys[pagination.current],
    onChange: onSelectChange,
};

useEffect(() => {
    // 用自己的查询函数
    handleQuery();
}, [pagination.current, pagination.pageSize]);

// table中属性
pagination={{
    total: pagination.total,
    current: pagination.current,
    pageSize: pagination.pageSize,
    showSizeChanger: true,
    pageSizeOptions: [10, 20, 50],
    onChange: (current, pageSize) => {
        setPagination({
            ...pagination,
            current: current,
            pageSize: pageSize,
        });
    },
    showTotal: () => {
        return `共${pagination.total}条`;
    },
}}
rowSelection={rowSelection}

注意事项（必读）

⚠️ 目前当前页点击全选并不是所有页全选，仅选择该页，如有需要可自行调整
⚠️ 当前页取消全选会在selectedRowKeys中移除该页码以及对应的数组