回调函数也能主动调用丨antd Table 组件外实现全选 & 取消全选

Victor Ye2022.04.23约 493 字预计阅读 2 分钟阅读量

本文目录

前言

　　最近在做宝马的一个项目，需要实现 Table 的全选 & 取消全选，原型图如下:

　　然而，antd 官网给的例子里只有在组件中的实现方法（自定义选择项——通过 rowSelection.selections 配置），如下图:

Ant Design Table 的自定义选择菜单，包含全选、反选和清空选项 — antd 提供的功能

　　如果想要做到原型图这样在组件外实现全选 & 取消全选，则需要更灵活地运用 rowSelection 这个配置项。

Talk is cheap, show me the code!

const [selectedRowKeys, setSelectedRowKeys] = useState([]);
const [selectedRows, setSelectedRows] = useState([]);
const [tableData, setTableData] = useState([]);

useEffect(() => {
  setTableData(mock); // 将 tableData 先设为表格内的全部数据
}, []); 

// 关键点：这个函数既作为回调函数，也能手动调用～
const handleChange = (selectedRowKeys, selectedRows) => {
  setSelectedRowKeys([...selectedRowKeys]);
  setSelectedRows([...selectedRows]);
};

// 点击 选择全部 的回调函数
const selectAll = () => {
  tableData.forEach((o, i) => {
    // 遍历，和全部的 tableData 作对比，找到没有勾选的 row, 将它的 key 值保存到 selectedRowKeys 数组
    if (!selectedRows.includes(o)) selectedRowKeys.push(tableData[i].account);
  });
  // 手动修改 selectedRowKeys，和 Table 组件内的 selectedRowKeys 联动
  handleChange(selectedRowKeys, [...tableData]); 
};

// 点击 取消全部 的回调函数
const selectNone = () => {
  // 手动修改 selectedRowKeys 和 selectedRows，全部置为空
  handleChange([], []);
};

const rowSelection = {
  selectedRowKeys, // 受控
  type: "checkbox",
  onChange: handleChange // 将 handleChange 定义在外面，从而可以手动调用
};

// Table 组件，略去了无关配置
  <Table
    rowKey="account"
    columns={columns}
    dataSource={mock}
    rowSelection={rowSelection}
/>

总结

　　其实最关键的地方在于 rowSelection 里的 onChange ，通常的回调函数我们不会直接调用，而在这里，如果要实现在表格外全选，则需要手动调用这个 onChange 。

2023.1.21 更新

　　最近做了个需求，需要在一个 form 中做三个字段间的联动:

　　期间遇到了form.setFieldsValue 不会触发控件 onChange的问题，找到了一个解决方案，和我这篇文章的思路挺像的，也是需要手动触发一个回调函数，在这里更新记录一下。

留言

欢迎交流想法，也欢迎指出文中的问题。