CRUD组件

介绍

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

• 查询与列表

• 新增/修改

• 详情

TIP

CRUD 组件，比较适合开发简单的 CRUD 功能。如果是复杂的功能，使用起来会比较困难。所以一般情况下，我们还是建议使用 Element Plus 的原生组件。

组成

涉及到 4 个前端基础组件，这 4 个组件都需要 Schema 或者 columns 的字段，如果每个组件都写一遍的话，会造成大量重复代码，所以提供 useCrudSchemas 来进行统一的数据生成。

• 查询组件：src\components\Search
• 表格组件：src\components\Table
• 表单组件：src\components\Form
• 描述组件：src\components\Descriptions

文件src/hooks/web/useCrudSchemas.ts中，定义了一个 useCrudSchemas 函数，用于根据统一的 CrudSchema 配置生成适用于搜索、表格、表单和详情页的结构数据，并支持字典转换、国际化、异步加载等功能。

• 统一配置管理：通过 CrudSchema 类型定义字段在搜索、表格、表单、详情中的显示与配置。
• 结构过滤生成：
  • filterSearchSchema：生成可用于搜索表单的结构。
  • filterTableSchema：生成表格列配置，支持字典标签渲染。
  • filterFormSchema：生成表单字段配置，支持默认值和字典选项。
  • filterDescriptionsSchema：生成详情页描述配置。
• 字典支持：自动根据 dictType 和 dictClass 加载字典选项（如 string、number、boolean）。
• 异步加载支持：字段可配置 api 属性，异步获取选项数据并更新对应 schema。
• 国际化处理：对字典选项进行翻译。
• 辅助函数：sortTableColumns：将指定字段列移动到表格最前。

// 文件`src/hooks/web/useCrudSchemas.ts`
export type CrudSchema = Omit<TableColumn, 'children'> & {
  isSearch?: boolean // 是否在查询显示
  search?: CrudSearchParams // 查询的详细配置
  isTable?: boolean // 是否在列表显示
  table?: CrudTableParams // 列表的详细配置
  isForm?: boolean // 是否在表单显示
  form?: CrudFormParams // 表单的详细配置
  isDetail?: boolean // 是否在详情显示
  detail?: CrudDescriptionsParams // 详情的详细配置
  children?: CrudSchema[]
  dictType?: string // 字典类型
  dictClass?: 'string' | 'number' | 'boolean' // 字典数据类型 string | number | boolean
}
// ...

示例

消息中心——邮箱管理——邮箱账号、邮件模板、邮件记录，3个示例。代码位置：src\views\system\mail

mail/
├── account/                      # 邮箱账号
│   ├── MailAccountDetail.vue     # 账户详情页面
│   ├── MailAccountForm.vue       # 账户表单页面
│   ├── account.data.ts           # 账户数据相关
│   └── index.vue                 # 模块入口
├── log/                          # 邮件记录
│   ├── MailLogDetail.vue         # 日志详情页面
│   ├── index.vue                 # 模块入口
│   └── log.data.ts               # 日志数据相关
└── template/                     # 邮件模板
    ├── MailTemplateForm.vue      # 模板表单页面
    ├── MailTemplateSendForm.vue  # 模板发送表单页面
    ├── index.vue                 # 模块入口
    └── template.data.ts          # 模板数据相关

crudSchemas属性

属性	说明	类型
search	用于设置 searchSchema	CrudSearchParams
table	用于设置 tableColumns	CrudTableParams
form	用于设置 fromSchema	CrudFormParams
detail	用于设置 DescriptionsSchema	CrudDescriptionsParams
children	如果是 Table 组件，则可能会有多表头的情况存在	CrudSchema[]

FAQ

如何隐藏某个字段？

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

如何使用数据字典？

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

如何使用 API 获取数据？

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

如何结合 Slot 自定义？

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

参考资料：useCrudSchemas 文档