CRUD 组件

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

| 部分 | 组建 | 示例 |
| --- | --- | --- |
| 列表 | Search + Table | 
![](/media/202409/2024-09-02_113614_026439.png) | 
| 新增 / 修改 | Form |
![](/media/202409/2024-09-02_113648_959173.png)  |
| 详情 | Descriptions | 
![](/media/202409/2024-09-02_113742_283736.png) |

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

![](/media/202409/2024-09-02_113838_781146.png)

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

① useCrudSchemas：位于 src/hooks/web/useCrudSchemas.ts (opens new window)内

② useCrudSchemas 可以理解成一个 JSON 配置，
## 3. 实战案例
项目的 [系统管理 -> 邮箱管理] 相关的功能，都使用 CRUD 实现，你可以自己去学习。

## 4. 常见问题
### 4.1 如何隐藏某个字段？
如 formSchema 不需要 field 为 createTime 的字段，可以使用 form: { show: false } 或 isForm: false 进行过滤，其他组件同理。

![](/media/202409/2024-09-02_114237_892016.png)

### 4.2 如何使用数据字典？
设置 dictType 字典的类型，和 dictClass 字典的数据类型。

![](/media/202409/2024-09-02_114455_761486.png)

### 4.3 如何使用 API 获取数据？
使用 api 来获取接口数据，需要主动 return 数据。

![](/media/202409/2024-09-02_114512_375773.png)

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

![](/media/202409/2024-09-02_114528_833412.png)