React table 组件封装（二）

2024-02-18 06:07:53

表格展开功能

1.1 表格数据格式

要实现表格展开功能，首先需要对表格数据格式进行一些调整，我们需要在每行数据中增加一个字段，用于表示该行是否展开。这个字段可以是布尔值，也可以是字符串，只要能够表示展开状态即可。

{
  "name": "John Doe",
  "age": 30,
  "city": "New York",
  "isExpanded": false // 新增字段，表示该行是否展开
}

1.2 表格展开的实现

接下来，我们需要在表格中添加一个展开按钮，当用户点击这个按钮时，该行的展开状态就会改变，展开或者收起。

import React, { useState } from "react";

const Table = () => {
  const [data, setData] = useState([
    {
      name: "John Doe",
      age: 30,
      city: "New York",
      isExpanded: false,
    },
    {
      name: "Jane Smith",
      age: 25,
      city: "Los Angeles",
      isExpanded: false,
    },
    // ...
  ]);

  const handleExpandClick = (index) => {
    const newData = [...data];
    newData[index].isExpanded = !newData[index].isExpanded;
    setData(newData);
  };

  return (
    <table>
      <thead>
        <tr>
          <th>Name</th>
          <th>Age</th>
          <th>City</th>
          <th></th> // 展开按钮列
        </tr>
      </thead>
      <tbody>
        {data.map((row, index) => (
          <tr key={index}>
            <td>{row.name}</td>
            <td>{row.age}</td>
            <td>{row.city}</td>
            <td>
              <button onClick={() => handleExpandClick(index)}>
                {row.isExpanded ? "-" : "+"}
              </button>
            </td>
          </tr>
          {row.isExpanded && (
            <tr key={index + "_expanded"}>
              <td colSpan={4}>
                {/* 展开内容 */}
              </td>
            </tr>
          )}
        ))}
      </tbody>
    </table>
  );
};

export default Table;

在这个示例中，我们在每行数据中添加了一个名为 isExpanded 的字段，表示该行是否展开。然后，我们添加了一个展开按钮，当用户点击这个按钮时，就会调用 handleExpandClick 函数，该函数会修改对应行数据的 isExpanded 字段，从而实现表格行的展开和收起。

2. 表格行选择功能

2.1 表格数据格式

要实现表格行选择功能，同样需要对表格数据格式进行一些调整，我们需要在每行数据中增加一个字段，用于表示该行是否被选中。这个字段可以是布尔值，也可以是字符串，只要能够表示选中状态即可。

{
  "name": "John Doe",
  "age": 30,
  "city": "New York",
  "isSelected": false // 新增字段，表示该行是否被选中
}

2.2 表格行选择的实现

接下来，我们需要在表格中添加一个选择框，当用户勾选这个选择框时，该行的选中状态就会改变，选中或取消选中。

import React, { useState } from "react";

const Table = () => {
  const [data, setData] = useState([
    {
      name: "John Doe",
      age: 30,
      city: "New York",
      isSelected: false,
    },
    {
      name: "Jane Smith",
      age: 25,
      city: "Los Angeles",
      isSelected: false,
    },
    // ...
  ]);

  const handleSelectClick = (index) => {
    const newData = [...data];
    newData[index].isSelected = !newData[index].isSelected;
    setData(newData);
  };

  return (
    <table>
      <thead>
        <tr>
          <th><input type="checkbox" /></th> // 全选复选框
          <th>Name</th>
          <th>Age</th>
          <th>City</th>
        </tr>
      </thead>
      <tbody>
        {data.map((row, index) => (
          <tr key={index}>
            <td><input type="checkbox" checked={row.isSelected} onChange={() => handleSelectClick(index)} /></td>
            <td>{row.name}</td>
            <td>{row.age}</td>
            <td>{row.city}</td>
          </tr>
        ))}
      </tbody>
    </table>
  );
};

export default Table;

在这个示例中，我们在每行数据中添加了一个名为 isSelected 的字段，表示该行是否被选中。然后，我们在表头添加了一个全选复选框，当用户勾选这个复选框时，就会调用 handleSelectClick 函数，该函数会修改所有行数据的 isSelected 字段，从而实现表格行的全选和取消全选。同时，我们在每行数据中添加了一个选择框，当用户勾选这个选择框时，就会调用 handleSelectClick 函数，该函数会修改对应行数据的 isSelected 字段，从而实现表格行的选中和取消选中。