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
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值