【react+antd】當你使用了可選擇的table【rowSelection】,卻在操作後無法清除已選擇狀態
阿新 • • 發佈:2020-10-26
可以在rowSelection物件內宣告selectedRowKeys,通過改變它來控制表格的選中狀態:
const [selectKeys, setSelectedKeys] = useState<any[]>([]); // 通過 rowSelection 物件表明需要行選擇 const rowSelection = { selectedRowKeys: selectKeys, onChange(selectedRowKeys: any, selectedRows: any) { setSelectRows(selectedRows); setSelectedKeys(selectedRowKeys) }, onSelect(_: any, __: any, selectedRows: any) { setSelectRows(selectedRows); }, onSelectAll(_: any, __: any, selectedRows: any) { setSelectRows(selectedRows); } }; // 操作事件 // 確定提交 const rowsSubmit = async () => { const param = { tagId: tagId || '', storeIds: selectRows ? selectRows.map((item: any) => item.id) : [] }; const result = await relaStores(param); if (result.messageType === 'SUCCESS') { message.success(result.messageContent); handleSearch(); handleSearchRelaed(); setSelectRows([]) setSelectedKeys([]) } else { message.error(result.messageContent); } }; // 表格: <Table dataSource={data} columns={columns} rowKey="id" expandTableParame={{ rowSelection }} key="搜尋店鋪" />