可编辑表头分组表格

此表格为单行可编辑 CheckBox 的 antd Table 表格，可分页，单行编辑，单行提交。

import { Checkbox, Table, Button, Typography, Form } from 'antd';
import React, { useState, useEffect } from 'react';
import styles from './index.module.less';

const EditableCell = (props) => {
  const {
    editing,
    dataIndex,
    title,
    inputType,
    record,
    index,
    children,
    ...restProps
  } = props;

  return (
    <td {...restProps}>
      {editing ? (
        <Form.Item
          name={dataIndex}
          style={{
            margin: 0,
            paddingTop: 8
          }}
          valuePropName='checked'
        >
          <Checkbox>授权</Checkbox>
        </Form.Item>
      ) : (
        children
      )}
    </td>
  );
};

const list = [
  {
    id: '企业库',
    name: '企业库',
    personA: true,
    personB: false,
    personC: true,
    personD: true,
    personE: false,
    personF: false,
    personG: true,
  },
  {
    id: '专利库',
    name: '专利库',
    personA: true,
    personB: false,
    personC: true,
    personD: true,
    personE: false,
    personF: false,
    personG: true,
  },
  {
    id: 'name',
    name: 'name',
    personA: true,
    personB: false,
    personC: true,
    personD: true,
    personE: false,
    personF: false,
    personG: true,
  },
  {
    id: 'basic.engliss',
    name: 'basic.engliss',
    personA: true,
    personB: false,
    personC: true,
    personD: true,
    personE: false,
    personF: false,
    personG: true,
  },
  {
    id: 'basic.registry',
    name: 'basic.registry',
    personA: true,
    personB: false,
    personC: true,
    personD: true,
    personE: false,
    personF: false,
    personG: true,
  },
];

export default function AssignmentEditTable({ isAssignment }) {
  const [form] = Form.useForm();
  const [page, setPage] = useState(1);
  const [pageSize, setPageSize] = useState(20);
  const [data, setData] = useState(list);
  const [editingKey, setEditingKey] = useState('');

  const columns = [
    {
      title: '数据集',
      dataIndex: 'name',
      fixed: 'left',
      width: 100,
      ellipsis: true,
    },
    {
      title: '人员',
      editable: true,
      children: [
        {
          title: '人员A',
          dataIndex: 'personA',
          editable: true,
          width: 80,
          render: (_, record) => (<span>{record.personA ? '已授权' : '未授权'}</span>),
        },
        {
          title: '人员B',
          dataIndex: 'personB',
          editable: true,
          width: 80,
          render: (_, record) => (<span>{record.personB ? '已授权' : '未授权'}</span>),
        },
        {
          title: '人员C',
          dataIndex: 'personC',
          editable: true,
          width: 80,
          render: (_, record) => (<span>{record.personC ? '已授权' : '未授权'}</span>),
        },
        {
          title: '人员D',
          dataIndex: 'personD',
          editable: true,
          width: 80,
          render: (_, record) => (<span>{record.personD ? '已授权' : '未授权'}</span>),
        },
        {
          title: '人员E',
          dataIndex: 'personE',
          editable: true,
          width: 80,
          render: (_, record) => (<span>{record.personE ? '已授权' : '未授权'}</span>),
        },
        {
          title: '人员F',
          dataIndex: 'personF',
          editable: true,
          width: 80,
          render: (_, record) => (<span>{record.personF ? '已授权' : '未授权'}</span>),
        },
        {
          title: '人员G',
          dataIndex: 'personG',
          editable: true,
          width: 80,
          render: (_, record) => (<span>{record.personG ? '已授权' : '未授权'}</span>),
        },
      ]
    },
    {
      title: '操作',
      dataIndex: 'operation',
      fixed: 'right',
      width: 80,
      render: (_, record) => {
        const editable = isEditing(record);
        return editable ? (
          <span>
            <Typography.Link
              onClick={() => save(record.id)}
              style={{
                marginRight: 8,
                color: '#4473F4',
              }}
            >
              保存
            </Typography.Link>
            <a style={{ color: '#4473F4', }} onClick={cancel}>取消</a>
          </span>
        ) : (
          <span>
            <Typography.Link disabled={editingKey !== ''} onClick={() => edit(record)}>
              编辑
            </Typography.Link>
          </span>
        );
      },
    }
  ];

  const isEditing = (record) => {
    return record.id === editingKey
  };

  // 点击编辑
  const edit = (record) => {
    const {
      personA,
      personB,
      personC,
      personD,
      personE,
      personF,
      personG
    } = data;
    form.setFieldsValue({
      personA,
      personB,
      personC,
      personD,
      personE,
      personF,
      personG,
      ...record,
    });
    setEditingKey(record.id);
  };

  // 点击取消
  const cancel = () => {
    setEditingKey('');
  };

  // 点击保存
  const save = (key) => {
    const newData = [...data];
    const formData = form.getFieldsValue();
    console.log('formData', formData, key);
    const index = newData.findIndex((item) => key === item.id);
    if (index > -1) {
      const item = newData[index];
      newData.splice(index, 1, {
        ...item,
        ...formData,
      });
      console.log('表格单行编辑', newData);
      setData(newData);
      setEditingKey('');
    } else {
      setData(newData);
      setEditingKey('');
    }
  };

  // 表头编辑
  const mergedColumns = columns.map((col) => {
    if (!col.editable) {
      return col;
    }
    if (col.children) {
      const list = []
      col.children.forEach(item => {
        list.push({
          ...item,
          onCell: (record) => ({
            record,
            index: item.number,
            // inputType: 'checkbox',
            dataIndex: item.dataIndex,
            title: item.title,
            editing: isEditing(record),
          }),
        },)
    })
  return {
    ...col,
    children: list,
  };
}
  });

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

return (
  <div className={styles.all}>
    <Form form={form} component={false}>
      <Table
        components={{
          body: {
            cell: EditableCell,
          },
        }}
        columns={mergedColumns}
        dataSource={data}
        scroll={{
          y: 600,
          x: 400,
        }}
        rowClassName={(record, index) => (getRowClassName(record, index) === "oddRow" ? styles.oddRow : '')}
        pagination={{
          position: 'bottomRight',
          page,
          pageSize,
          pageSizeOptions: [20, 50, 100],
          onChange: (page) => setPage(page),
          onShowSizeChange: (_, size) => {
            setPageSize(size);
            setPage(1);
          },
        }}
      />
    </Form>
  </div>
)
}