react + antd 整页可编辑表格（checkbox）

整体效果图

具体代码

import { Checkbox, Table, Button, Form, message } from 'antd';
import React, { useState, useEffect } from 'react';
import { getAllRoleList, getUpdateAuth, getAuthList } from '../../../../../../api/metadataManage';
import styles from './index.module.less';

export default function AssignmentEditTable({ handleAssignmentCancel }) {
  const [form] = Form.useForm();
  const [data, setData] = useState([]);
  const [roleList, setroleList] = useState([]);

  const childrenName = roleList?.map(item => ({
    title: item.role_name,
    key: item.id
  }));

  // 表头编辑
  const roleColumns = childrenName?.map((item, index) => {
    return {
      title: item.title,
      dataIndex: item.title,
      key: item.key,
      render: (text, record, index) => {
        if (!record.children) {
          return (
            <>
              <Checkbox
                onChange={(e) => onCheckAllChange(e, record, record.key, item.key)}
                checked={record[item.key]}
              ></Checkbox>
            </>
          );
        }

      },
    };
  });

  const mergedColumns = [
    {
      title: '数据集',
      dataIndex: 'name',
      key: 'name',
      fixed: 'left',
      width: 150,
      ellipsis: true,
    },
    ...roleColumns];

  const fetchAllRoleList = async () => {
    const res = await getAllRoleList();
    if (res.status === '00000') {
      setroleList(res.data);
    }
  };

  const fetchAuthList = async () => {
    const res = await getAuthList();
    console.log('fetchAuthList', res);
    if (res.status === '00000') {
      setData(res.data?.dataSource);
    }
  };

  const fetchUpdateAuth = async (params) => {
    const res = await getUpdateAuth({data_list: params});
    console.log('fetchUpdateAuth', res);
    if(res.status === '00000') {
      message.info(res.data);
    }
  };

  const onCheckAllChange = (e, record, type, roleKey) => {
    setData(() => {
      return data.map((item) => {
        item.children.forEach(i => {
          for (let dataIndex in i) {
            i.key === type && dataIndex === roleKey ?
              i[roleKey] = e.target.checked : ''
          }

        })
        return item;
      });
    });
  };

  // 点击取消
  const onCancel = () => {
    handleAssignmentCancel();
  };

  // 点击保存
  const onSave = () => {
    console.log('data', data)
    const params = [];
    data.forEach(item => {
      item.children.forEach(i => {
        for (let key in i) {
          if (key !== 'name' && key !== 'key') {
            params.push({
              db_collection_id: i.key,
              role_id: key,
              editable: i[key],
            })
          }
        }
      })
    });
    console.log('params', params)
    fetchUpdateAuth(params)
    handleAssignmentCancel();
  };

  // 表格背景色
  const getRowClassName = (record, index) => {
    let className = '';
    className = index % 2 === 1 ? "oddRow" : "evenRow";
    return className;
  };

  useEffect(() => {
    fetchAllRoleList();
    fetchAuthList();
  }, [])

  return (
    <div className={styles.all}>
      <Table
        columns={mergedColumns}
        dataSource={data}
        scroll={{
          y: 600,
          x: 800,
        }}
        rowClassName={(record, index) => (getRowClassName(record, index) === "oddRow" ? styles.oddRow : '')}
        pagination={false}
        expandable={{
          defaultExpandAllRows: true
        }}
      />
      <div style={{ textAlign: 'center', marginTop: 20 }}>
        <Button onClick={onCancel}>
          取消
        </Button>
        <Button key="submit" type="primary" style={{ marginLeft: 10 }} onClick={onSave}>
          保存
        </Button>
      </div>
    </div>
  )
}