【React、Ant Design5】自定义Table

创建一个新的React组件，例如叫做CustomTable。在这个组件中，使用Ant Design的Table组件，并自定义列：

import React from 'react';
import { Table, Checkbox, Select, Input } from 'antd';

const CustomTable: React.FC = () => {
  const dataSource = [
    {
      key: '1',
      name: 'John Brown',
      age: 32,
      address: 'New York No. 1 Lake Park',
    },
    // ...
  ];

  const columns = [
    {
      title: 'Checkbox',
      dataIndex: 'checkbox',
      render: (_, record) => (
        <Checkbox />
      ),
    },
    {
      title: 'Select',
      dataIndex: 'select',
      render: (_, record) => (
        <Select style={{ width: 120 }}>
          <Select.Option value="option1">Option 1</Select.Option>
          <Select.Option value="option2">Option 2</Select.Option>
          // ...
        </Select>
      ),
    },
    {
      title: 'Input',
      dataIndex: 'input',
      render: (_, record) => (
        <Input bordered={false} />
      ),
    },
    // ...
  ];

  return (
    <Table dataSource={dataSource} columns={columns} />
  );
};

export default CustomTable;

在这个例子中，Table组件有一个dataSource属性和一个columns属性。dataSource是一个数组，其中的每个元素代表表格的一行。columns也是一个数组，其中的每个元素代表表格的一列。

在columns数组中，每个元素都是一个对象，其中的title属性表示列的标题，dataIndex属性表示列的数据索引，render属性是一个函数，用于自定义列的内容。

在render函数中，可以返回任何React元素，包括Checkbox，Select，Input等。在这个例子中，我们为每个列都返回了一个Ant Design的组件。

此外，还可以通过Ant Design的bordered属性，来设置Input组件是否有边框。

最后，通过export语句，将CustomTable组件导出，以便在其他地方使用。

Plan B：

import React, { useState } from 'react';
import { Table, Checkbox, Select, Input, Button } from 'antd';

const CustomTable: React.FC = () => {
  const [dataSource, setDataSource] = useState([
    {
      key: '1',
      name: '',
      age: '',
      address: '',
    },
  ]);

  const handleAddRow = () => {
    const newData = {
      key: `${dataSource.length + 1}`,
      name: '',
      age: '',
      address: '',
    };
    setDataSource([...dataSource, newData]);
  };

  const handleDeleteRow = (key: string) => {
    const newData = dataSource.filter((item) => item.key !== key);
    setDataSource(newData);
  };

  const handleInputChange = (value: string, key: string, dataIndex: string) => {
    const newData = dataSource.map((item) => {
      if (item.key === key) {
        return { ...item, [dataIndex]: value };
      }
      return item;
    });
    setDataSource(newData);
  };

  const columns = [
    {
      title: 'Checkbox',
      dataIndex: 'checkbox',
      render: (_, record) => (
        <Checkbox
          checked={record.checkbox}
          onChange={(e) => handleInputChange(e.target.checked, record.key, 'checkbox')}
        />
      ),
    },
    {
      title: 'Select',
      dataIndex: 'select',
      render: (_, record) => (
        <Select
          value={record.select}
          onChange={(value) => handleInputChange(value, record.key, 'select')}
          style={{ width: 120 }}
        >
          <Select.Option value="option1">Option 1</Select.Option>
          <Select.Option value="option2">Option 2</Select.Option>
        </Select>
      ),
    },
    {
      title: 'Input',
      dataIndex: 'input',
      render: (_, record) => (
        <Input
          value={record.input}
          onChange={(e) => handleInputChange(e.target.value, record.key, 'input')}
          bordered={false}
        />
      ),
    },
    {
      title: 'Actions',
      dataIndex: 'actions',
      render: (_, record) => (
        <Button type="link" onClick={() => handleDeleteRow(record.key)}>
          Delete
        </Button>
      ),
    },
  ];

  return (
    <>
      <Button type="primary" onClick={handleAddRow}>
        Add Row
      </Button>
      <Table dataSource={dataSource} columns={columns} />
    </>
  );
};

export default CustomTable;

在这个示例代码中，我们添加了两个按钮，一个用于添加行，一个用于删除行。当点击添加行按钮时，会在dataSource数组中添加一条新的数据。当点击删除按钮时，会从dataSource数组中删除对应的数据。
每个列的编辑功能通过handleInputChange函数实现。当输入框内容发生变化时，会调用handleInputChange函数更新dataSource数组中对应的数据。
在columns数组中，我们添加了一个"Actions"列，用于显示删除按钮。当点击删除按钮时，会调用handleDeleteRow函数删除对应的行数据。
最后，通过export语句，将CustomTable组件导出，以便在其他地方使用。