yudao-cloud 开发指南 yudao-cloud 开发指南
  • 萌新必读
  • 后端手册
  • 微服务手册
  • 工作流手册
  • 大屏手册
  • 支付手册
  • 商城手册
  • ERP 手册
  • CRM 手册
  • AI 大模型手册
  • IoT 物联网手册
  • 公众号手册
  • 前端手册 Vue 2.x
  • 前端手册 Vue 3.x
  • 工作流手册
  • 大屏手册
  • 支付手册
  • 商城手册
  • ERP 手册
  • CRM 手册
  • AI 大模型手册
  • IoT 物联网手册
  • 公众号手册
  • 系统手册
视频教程
  • Vue3 + element-plus (opens new window)
  • Vue3 + vben(ant-design-vue) (opens new window)
  • Vue2 + element-ui (opens new window)
单体版 (opens new window)
作者博客 (opens new window)
GitHub (opens new window)
  • 萌新必读
  • 后端手册
  • 微服务手册
  • 工作流手册
  • 大屏手册
  • 支付手册
  • 商城手册
  • ERP 手册
  • CRM 手册
  • AI 大模型手册
  • IoT 物联网手册
  • 公众号手册
  • 前端手册 Vue 2.x
  • 前端手册 Vue 3.x
  • 工作流手册
  • 大屏手册
  • 支付手册
  • 商城手册
  • ERP 手册
  • CRM 手册
  • AI 大模型手册
  • IoT 物联网手册
  • 公众号手册
  • 系统手册
视频教程
  • Vue3 + element-plus (opens new window)
  • Vue3 + vben(ant-design-vue) (opens new window)
  • Vue2 + element-ui (opens new window)
