Antd的可编辑表格：定义和实现

2023-09-22 07:27:36

在现代化的Web应用程序中，可编辑表格是一种常用的UI组件，它允许用户直接在表格中编辑数据，从而提高数据管理的效率和灵活性。本文将以antd为例，详细介绍如何构建一个可编辑表格，包括数据绑定、表单校验、数据保存和表格操作等方面。

数据绑定

首先，我们需要将数据源绑定到表格中。antd提供了多种数据绑定方式，包括本地数据源、远程数据源和动态数据源等。为了简化演示，我们以本地数据源为例。

const data = [
  {
    key: '1',
    name: 'John',
    age: 30,
  },
  {
    key: '2',
    name: 'Mary',
    age: 25,
  },
];

const columns = [
  {
    title: '姓名',
    dataIndex: 'name',
    editable: true,
  },
  {
    title: '年龄',
    dataIndex: 'age',
    editable: true,
  },
];

表单校验

为了确保用户输入的数据有效，我们可以使用antd提供的表单校验功能。在列定义中，我们可以指定每个列的校验规则。

const columns = [
  {
    title: '姓名',
    dataIndex: 'name',
    editable: true,
    rules: [
      {
        required: true,
        message: '姓名不能为空',
      },
    ],
  },
  {
    title: '年龄',
    dataIndex: 'age',
    editable: true,
    rules: [
      {
        required: true,
        message: '年龄不能为空',
      },
      {
        type: 'number',
        message: '年龄必须为数字',
      },
    ],
  },
];

数据保存

当用户编辑表格中的数据时，我们需要将这些数据保存到数据源中。antd提供了多种数据保存方式，包括本地保存、远程保存和数据库保存等。为了简化演示，我们以本地保存为例。

const handleSave = (row) => {
  const newData = [...data];
  const index = newData.findIndex((item) => item.key === row.key);
  newData[index] = row;
  setData(newData);
};

表格操作

除了基本的编辑功能外，antd的可编辑表格还支持各种各样的表格操作，包括添加新行、删除行、排序、过滤等。

const handleAdd = () => {
  const newData = [...data];
  newData.push({
    key: newData.length + 1,
    name: '',
    age: '',
  });
  setData(newData);
};

const handleDelete = (key) => {
  const newData = data.filter((item) => item.key !== key);
  setData(newData);
};