CRUD 组件

管理后台的功能，一般就是 CRUD 增删改查，可以拆分 3 个部分：“列表”、“新增/修改”、“详情”，如下图所示：

| 部分 | 组件 | 示例 |
| --- | --- | --- |
| 列表 | Search + Table | ![列表](https://note.lazzman.com:18084/media/202404/2024-04-30_092947_0663540.9598074541331446.png) |
| 新增 / 修改 | Form | ![表单](https://note.lazzman.com:18084/media/202404/2024-04-30_092947_0694340.48642010880430264.png) |
| 详情 | Descriptions | ![详情](https://note.lazzman.com:18084/media/202404/2024-04-30_092947_1338680.49100550246686614.png) |

## [#](https://doc.iocoder.cn/vue3/crud-schema/#_1-%E5%9F%BA%E7%A1%80%E7%BB%84%E4%BB%B6)1\. 基础组件

涉及到 4 个前端基础组件，如下所示：

| 组件 | 文档 |
| --- | --- |
| [Search(opens new window)](https://github.com/yudaocode/yudao-ui-admin-vue3/blob/master/src/components/Search/src/Search.vue) | [查询组件(opens new window)](https://kailong110120130.gitee.io/vue-element-plus-admin-doc/components/search.html) |
| [Table(opens new window)](https://github.com/yudaocode/yudao-ui-admin-vue3/blob/master/src/components/Table/src/Table.vue) | [表格组件(opens new window)](https://kailong110120130.gitee.io/vue-element-plus-admin-doc/components/table.html) |
| [Form(opens new window)](https://github.com/yudaocode/yudao-ui-admin-vue3/blob/master/src/components/Form/src/Form.vue) | [表单组件(opens new window)](https://kailong110120130.gitee.io/vue-element-plus-admin-doc/components/form.html) |
| [Descriptions(opens new window)](https://github.com/yudaocode/yudao-ui-admin-vue3/blob/master/src/components/Descriptions/src/Descriptions.vue) | [描述组件(opens new window)](https://kailong110120130.gitee.io/vue-element-plus-admin-doc/components/descriptions.html) |

## [#](https://doc.iocoder.cn/vue3/crud-schema/#_2-crud-%E7%BB%84%E4%BB%B6)2\. CRUD 组件

由于以上 4 个组件都需要 Schema 或者 `columns` 的字段，如果每个组件都写一遍的话，会造成大量重复代码，所以提供 useCrudSchemas 来进行统一的数据生成。

① useCrudSchemas：位于 [src/hooks/web/useCrudSchemas.ts (opens new window)](https://github.com/yudaocode/yudao-ui-admin-vue3/blob/master/src/hooks/web/useCrudSchemas.ts)内

② useCrudSchemas 可以理解成一个 JSON 配置，示例如下：

useCrudSchemas 示例

③ 字段的详细说明，可见 [useCrudSchemas 文档 (opens new window)](https://kailong110120130.gitee.io/vue-element-plus-admin-doc/hooks/useCrudSchemas.html)。

## [#](https://doc.iocoder.cn/vue3/crud-schema/#_3-%E5%AE%9E%E6%88%98%E6%A1%88%E4%BE%8B)3\. 实战案例

项目的 \[系统管理 -> 邮箱管理\] 相关的功能，都使用 CRUD 实现，你可以自己去学习。

| 功能 | 代码 |
| --- | --- |
| 邮箱账号 | [src/views/system/mail/account(opens new window)](https://github.com/yudaocode/yudao-ui-admin-vue3/blob/master/src/views/system/mail/account/) |
| 邮箱模版 | [src/views/system/mail/template(opens new window)](https://github.com/yudaocode/yudao-ui-admin-vue3/blob/master/src/views/system/mail/template/) |
| 邮箱记录 | [src/views/system/mail/log(opens new window)](https://github.com/yudaocode/yudao-ui-admin-vue3/blob/master/src/views/system/mail/log/) |

## [#](https://doc.iocoder.cn/vue3/crud-schema/#_4-%E5%B8%B8%E8%A7%81%E9%97%AE%E9%A2%98)4\. 常见问题

### [#](https://doc.iocoder.cn/vue3/crud-schema/#_4-1-%E5%A6%82%E4%BD%95%E9%9A%90%E8%97%8F%E6%9F%90%E4%B8%AA%E5%AD%97%E6%AE%B5)4.1 如何隐藏某个字段？

如 `formSchema` 不需要 `field` 为 `createTime` 的字段，可以使用 `form: { show: false }` 或 `isForm: false` 进行过滤，其他组件同理。

![常见问题 - 如何隐藏某个字段](https://note.lazzman.com:18084/media/202404/2024-04-30_092947_1495030.2995834944359781.png)

### [#](https://doc.iocoder.cn/vue3/crud-schema/#_4-2-%E5%A6%82%E4%BD%95%E4%BD%BF%E7%94%A8%E6%95%B0%E6%8D%AE%E5%AD%97%E5%85%B8)4.2 如何使用数据字典？

设置 `dictType` 字典的类型，和 `dictClass` 字典的数据类型。

![常见问题 - 如何使用数据字典](https://note.lazzman.com:18084/media/202404/2024-04-30_092947_1482260.8859028075774138.png)

### [#](https://doc.iocoder.cn/vue3/crud-schema/#_4-3-%E5%A6%82%E4%BD%95%E4%BD%BF%E7%94%A8-api-%E8%8E%B7%E5%8F%96%E6%95%B0%E6%8D%AE)4.3 如何使用 API 获取数据？

使用 `api` 来获取接口数据，需要主动 `return` 数据。

![常见问题 - 如何使用 API 获取数据](https://note.lazzman.com:18084/media/202404/2024-04-30_092947_1866550.9814208500132802.png)

### [#](https://doc.iocoder.cn/vue3/crud-schema/#_4-4-%E5%A6%82%E4%BD%95%E7%BB%93%E5%90%88-slot-%E8%87%AA%E5%AE%9A%E4%B9%89)4.4 如何结合 Slot 自定义？

如果想要自定义，可以结合 Slot 来实现。具体有哪些 Slot，阅读对应基础组件的文档。

![常见问题 - 如何结合Slot自定义](https://note.lazzman.com:18084/media/202404/2024-04-30_092947_0632030.7750633914061255.png)