Bootstrap

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
      };
    }
  };

;