react的antd组件库Table的全选功能

   <Table
          columns={tableColumns(batchDeduct)}
          loading={isLoading}
          //表格是否为多选
          rowSelection={rowSelection}
          //表格的页码
          pagination={pagination}
          //表格的数据
          dataSource={dataSource}
          //表格的页码改变(分页时)调用函数,把参数传给后端
          paginationChange={onPaginationChange}
          //每一个表格的key值
          setRowKey={(record) => {
            return record.Id;
          }}
        />

  const [pagination, setPagination] = useState<PaginationProps>({
    current: 1,
    total: 0,
    pageSize: 10,
    showTotal: (total: number) => {
      return `共 ${total} 条记录`;
    }
  });
  const [selectedRowKeys, setSelectRowKeys] = useState<React.Key[]>([]);
  const onPaginationChange = (pageNum: number, pageSize?: number) => {
    setPagination((pagination) => ({ ...pagination, current: pageNum, pageSize }));
    getList({ pageNum, pageSize });
  };
  const onSelectChange = (selectedRowKeys: React.Key[], selectedRows: DeductProps[]) => {
    setSelectRowKeys(selectedRowKeys);
    console.log(selectedRows);
  };
  // 表格RowSelection配置项
  const rowSelection = {
    //是否全选
    hideSelectAll: false,
    selectedRowKeys: selectedRowKeys,
    onChange: (selectedRowKeys: React.Key[], selectedRows: DeductProps[]) => {
      //selectedRowKeys:表示Id值,唯一的,selectedRows:整行的数据
      onSelectChange(selectedRowKeys, selectedRows);
    },
    //getCheckboxProps 这个方法是表格有一些行禁止多选,通过disabled来判断
    getCheckboxProps: (record: DeductProps) => {
      return {
        //false表示全部可以选择,有禁止选择以函数形式判断
        disabled: false,
        name: record.name
      };
    }
  };

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值