从零学会Ant Design 表单嵌套表格: 快速入门指南

2023-11-01 04:12:36

在 Ant Design 表单中嵌入 Table 组件：打造高级数据管理表单

简介

Ant Design 是一个备受推崇的 UI 库，它为开发人员提供了丰富的组件和样式，助力他们快速构建出美观且实用的用户界面。Table 组件是 Ant Design 中的一款强大工具，特别适合展示和编辑嵌套对象类型的数据结构。本文将深入探究如何在 Ant Design 表单中嵌入表格，并指导你使用 Table 组件实现数据展示和编辑功能。

表格嵌入表单

嵌入 Table 组件的诀窍在于 Form.Item 组件。Form.Item 可为表格提供表单验证、错误提示等特性。以下是基础范例：

<Form.Item
  label="备货信息"
  name="stockInfo"
  rules={[{ required: true, message: '请填写备货信息!' }]}
>
  <Table
    dataSource={stockInfo}
    columns={columns}
  />
</Form.Item>

这里，Form.Item 组件为 Table 组件提供了表单验证功能，若用户未填入备货信息，则会显示 "请填写备货信息!" 的错误提示。

Table 组件的基本使用

Table 组件具备多样化功能，可满足数据展示与编辑的多种需求。以下简要介绍其基本用法：

数据展示： 使用 Table 组件的 dataSource 属性指定要展示的数据，数据源可为数组或对象。
列定义： 利用 columns 属性定义表格列，其中包含列标题、宽度、数据来源等信息。
数据编辑： 启用 editable 属性可让表格进入编辑模式，用户可点击单元格进行修改。
行选择： rowSelection 属性赋予表格行选择功能，用户可通过勾选复选框选择行。

实现嵌套对象类型数据的复杂表单

实际开发中，我们经常会处理嵌套对象类型的数据。例如，备货信息中的每一项可能就是一个嵌套对象。Table 组件的 nestedRow 属性能帮助我们处理这种复杂表单。

nestedRow 属性指定表格中哪一列是嵌套行的父列。以下范例将备货信息列设为嵌套行的父列：

<Table
  dataSource={stockInfo}
  columns={columns}
  nestedRow={{
    expandedRowKeys: expandedRowKeys,
    onExpandedRowsChange: (expandedRows) => {
      setExpandedRowKeys(expandedRows);
    },
    renderExpandedRow: (record) => {
      return (
        <Table
          dataSource={record.subStockInfo}
          columns={subColumns}
        />
      );
    },
  }}
/>

expandedRowKeys 属性指定了展开的行，当用户点击展开按钮时，onExpandedRowsChange 回调函数会被调用，我们可在其中更新 expandedRowKeys，控制展开的行。

renderExpandedRow 属性则指定了展开行的渲染方式，此处我们用另一个 Table 组件来展示嵌套数据。

总结

本指南详细介绍了如何在 Ant Design 表单中嵌入表格，以及如何使用 Table 组件进行数据展示和编辑。通过掌握这些技巧，你可以轻松构建出处理嵌套对象类型数据的复杂表单。

常见问题解答

如何指定哪一列是嵌套行的父列？
- 使用 nestedRow.parentKey 属性，例如：nestedRow={{ parentKey: 'stockInfo' }}
如何动态渲染展开行的内容？
- 在 renderExpandedRow 回调函数中根据记录返回自定义内容，例如：

renderExpandedRow: (record) => (
  <div>
    {record.name} 的详细信息
  </div>
)

如何控制表格中的行选择？
- 使用 rowSelection 属性，它接受 selectionMode、selectionType、onChange 等选项。
如何为嵌套数据启用编辑功能？
- 为嵌套表格启用 editable 属性，并处理 onChange 回调函数以保存更改。
Table 组件支持哪些数据类型？
- Table 组件支持对象、数组、数字、布尔值和字符串等多种数据类型。