react+antd+Table全选

744 阅读1分钟
import {Checkbox, Table} from 'antd';
import {PageContainer} from '@ant-design/pro-layout'
import {useEffect, useState} from 'react';

const Index = () => {
  const [selectedRowKeys, setSelectedRowKeys] = useState<any>([]);
  const [selectedRows, setSelectedRows] = useState<any>([]);
  const [newData, setNewData] = useState<any>([]);
  const [checkedAll, setCheckedAll] = useState<boolean>(false);
  const columns = [
    {
      title: 'Name',
      dataIndex: 'name',
      render: (text: string) => <a>{text}</a>,
    },
    {
      title: 'Age',
      dataIndex: 'age',
    },
    {
      title: 'Address',
      dataIndex: 'address',
    },
  ];
  const data = [
    {
      key: '0',
      name: 'John Brown',
      age: 32,
      address: 'New York No. 1 Lake Park',
      disabled: false,
    },
    {
      key: '1',
      name: 'Jim Green',
      age: 42,
      address: 'London No. 1 Lake Park',
      disabled: false,

    },
    {
      key: '2',
      name: 'Joe Black',
      age: 32,
      address: 'Sidney No. 1 Lake Park',
      disabled: false,

    },
    {
      key: '3',
      name: 'Disabled User',
      age: 99,
      address: 'Sidney No. 1 Lake Park',
      disabled: true,
    },
  ];
  useEffect(() => {
    /**过滤disabled为false的数组**/
    const afterFliterData: any = data.filter(v => !v.disabled);
    setNewData(afterFliterData);
  }, []);

  /**处理表格选中**/
  const handleChange = (SelectvalueKeys: any, SelectRows: any) => {
    setSelectedRowKeys([...SelectvalueKeys]);
    setSelectedRows([...SelectRows]);
    if (newData.length === SelectvalueKeys.length) {
      setCheckedAll(true);
    }else {
  setCheckedAll(false);
}
    console.log(SelectvalueKeys, SelectRows, 'aaaa');
  };

  /**全选处理**/
  const selectAll = () => {
    // 若已经是全选状态,当再次点击全选按钮的时候,则就执行取消全选操作;
    if (newData.length === selectedRows.length) {
      handleChange([], []);
      setCheckedAll(false);
    } else {
      // 若不是全选状态,点击全选按钮的时候,就执行全选操作
      newData.forEach((v: any, i: any) => {
        if (selectedRows.indexOf(v) === -1) {
          selectedRowKeys.push(String(i));
          setCheckedAll(true);
        }
      })
      handleChange(selectedRowKeys, [...newData]);
    }
  };
  /**表格行是否可选择配置**/
  const rowSelection: any = {
    selectedRowKeys,
    /**隐藏全选勾选框与自定义选择项**/
    hideSelectAll: 'true',
    onChange: handleChange,
    /**选择框的默认属性配置**/
    getCheckboxProps: (record: any) => ({
      disabled: record.name === 'Disabled User',
    }),
  };

  return (
    <PageContainer>
      <div className={'container'}>
        <div>
          <Table
            rowSelection={rowSelection}
            columns={columns}
            dataSource={data}
            pagination={false}
          />
          <Checkbox checked={checkedAll} onChange={selectAll}>全选</Checkbox>
        </div>
      </div>
    </PageContainer>
  )
}
export default Index;

注意:选择后进行操作,完成后清空选择,通过 rowSelection.selectedRowKeys 来控制选中项。 若Table写了rowKey属性,不是全选状态时selectedRowKeys.push();push()为"Table的rowKey"。