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

    {
            return record.Id;
          }}
        />

  const [pagination, setPagination] = useState({
    current: 1,
    total: 0,
    pageSize: 10,
    showTotal: (total: number) => {
      return `共 ${total} 条记录`;
    }
  });
  const [selectedRowKeys, setSelectRowKeys] = useState([]);
  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
      };
    }
  };

你可能感兴趣的:(react.js,前端,前端框架)