antd table 行选择 rowSelection 各种情况

1. 去掉全选框

官网文档上写的 hideDefaultSelections 这个属性设置为true可去掉全选,但是配置之后根本不行

给columnTitle 这个属性设置为空格即可,注意是空格‘ ’不是空字符串‘’

2. 单选还是复选

type多选/单选,checkbox or radio

3. 可选,不可选

getCheckboxProps选择框的默认属性配置Function(record)

 :rowSelection="{
        selectedRowKeys: selectedRowKeys,
        onChange: onSelectChange,
        getCheckboxProps: getCheckboxProps,
        onSelect: onCheckChange,
        columnTitle: ' ',
      }"
 getCheckboxProps(record) {
      //  console.log(record.status, 'status');
      return {
        props: {
          //当状态是1或者2的时候执行disable
          disabled: record.subStatus != 0,
        },
      };
    },

  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Antd Table提供了一个非常方便的选择框功能,可以让用户通过复选框来选择或多数据。具体实现方式如下: 1. 在columns中增加一个列,用来显示选择框。 ```javascript const columns = [ { title: 'Name', dataIndex: 'name', key: 'name', }, { title: 'Age', dataIndex: 'age', key: 'age', }, { title: 'Address', dataIndex: 'address', key: 'address', }, { title: 'Action', key: 'action', render: (text, record) => ( <Space size="middle"> <a>Delete</a> </Space> ), }, // 新增的选择框列 { title: 'Select', dataIndex: 'select', render: (text, record) => <Checkbox onChange={() => handleSelect(record.id)} />, }, ]; ``` 2. 在Table组件中设置rowSelection属性,并定义onSelect方法。 ```javascript const [selectedRowKeys, setSelectedRowKeys] = useState([]); const [selectedRows, setSelectedRows] = useState([]); const rowSelection = { selectedRowKeys, onChange: (selectedRowKeys, selectedRows) => { setSelectedRowKeys(selectedRowKeys); setSelectedRows(selectedRows); }, }; const handleSelect = (id) => { const index = selectedRowKeys.indexOf(id); if (index > -1) { setSelectedRowKeys(selectedRowKeys.filter((key) => key !== id)); setSelectedRows(selectedRows.filter((row) => row.id !== id)); } else { setSelectedRowKeys([...selectedRowKeys, id]); setSelectedRows([...selectedRows, dataSource.find((item) => item.id === id)]); } }; <Table rowSelection={rowSelection} columns={columns} dataSource={dataSource} />; ``` 其中,onSelect方法会在用户选择或取消选择数据时被触发,并更新选择框的状态。handleSelect方法则用来处理选择框的点击事件,并更新所选中数据。最终,我们可以通过selectedRowKeys和selectedRows来获取用户选择数据。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值