单体版 (opens new window)
作者博客 (opens new window)
GitHub (opens new window)
  • 萌新必读

    • 简介
    • 交流群
    • 视频教程
    • 功能列表
    • 快速启动(后端项目)
    • 快速启动(前端项目)
    • 接口文档
    • 技术选型
    • 项目结构
    • 代码热加载
    • 一键改包
    • 迁移模块(适合新项目)
    • 删除功能(以租户为例)
    • 表结构变更(版本升级)
    • 国产信创数据库(DM 达梦、大金、OpenGauss)
    • 内网穿透
    • 面试题、简历模版、简历优化
    • 项目外包
  • 后端手册

    • 新建服务
    • 代码生成【单表】(新增功能)
    • 代码生成【主子表】
    • 代码生成(树表)
    • 功能权限
    • 数据权限
    • 用户体系
    • 三方登录
    • OAuth 2.0(SSO 单点登录)
    • SaaS 多租户【字段隔离】
    • SaaS 多租户【数据库隔离】
    • WebSocket 实时通信
    • 异常处理(错误码)
    • 参数校验、时间传参
    • 分页实现
    • VO 对象转换、数据翻译
    • 文件存储(上传下载)
    • Excel 导入导出
    • 操作日志、访问日志、异常日志
    • MyBatis 数据库
    • MyBatis 联表&分页查询
    • 多数据源(读写分离)
    • Redis 缓存
    • 本地缓存
    • 异步任务
    • 分布式锁
    • 幂等性(防重复提交)
    • 请求限流(RateLimiter)
    • HTTP 接口签名(防篡改)
    • 单元测试
    • 验证码
    • 工具类 Util
    • 数据库文档
  • 微服务手册

    • 微服务调试(必读)
    • 注册中心 Nacos
    • 配置中心 Nacos
    • 服务网关 Spring Cloud Gateway
    • 服务调用 Feign
    • 定时任务 XXL Job
    • 消息队列(内存)
    • 消息队列(Redis)
    • 消息队列(RocketMQ)
    • 消息队列(RabbitMQ)
    • 消息队列(Kafka)
    • 消息队列(Cloud)
    • 分布式事务 Seata
    • 服务保障 Sentinel
  • 工作流手册

    • 工作流演示
    • 功能开启
    • 工作流(达梦适配)
    • 审批接入(流程表单)
    • 审批接入(业务表单)
    • 流程设计器(BPMN)
    • 流程设计器(钉钉、飞书)
    • 选择审批人、发起人自选
    • 会签、或签、依次审批
    • 流程发起、取消、重新发起
    • 审批通过、不通过、驳回
    • 审批加签、减签
    • 审批转办、委派、抄送
    • 执行监听器、任务监听器
    • 流程表达式
    • 流程审批通知
  • 大屏手册

    • 报表设计器
    • 大屏设计器
  • 支付手册

    • 功能开启
    • 支付宝支付接入
    • 微信公众号支付接入
    • 微信小程序支付接入
    • 支付宝、微信退款接入
    • 钱包充值、支付、退款
    • 模拟支付、退款
  • 会员手册

    • 功能开启
    • 微信公众号登录
    • 微信小程序登录
    • 微信小程序订阅消息
    • 微信小程序码
    • 会员用户、标签、分组
    • 会员等级、积分、签到
  • 商城手册

    • 商城演示
    • 功能开启
    • 商城装修
    • 在线客服
    • 【商品】商品分类
    • 【商品】商品属性
    • 【商品】商品 SPU 与 SKU
    • 【商品】商品评价
    • 【交易】购物车
    • 【交易】交易订单
    • 【交易】售后退款
    • 【交易】快递发货
    • 【交易】门店自提
    • 【交易】分销返佣
    • 【营销】优惠劵
    • 【营销】积分商城
    • 【营销】拼团活动
    • 【营销】秒杀活动
    • 【营销】砍价活动
    • 【营销】满减送活动
    • 【营销】限时折扣
    • 【营销】内容管理
    • 【统计】会员、商品、交易统计
  • ERP手册

    • ERP 演示
    • 功能开启
    • 【产品】产品信息、分类、单位
    • 【库存】产品库存、库存明细
    • 【库存】其它入库、其它出库
    • 【库存】库存调拨、库存盘点
    • 【采购】采购订单、入库、退货
    • 【销售】销售订单、出库、退货
    • 【财务】采购付款、销售收款
  • CRM手册

    • CRM 演示
    • 功能开启
    • 【线索】线索管理
    • 【客户】客户管理、公海客户
    • 【商机】商机管理、商机状态
    • 【合同】合同管理、合同提醒
    • 【回款】回款管理、回款计划
    • 【产品】产品管理、产品分类
    • 【通用】数据权限
    • 【通用】跟进记录、待办事项
  • AI大模型手册

    • AI 大模型演示
    • 功能开启
    • AI 聊天对话
    • AI 绘画创作
    • AI 知识库
    • AI 音乐创作
    • AI 写作助手
    • AI 思维导图
    • AI 工具(function calling)
    • AI 工作流
    • Dify 工作流
    • FastGPT 工作流
    • Coze 智能体
    • 【模型接入】OpenAI
    • 【模型接入】通义千问
    • 【模型接入】DeepSeek
    • 【模型接入】字节豆包
    • 【模型接入】腾讯混元
    • 【模型接入】硅基流动
    • 【模型接入】MiniMax
    • 【模型接入】月之暗灭
    • 【模型接入】百川智能
    • 【模型接入】文心一言
    • 【模型接入】LLAMA
    • 【模型接入】智谱 GLM
    • 【模型接入】讯飞星火
    • 【模型接入】微软 OpenAI
    • 【模型接入】谷歌 Gemini
    • 【模型接入】Stable Diffusion
    • 【模型接入】Midjourney
    • 【模型接入】Suno
  • IoT物联网手册

    • 功能开启
  • 公众号手册

    • 功能开启
    • 公众号接入
    • 公众号粉丝
    • 公众号标签
    • 公众号消息
    • 自动回复
    • 公众号菜单
    • 公众号素材
    • 公众号图文
    • 公众号统计
  • 系统手册

    • 短信配置
    • 邮件配置
    • 站内信配置
    • 数据脱敏
    • 敏感词
    • 地区 & IP 库
  • 运维手册

    • 开发环境
    • Linux 部署
    • Docker 部署
    • Jenkins 部署
    • 宝塔部署
    • HTTPS 证书
    • 服务监控
  • 前端手册 Vue 3.x

    • 开发规范
    • 菜单路由
    • Icon 图标
    • 字典数据
    • 系统组件
    • 通用方法
    • 配置读取
    • CRUD 组件
      • 1. 基础组件
      • 2. CRUD 组件
      • 3. 实战案例
      • 4. 常见问题
        • 4.1 如何隐藏某个字段?
        • 4.2 如何使用数据字典?
        • 4.3 如何使用 API 获取数据?
        • 4.4 如何结合 Slot 自定义?
    • 国际化
    • IDE 调试
    • 代码格式化
  • 前端手册 Vue 2.x

    • 开发规范
    • 菜单路由
    • Icon 图标
    • 字典数据
    • 系统组件
    • 通用方法
    • 配置读取
  • 更新日志

    • 【v2.5.0】开发中...
    • 【v2.4.2】2025-04-12
    • 【v2.4.1】2025-02-09
    • 【v2.4.0】2024-12-31
    • 【v2.3.0】2024-10-07
    • 【v2.2.0】2024-08-02
    • 【v2.1.0】2024-05-05
    • 【v2.0.1】2024-03-01
    • 【v2.0.0】2024-01-26
    • 【v1.9.0】2023-12-01
  • 开发指南
  • 前端手册 Vue 3.x
