Antd 中Table表格 在表格外选中表格数据

效果

 

实现方法

首先按照官方文档开启表格

1. 在table组件中添加  rowSelection 属性

const [selectedRowKeys, setSelectedRowKeys] = useState([]);//存储选中的数据
   <Table
        rowSelection={rowSelection}//开启表头选择
        columns={columns}
        loading={tableData.loading}
        dataSource={tableData.data}
        rowKey={(record) => record.id}
        pagination={false}
      />
 const onSelectChange = (newSelectedRowKeys) => {
    console.log('selectedRowKeys changed: ', selectedRowKeys);
    setSelectedRowKeys(newSelectedRowKeys);
  };
  const rowSelection = {
    selectedRowKeys,
    onChange: onSelectChange,
  };

2.添加CheckBox 

 <Checkbox 
  onChange={selectAll}//选择时的回调
  checked={tableData.data.length == selectedRowKeys.length} //控制选中状态
  style={{ marginLeft: 10 }}
>
选中本页
       
     <Button disabled={!selectedRowKeys.length > 0} style={{ marginLeft: 20 }}> 删除选中</Button>
        </Checkbox>

3. CheckBox的回调函数

  const selectAll = (e) => {
    let newSelect = [];//定义一个数组
    if (e.target.checked == true) {
      tableData.data.map((item) => {//遍历表格数据
        newSelect.push(item.id);//将每组数据下的key添加到定义的数组中
      })
      setSelectedRowKeys(newSelect)//修改选择数组
    } else {
      setSelectedRowKeys(newSelect)
    }
  };
  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
如果你使用的是 antdTable 组件,可以通过以下步骤来实现在分页切换时保留之前的选中项: 1. 在 Table 组件,设置 rowSelection 属性,该属性用于控制行选择功能。 2. 在 rowSelection ,设置 selectedRowKeys 属性,该属性用于存储当前选中的行的 key 值。 3. 在 onChange 回调函数,通过参数 pagination 获取当前的分页信息,并将 selectedRowKeys 存储到 state 。 4. 在 render ,通过 state 的 selectedRowKeys 属性,将之前选中的行重新选中。 下面是一个示例代码: ``` class MyTable extends React.Component { state = { selectedRowKeys: [], // 存储当前选中的行的 key 值 }; onSelectChange = selectedRowKeys => { // 更新选中的行 this.setState({ selectedRowKeys }); }; render() { const { selectedRowKeys } = this.state; const rowSelection = { selectedRowKeys, onChange: this.onSelectChange, }; const dataSource = [ { key: '1', name: 'Mike' }, { key: '2', name: 'John' }, { key: '3', name: 'Lucy' }, { key: '4', name: 'Tom' }, ]; const columns = [ { title: 'Name', dataIndex: 'name', key: 'name' }, ]; return ( <Table rowSelection={rowSelection} dataSource={dataSource} columns={columns} pagination={{ pageSize: 2, onChange: (page, pageSize) => { // 获取当前分页的选中行 const { selectedRowKeys } = this.state; // 更新分页信息 this.setState({ selectedRowKeys: [], }); }, }} /> ); } } ``` 在上面的代码,我们定义了一个 Table 组件,该组件包含一个 rowSelection 属性,用于控制行选择功能。在 onChange 回调函数,我们获取当前的分页信息,并将之前选中的行存储到 state 。在 render ,我们通过 state 的 selectedRowKeys 属性,将之前选中的行重新选中
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值