芋道源码
2023-04-05
目录

CRUD 组件

友情提示:

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

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

部分 组件 示例
列表 Search + Table 列表
新增 / 修改 Form 表单
详情 Descriptions 详情

# 1. 基础组件

涉及到 4 个前端基础组件,如下所示:

组件 文档
Search (opens new window) 查询组件 (opens new window)
Table (opens new window) 表格组件 (opens new window)
Form (opens new window) 表单组件 (opens new window)
Descriptions (opens new window) 描述组件 (opens new window)

# 2. CRUD 组件

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

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

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

useCrudSchemas 示例
<script setup lang="ts">
import { CrudSchema, useCrudSchemas } from '@/hooks/web/useCrudSchemas'

const crudSchemas = reactive<CrudSchema[]>([
    {
        field: 'index',
        label: t('tableDemo.index'),
        type: 'index',
        form: {
            show: false
        },
        detail: {
            show: false
        }
    },
    {
        field: 'title',
        label: t('tableDemo.title'),
        search: {
            show: true
        },
        form: {
            colProps: {
                span: 24
            }
        },
        detail: {
            span: 24
        }
    },
    {
        field: 'author',
        label: t('tableDemo.author')
    },
    {
        field: 'display_time',
        label: t('tableDemo.displayTime'),
        form: {
            component: 'DatePicker',
            componentProps: {
                type: 'datetime',
                valueFormat: 'YYYY-MM-DD HH:mm:ss'
            }
        }
    },
    {
        field: 'importance',
        label: t('tableDemo.importance'),
        formatter: (_: Recordable, __: TableColumn, cellValue: number) => {
            return h(
                ElTag,
                {
                    type: cellValue === 1 ? 'success' : cellValue === 2 ? 'warning' : 'danger'
                },
                () =>
                    cellValue === 1
                        ? t('tableDemo.important')
                        : cellValue === 2
                            ? t('tableDemo.good')
                            : t('tableDemo.commonly')
            )
        },
        form: {
            component: 'Select',
            componentProps: {
                options: [
                    {
                        label: '重要',
                        value: 3
                    },
                    {
                        label: '良好',
                        value: 2
                    },
                    {
                        label: '一般',
                        value: 1
                    }
                ]
            }
        }
    },
    {
        field: 'pageviews',
        label: t('tableDemo.pageviews'),
        form: {
            component: 'InputNumber',
            value: 0
        }
    },
    {
        field: 'content',
        label: t('exampleDemo.content'),
        table: {
            show: false
        },
        form: {
            component: 'Editor',
            colProps: {
                span: 24
            }
        },
        detail: {
            span: 24
        }
    },
    {
        field: 'action',
        width: '260px',
        label: t('tableDemo.action'),
        form: {
            show: false
        },
        detail: {
            show: false
        }
    }
])

const { allSchemas } = useCrudSchemas(crudSchemas)
</script>

③ 字段的详细说明,可见 useCrudSchemas 文档 (opens new window)。

# 3. 实战案例

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

功能 代码
邮箱账号 src/views/system/mail/account (opens new window)
邮箱模版 src/views/system/mail/template (opens new window)
邮箱记录 src/views/system/mail/log (opens new window)

# 4. 常见问题

# 4.1 如何隐藏某个字段?

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

常见问题 - 如何隐藏某个字段

# 4.2 如何使用数据字典?

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

常见问题 - 如何使用数据字典

# 4.3 如何使用 API 获取数据?

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

常见问题 - 如何使用 API 获取数据

# 4.4 如何结合 Slot 自定义?

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

常见问题 - 如何结合Slot自定义

配置读取
国际化

← 配置读取 国际化→

Theme by Vdoing | Copyright © 2019-2025 芋道源码 | MIT License
  • 跟随系统
  • 浅色模式
  • 深色模式
  • 阅读模式
×