-
Notifications
You must be signed in to change notification settings - Fork 25
Expand file tree
/
Copy pathvue3_dict.html
More file actions
122 lines (116 loc) · 55.3 KB
/
vue3_dict.html
File metadata and controls
122 lines (116 loc) · 55.3 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>字典数据 | ruoyi-vue-pro 开发指南</title>
<meta name="generator" content="VuePress 1.9.2">
<link rel="icon" href="img_favicon.ico.html">
<script ></script>
<script ></script>
<script ></script>
<link rel="stylesheet" href="https://static.iocoder.cn/answer.css">
<meta name="description" content="RuoYi-Vue 全新 Pro 版本，优化重构所有功能。基于 Spring Boot + MyBatis Plus + Vue & Element 实现的后台管理系统 + 微信小程序，支持 RBAC 动态权限、数据权限、SaaS 多租户、Activiti + Flowable 工作流、三方登录、支付、短信、商城等功能。">
<meta name="keywords" content="ruoyi-vue,权限,数据权限,SaaS,多租户,Activiti,Flowable,工作流,商城">
<meta name="theme-color" content="#11a8cd">
<link rel="preload" >
<link rel="stylesheet" href="https://doc.iocoder.cn/assets/css/0.styles.7c54dcda.css">
</head>
<body class="theme-mode-light">
<div id="app" data-server-rendered="true"><div class="theme-container sidebar-open have-rightmenu"><header class="navbar blur"><div title="目录" class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="intro.html" class="home-link router-link-active"><img src="https://static.iocoder.cn/ruoyi-vue-pro-logo.png" alt="ruoyi-vue-pro 开发指南" class="logo"> <span class="site-name can-hide">ruoyi-vue-pro 开发指南（更新时间：2025-2-26）</span></a> <div class="links"><div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div> <nav class="nav-links can-hide"><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="开发指南" class="dropdown-title"><a href="intro.html" class="link-title">开发指南</a> <span class="title" style="display:none;">开发指南</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="intro.html" class="nav-link">萌新必读</a></li><li class="dropdown-item"><!----> <a href="module-new.html" class="nav-link">后端手册</a></li><li class="dropdown-item"><!----> <a href="message-queue_event.html" class="nav-link">中间件手册</a></li><li class="dropdown-item"><!----> <a href="bpm-preview.html" class="nav-link">工作流手册</a></li><li class="dropdown-item"><!----> <a href="report.html" class="nav-link">大屏手册</a></li><li class="dropdown-item"><!----> <a href="pay_build.html" class="nav-link">支付手册</a></li><li class="dropdown-item"><!----> <a href="member_build.html" class="nav-link">会员手册</a></li><li class="dropdown-item"><!----> <a href="mall_build.html" class="nav-link">商城手册</a></li><li class="dropdown-item"><!----> <a href="erp_build.html" class="nav-link">ERP 手册</a></li><li class="dropdown-item"><!----> <a href="crm_build.html" class="nav-link">CRM 手册</a></li><li class="dropdown-item"><!----> <a href="ai-preview.html" class="nav-link">AI 大模型手册</a></li><li class="dropdown-item"><!----> <a href="mp_build.html" class="nav-link">公众号手册</a></li><li class="dropdown-item"><!----> <a href="sms.html" class="nav-link">系统手册</a></li><li class="dropdown-item"><!----> <a href="dev-env.html" class="nav-link">运维手册</a></li><li class="dropdown-item"><!----> <a href="vue2_dev-spec.html" class="nav-link">前端手册 Vue 2.x</a></li><li class="dropdown-item"><!----> <a href="vue3_dev-spec.html" class="nav-link">前端手册 Vue 3.x</a></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="项目实战" class="dropdown-title"><a href="bpm.html" class="link-title">项目实战</a> <span class="title" style="display:none;">项目实战</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="bpm-preview.html" class="nav-link">工作流手册</a></li><li class="dropdown-item"><!----> <a href="report.html" class="nav-link">大屏手册</a></li><li class="dropdown-item"><!----> <a href="pay_build.html" class="nav-link">支付手册</a></li><li class="dropdown-item"><!----> <a href="member_build.html" class="nav-link">会员手册</a></li><li class="dropdown-item"><!----> <a href="mall_build.html" class="nav-link">商城手册</a></li><li class="dropdown-item"><!----> <a href="erp_build.html" class="nav-link">ERP 手册</a></li><li class="dropdown-item"><!----> <a href="crm_build.html" class="nav-link">CRM 手册</a></li><li class="dropdown-item"><!----> <a href="ai-preview.html" class="nav-link">AI 大模型手册</a></li><li class="dropdown-item"><!----> <a href="mp_build.html" class="nav-link">公众号手册</a></li><li class="dropdown-item"><!----> <a href="sms.html" class="nav-link">系统手册</a></li></ul></div></div><div class="nav-item"><a href="video.html" class="nav-link">视频教程</a></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="在线体验" class="dropdown-title"><!----> <span class="title" style="display:;">在线体验</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="http://dashboard-vue3.yudao.iocoder.cn/" target="_blank" rel="noopener noreferrer" class="nav-link external">
Vue3 + element-plus
<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-item"><!----> <a href="http://dashboard-vben.yudao.iocoder.cn/" target="_blank" rel="noopener noreferrer" class="nav-link external">
Vue3 + vben(ant-design-vue)
<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-item"><!----> <a href="http://dashboard.yudao.iocoder.cn/" target="_blank" rel="noopener noreferrer" class="nav-link external">
Vue2 + element-ui
<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li></ul></div></div><div class="nav-item"><a href="https://github.com/YunaiV/yudao-cloud" target="_blank" rel="noopener noreferrer" class="nav-link external">
微服务版
<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div><div class="nav-item"><a href="https://www.iocoder.cn/" target="_blank" rel="noopener noreferrer" class="nav-link external">
作者博客
<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div> <a href="https://github.com/YunaiV/ruoyi-vue-pro" target="_blank" rel="noopener noreferrer" class="repo-link">
GitHub
<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></nav></div></header> <div class="sidebar-mask"></div> <div class="sidebar-hover-trigger"></div> <aside class="sidebar"><!----> <nav class="nav-links"><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="开发指南" class="dropdown-title"><a href="intro.html" class="link-title">开发指南</a> <span class="title" style="display:none;">开发指南</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="intro.html" class="nav-link">萌新必读</a></li><li class="dropdown-item"><!----> <a href="module-new.html" class="nav-link">后端手册</a></li><li class="dropdown-item"><!----> <a href="message-queue_event.html" class="nav-link">中间件手册</a></li><li class="dropdown-item"><!----> <a href="bpm-preview.html" class="nav-link">工作流手册</a></li><li class="dropdown-item"><!----> <a href="report.html" class="nav-link">大屏手册</a></li><li class="dropdown-item"><!----> <a href="pay_build.html" class="nav-link">支付手册</a></li><li class="dropdown-item"><!----> <a href="member_build.html" class="nav-link">会员手册</a></li><li class="dropdown-item"><!----> <a href="mall_build.html" class="nav-link">商城手册</a></li><li class="dropdown-item"><!----> <a href="erp_build.html" class="nav-link">ERP 手册</a></li><li class="dropdown-item"><!----> <a href="crm_build.html" class="nav-link">CRM 手册</a></li><li class="dropdown-item"><!----> <a href="ai-preview.html" class="nav-link">AI 大模型手册</a></li><li class="dropdown-item"><!----> <a href="mp_build.html" class="nav-link">公众号手册</a></li><li class="dropdown-item"><!----> <a href="sms.html" class="nav-link">系统手册</a></li><li class="dropdown-item"><!----> <a href="dev-env.html" class="nav-link">运维手册</a></li><li class="dropdown-item"><!----> <a href="vue2_dev-spec.html" class="nav-link">前端手册 Vue 2.x</a></li><li class="dropdown-item"><!----> <a href="vue3_dev-spec.html" class="nav-link">前端手册 Vue 3.x</a></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="项目实战" class="dropdown-title"><a href="bpm.html" class="link-title">项目实战</a> <span class="title" style="display:none;">项目实战</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="bpm-preview.html" class="nav-link">工作流手册</a></li><li class="dropdown-item"><!----> <a href="report.html" class="nav-link">大屏手册</a></li><li class="dropdown-item"><!----> <a href="pay_build.html" class="nav-link">支付手册</a></li><li class="dropdown-item"><!----> <a href="member_build.html" class="nav-link">会员手册</a></li><li class="dropdown-item"><!----> <a href="mall_build.html" class="nav-link">商城手册</a></li><li class="dropdown-item"><!----> <a href="erp_build.html" class="nav-link">ERP 手册</a></li><li class="dropdown-item"><!----> <a href="crm_build.html" class="nav-link">CRM 手册</a></li><li class="dropdown-item"><!----> <a href="ai-preview.html" class="nav-link">AI 大模型手册</a></li><li class="dropdown-item"><!----> <a href="mp_build.html" class="nav-link">公众号手册</a></li><li class="dropdown-item"><!----> <a href="sms.html" class="nav-link">系统手册</a></li></ul></div></div><div class="nav-item"><a href="video.html" class="nav-link">视频教程</a></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="在线体验" class="dropdown-title"><!----> <span class="title" style="display:;">在线体验</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="http://dashboard-vue3.yudao.iocoder.cn/" target="_blank" rel="noopener noreferrer" class="nav-link external">
Vue3 + element-plus
<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-item"><!----> <a href="http://dashboard-vben.yudao.iocoder.cn/" target="_blank" rel="noopener noreferrer" class="nav-link external">
Vue3 + vben(ant-design-vue)
<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-item"><!----> <a href="http://dashboard.yudao.iocoder.cn/" target="_blank" rel="noopener noreferrer" class="nav-link external">
Vue2 + element-ui
<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li></ul></div></div><div class="nav-item"><a href="https://github.com/YunaiV/yudao-cloud" target="_blank" rel="noopener noreferrer" class="nav-link external">
微服务版
<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div><div class="nav-item"><a href="https://www.iocoder.cn/" target="_blank" rel="noopener noreferrer" class="nav-link external">
作者博客
<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div> <a href="https://github.com/YunaiV/ruoyi-vue-pro" target="_blank" rel="noopener noreferrer" class="repo-link">
GitHub
<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></nav> <ul class="sidebar-links"><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>萌新必读</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="intro.html" class="sidebar-link">简介</a></li><li><a href="qun.html" class="sidebar-link">交流群</a></li><li><a href="video.html" class="sidebar-link">视频教程</a></li><li><a href="feature.html" class="sidebar-link">功能列表</a></li><li><a href="quick-start.html" class="sidebar-link">快速启动（后端项目）</a></li><li><a href="quick-start-front.html" class="sidebar-link">快速启动（前端项目）</a></li><li><a href="api-doc.html" class="sidebar-link">接口文档</a></li><li><a href="technology.html" class="sidebar-link">技术选型</a></li><li><a href="project-intro.html" class="sidebar-link">项目结构</a></li><li><a href="dev-hot-swap.html" class="sidebar-link">代码热加载</a></li><li><a href="project-rename.html" class="sidebar-link">一键改包</a></li><li><a href="migrate-module.html" class="sidebar-link">迁移模块（适合新项目）</a></li><li><a href="delete-code.html" class="sidebar-link">删除功能（以租户为例）</a></li><li><a href="sql-update.html" class="sidebar-link">表结构变更（版本升级）</a></li><li><a href="xinchuang-db.html" class="sidebar-link">国产信创数据库（DM 达梦、大金、OpenGauss）</a></li><li><a href="remove-redis.html" class="sidebar-link">如何去除 Redis 缓存</a></li><li><a href="natapp.html" class="sidebar-link">内网穿透</a></li><li><a href="interview.html" class="sidebar-link">面试题、简历模版、简历优化</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>后端手册</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="module-new.html" class="sidebar-link">新建模块</a></li><li><a href="new-feature.html" class="sidebar-link">代码生成【单表】（新增功能）</a></li><li><a href="new-feature_master-sub.html" class="sidebar-link">代码生成【主子表】</a></li><li><a href="new-feature_tree.html" class="sidebar-link">代码生成（树表）</a></li><li><a href="resource-permission.html" class="sidebar-link">功能权限</a></li><li><a href="data-permission.html" class="sidebar-link">数据权限</a></li><li><a href="user-center.html" class="sidebar-link">用户体系</a></li><li><a href="social-user.html" class="sidebar-link">三方登录</a></li><li><a href="oauth2.html" class="sidebar-link">OAuth 2.0（SSO 单点登录)</a></li><li><a href="saas-tenant.html" class="sidebar-link">SaaS 多租户【字段隔离】</a></li><li><a href="saas-tenant_dynamic.html" class="sidebar-link">SaaS 多租户【数据库隔离】</a></li><li><a href="websocket.html" class="sidebar-link">WebSocket 实时通信</a></li><li><a href="exception.html" class="sidebar-link">异常处理（错误码）</a></li><li><a href="validator.html" class="sidebar-link">参数校验、时间传参</a></li><li><a href="page-feature.html" class="sidebar-link">分页实现</a></li><li><a href="vo.html" class="sidebar-link">VO 对象转换、数据翻译</a></li><li><a href="file.html" class="sidebar-link">文件存储（上传下载）</a></li><li><a href="excel-import-and-export.html" class="sidebar-link">Excel 导入导出</a></li><li><a href="system-log.html" class="sidebar-link">操作日志、访问日志、异常日志</a></li><li><a href="mybatis.html" class="sidebar-link">MyBatis 数据库</a></li><li><a href="mybatis-pro.html" class="sidebar-link">MyBatis 联表&分页查询</a></li><li><a href="dynamic-datasource.html" class="sidebar-link">多数据源（读写分离）、事务</a></li><li><a href="redis-cache.html" class="sidebar-link">Redis 缓存</a></li><li><a href="local-cache.html" class="sidebar-link">本地缓存</a></li><li><a href="async-task.html" class="sidebar-link">异步任务</a></li><li><a href="distributed-lock.html" class="sidebar-link">分布式锁</a></li><li><a href="idempotent.html" class="sidebar-link">幂等性（防重复提交）</a></li><li><a href="rate-limiter.html" class="sidebar-link">请求限流（RateLimiter）</a></li><li><a href="http-sign.html" class="sidebar-link">HTTP 接口签名（防篡改）</a></li><li><a href="unit-test.html" class="sidebar-link">单元测试</a></li><li><a href="captcha.html" class="sidebar-link">验证码</a></li><li><a href="util.html" class="sidebar-link">工具类 Util</a></li><li><a href="config-center.html" class="sidebar-link">配置管理</a></li><li><a href="db-doc.html" class="sidebar-link">数据库文档</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>中间件手册</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="job.html" class="sidebar-link">定时任务</a></li><li><a href="message-queue_event.html" class="sidebar-link">消息队列（内存）</a></li><li><a href="message-queue_redis.html" class="sidebar-link">消息队列（Redis）</a></li><li><a href="message-queue_rocketmq.html" class="sidebar-link">消息队列（RocketMQ）</a></li><li><a href="message-queue_rabbitmq.html" class="sidebar-link">消息队列（RabbitMQ）</a></li><li><a href="message-queue_kafka.html" class="sidebar-link">消息队列（Kafka）</a></li><li><a href="server-protection.html" class="sidebar-link">限流熔断</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>工作流手册</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="bpm-preview.html" class="sidebar-link">工作流演示</a></li><li><a href="bpm.html" class="sidebar-link">功能开启</a></li><li><a href="bpm_dameng.html" class="sidebar-link">工作流（达梦适配）</a></li><li><a href="bpm_use-bpm-form.html" class="sidebar-link">审批接入（流程表单）</a></li><li><a href="bpm_use-business-form.html" class="sidebar-link">审批接入（业务表单）</a></li><li><a href="bpm_model-designer-bpmn.html" class="sidebar-link">流程设计器（BPMN）</a></li><li><a href="bpm_model-designer-dingding.html" class="sidebar-link">流程设计器（钉钉、飞书）</a></li><li><a href="bpm_assignee.html" class="sidebar-link">选择审批人、发起人自选</a></li><li><a href="bpm_multi-instance.html" class="sidebar-link">会签、或签、依次审批</a></li><li><a href="bpm_process-instance.html" class="sidebar-link">流程发起、取消、重新发起</a></li><li><a href="bpm_task-todo-done.html" class="sidebar-link">审批通过、不通过、驳回</a></li><li><a href="bpm_sign.html" class="sidebar-link">审批加签、减签</a></li><li><a href="bpm_task-delegation-and-cc.html" class="sidebar-link">审批转办、委派、抄送</a></li><li><a href="bpm_listener.html" class="sidebar-link">执行监听器、任务监听器</a></li><li><a href="bpm_expression.html" class="sidebar-link">流程表达式</a></li><li><a href="bpm_message.html" class="sidebar-link">流程审批通知</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>大屏手册</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="report.html" class="sidebar-link">报表设计器</a></li><li><a href="report_screen.html" class="sidebar-link">大屏设计器</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>支付手册</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="pay_build.html" class="sidebar-link">功能开启</a></li><li><a href="pay_alipay-pay-demo.html" class="sidebar-link">支付宝支付接入</a></li><li><a href="pay_wx-pub-pay-demo.html" class="sidebar-link">微信公众号支付接入</a></li><li><a href="pay_wx-lite-pay-demo.html" class="sidebar-link">微信小程序支付接入</a></li><li><a href="pay_refund-demo.html" class="sidebar-link">支付宝、微信退款接入</a></li><li><a href="pay_wallet.html" class="sidebar-link">钱包充值、支付、退款</a></li><li><a href="pay_mock.html" class="sidebar-link">模拟支付、退款</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>会员手册</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="member_build.html" class="sidebar-link">功能开启</a></li><li><a href="member_weixin-mp-login.html" class="sidebar-link">微信公众号登录</a></li><li><a href="member_weixin-lite-login.html" class="sidebar-link">微信小程序登录</a></li><li><a href="member_weixin-lite-subscribe-message.html" class="sidebar-link">微信小程序订阅消息</a></li><li><a href="member_weixin-lite-qrcode.html" class="sidebar-link">微信小程序码</a></li><li><a href="member_user.html" class="sidebar-link">会员用户、标签、分组</a></li><li><a href="member_level.html" class="sidebar-link">会员等级、积分、签到</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>商城手册</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="mall-preview.html" class="sidebar-link">商城演示</a></li><li><a href="mall_build.html" class="sidebar-link">功能开启</a></li><li><a href="mall_diy.html" class="sidebar-link">商城装修</a></li><li><a href="mall_kefu.html" class="sidebar-link">在线客服</a></li><li><a href="mall_product-category.html" class="sidebar-link">【商品】商品分类</a></li><li><a href="mall_product-property.html" class="sidebar-link">【商品】商品属性</a></li><li><a href="mall_product-spu-sku.html" class="sidebar-link">【商品】商品 SPU 与 SKU</a></li><li><a href="mall_product-comment.html" class="sidebar-link">【商品】商品评价</a></li><li><a href="mall_trade-cart.html" class="sidebar-link">【交易】购物车</a></li><li><a href="mall_trade-order.html" class="sidebar-link">【交易】交易订单</a></li><li><a href="mall_trade-aftersale.html" class="sidebar-link">【交易】售后退款</a></li><li><a href="mall_trade-delivery-express.html" class="sidebar-link">【交易】快递发货</a></li><li><a href="mall_trade-delivery-pickup.html" class="sidebar-link">【交易】门店自提</a></li><li><a href="mall_trade-brokerage.html" class="sidebar-link">【交易】分销返佣</a></li><li><a href="mall_promotion-coupon.html" class="sidebar-link">【营销】优惠劵</a></li><li><a href="mall_point-activity.html" class="sidebar-link">【营销】积分商城</a></li><li><a href="mall_promotion-combination.html" class="sidebar-link">【营销】拼团活动</a></li><li><a href="mall_promotion-seckill.html" class="sidebar-link">【营销】秒杀活动</a></li><li><a href="mall_promotion-bargain.html" class="sidebar-link">【营销】砍价活动</a></li><li><a href="mall_promotion-record.html" class="sidebar-link">【营销】满减送活动</a></li><li><a href="mall_promotion-discount.html" class="sidebar-link">【营销】限时折扣</a></li><li><a href="mall_promotion-content.html" class="sidebar-link">【营销】内容管理</a></li><li><a href="mall_statistics.html" class="sidebar-link">【统计】会员、商品、交易统计</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>ERP手册</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="erp-preview.html" class="sidebar-link">ERP 演示</a></li><li><a href="erp_build.html" class="sidebar-link">功能开启</a></li><li><a href="erp_product.html" class="sidebar-link">【产品】产品信息、分类、单位</a></li><li><a href="erp_stock.html" class="sidebar-link">【库存】产品库存、库存明细</a></li><li><a href="erp_stock-in-out.html" class="sidebar-link">【库存】其它入库、其它出库</a></li><li><a href="erp_stock-move-check.html" class="sidebar-link">【库存】库存调拨、库存盘点</a></li><li><a href="erp_purchase.html" class="sidebar-link">【采购】采购订单、入库、退货</a></li><li><a href="erp_sale.html" class="sidebar-link">【销售】销售订单、出库、退货</a></li><li><a href="sale_finance-payment-receipt.html" class="sidebar-link">【财务】采购付款、销售收款</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>CRM手册</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="crm-preview.html" class="sidebar-link">CRM 演示</a></li><li><a href="crm_build.html" class="sidebar-link">功能开启</a></li><li><a href="crm_clue.html" class="sidebar-link">【线索】线索管理</a></li><li><a href="crm_customer.html" class="sidebar-link">【客户】客户管理、公海客户</a></li><li><a href="crm_business.html" class="sidebar-link">【商机】商机管理、商机状态</a></li><li><a href="crm_contract.html" class="sidebar-link">【合同】合同管理、合同提醒</a></li><li><a href="crm_receivable.html" class="sidebar-link">【回款】回款管理、回款计划</a></li><li><a href="crm_product.html" class="sidebar-link">【产品】产品管理、产品分类</a></li><li><a href="crm_permission.html" class="sidebar-link">【通用】数据权限</a></li><li><a href="crm_follow-up.html" class="sidebar-link">【通用】跟进记录、待办事项</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>AI大模型手册</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="ai-preview.html" class="sidebar-link">AI 大模型演示</a></li><li><a href="ai_build.html" class="sidebar-link">功能开启</a></li><li><a href="ai_chat.html" class="sidebar-link">AI 聊天对话</a></li><li><a href="ai_image.html" class="sidebar-link">AI 绘画创作</a></li><li><a href="ai_music.html" class="sidebar-link">AI 音乐创作</a></li><li><a href="ai_write.html" class="sidebar-link">AI 写作助手</a></li><li><a href="ai_mindmap.html" class="sidebar-link">AI 思维导图</a></li><li><a href="ai_openai.html" class="sidebar-link">【模型接入】OpenAI</a></li><li><a href="ai_tongyi.html" class="sidebar-link">【模型接入】通义千问</a></li><li><a href="ai_deep-seek.html" class="sidebar-link">【模型接入】DeepSeek</a></li><li><a href="ai_doubao.html" class="sidebar-link">【模型接入】字节豆包</a></li><li><a href="ai_hunyuan.html" class="sidebar-link">【模型接入】腾讯混元</a></li><li><a href="ai_siliconflow.html" class="sidebar-link">【模型接入】硅基流动</a></li><li><a href="ai_yiyan.html" class="sidebar-link">【模型接入】文心一言</a></li><li><a href="ai_llama.html" class="sidebar-link">【模型接入】LLAMA</a></li><li><a href="ai_glm.html" class="sidebar-link">【模型接入】智谱 GLM</a></li><li><a href="ai_xinghuo.html" class="sidebar-link">【模型接入】讯飞星火</a></li><li><a href="ai_azure-openai.html" class="sidebar-link">【模型接入】微软 OpenAI</a></li><li><a href="ai_gemini.html" class="sidebar-link">【模型接入】谷歌 Gemini</a></li><li><a href="ai_stable-diffusion.html" class="sidebar-link">【模型接入】Stable Diffusion</a></li><li><a href="ai_midjourney.html" class="sidebar-link">【模型接入】Midjourney</a></li><li><a href="ai_suno.html" class="sidebar-link">【模型接入】Suno</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>公众号手册</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="mp_build.html" class="sidebar-link">功能开启</a></li><li><a href="mp_account.html" class="sidebar-link">公众号接入</a></li><li><a href="mp_user.html" class="sidebar-link">公众号粉丝</a></li><li><a href="mp_tag.html" class="sidebar-link">公众号标签</a></li><li><a href="mp_message.html" class="sidebar-link">公众号消息</a></li><li><a href="mp_auto-reply.html" class="sidebar-link">自动回复</a></li><li><a href="mp_menu.html" class="sidebar-link">公众号菜单</a></li><li><a href="mp_material.html" class="sidebar-link">公众号素材</a></li><li><a href="mp_article.html" class="sidebar-link">公众号图文</a></li><li><a href="mp_statistics.html" class="sidebar-link">公众号统计</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>系统手册</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="sms.html" class="sidebar-link">短信配置</a></li><li><a href="mail.html" class="sidebar-link">邮件配置</a></li><li><a href="notify.html" class="sidebar-link">站内信配置</a></li><li><a href="desensitize.html" class="sidebar-link">数据脱敏、字段权限</a></li><li><a href="sensitive-word.html" class="sidebar-link">敏感词</a></li><li><a href="area-and-ip.html" class="sidebar-link">地区 & IP 库</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>运维手册</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="dev-env.html" class="sidebar-link">开发环境</a></li><li><a href="deployment-linux.html" class="sidebar-link">Linux 部署</a></li><li><a href="deployment-docker.html" class="sidebar-link">Docker 部署</a></li><li><a href="deployment-jenkins.html" class="sidebar-link">Jenkins 部署</a></li><li><a href="deployment-baota.html" class="sidebar-link">宝塔部署</a></li><li><a href="https.html" class="sidebar-link">HTTPS 证书</a></li><li><a href="server-monitor.html" class="sidebar-link">服务监控</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading open"><span>前端手册 Vue 3.x</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="vue3_dev-spec.html" class="sidebar-link">开发规范</a></li><li><a href="vue3_route.html" class="sidebar-link">菜单路由</a></li><li><a href="vue3_icon.html" class="sidebar-link">Icon 图标</a></li><li><a href="vue3_dict.html" aria-current="page" class="active sidebar-link">字典数据</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header level2"><a href="vue3/dict_#_1-全局缓存.html" class="sidebar-link">1. 全局缓存</a></li><li class="sidebar-sub-header level2"><a href="vue3/dict_#_2-dict-type.html" class="sidebar-link">2. DICT_TYPE</a></li><li class="sidebar-sub-header level2"><a href="vue3/dict_#_3-dicttag-字典标签.html" class="sidebar-link">3. DictTag 字典标签</a></li><li class="sidebar-sub-header level2"><a href="vue3/dict_#_4-字典工具类.html" class="sidebar-link">4. 字典工具类</a></li></ul></li><li><a href="vue3_components.html" class="sidebar-link">系统组件</a></li><li><a href="vue3_util.html" class="sidebar-link">通用方法</a></li><li><a href="vue3_config-center.html" class="sidebar-link">配置读取</a></li><li><a href="vue3_crud-schema.html" class="sidebar-link">CRUD 组件</a></li><li><a href="vue3_i18n.html" class="sidebar-link">国际化</a></li><li><a href="vue3_debugger.html" class="sidebar-link">IDE 调试</a></li><li><a href="vue3_format.html" class="sidebar-link">代码格式化</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>前端手册 Vue 2.x</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="vue2_dev-spec.html" class="sidebar-link">开发规范</a></li><li><a href="vue2_route.html" class="sidebar-link">菜单路由</a></li><li><a href="vue2_icon.html" class="sidebar-link">Icon 图标</a></li><li><a href="vue2_dict.html" class="sidebar-link">字典数据</a></li><li><a href="vue2_components.html" class="sidebar-link">系统组件</a></li><li><a href="vue2_util.html" class="sidebar-link">通用方法</a></li><li><a href="vue2_config-center.html" class="sidebar-link">配置读取</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>更新日志</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="changelog_2.4.2.html" class="sidebar-link">【v2.4.2】开发中</a></li><li><a href="changelog_2.4.1.html" class="sidebar-link">【v2.4.1】2025-02-09</a></li><li><a href="changelog_2.4.0.html" class="sidebar-link">【v2.4.0】2024-12-31</a></li><li><a href="changelog_2.3.0.html" class="sidebar-link">【v2.3.0】2024-10-07</a></li><li><a href="changelog_2.2.0.html" class="sidebar-link">【v2.2.0】2024-08-02</a></li><li><a href="changelog_2.1.0.html" class="sidebar-link">【v2.1.0】2024-05-05</a></li><li><a href="changelog_2.0.1.html" class="sidebar-link">【v2.0.1】2024-03-01</a></li><li><a href="changelog_2.0.0.html" class="sidebar-link">【v2.0.0】2024-01-26</a></li></ul></section></li></ul> </aside> <div><main class="page"><div class="theme-vdoing-wrapper "><div class="articleInfo-wrap" data-v-06225672><div class="articleInfo" data-v-06225672><ul class="breadcrumbs" data-v-06225672><li data-v-06225672><a href="intro.html" title="首页" class="iconfont icon-home router-link-active" data-v-06225672></a></li> <li data-v-06225672><span data-v-06225672>开发指南</span></li><li data-v-06225672><span data-v-06225672>前端手册 Vue 3.x</span></li></ul> <div class="info" data-v-06225672><div title="作者" class="author iconfont icon-touxiang" data-v-06225672><a href="https://www.iocoder.cn" target="_blank" title="作者" class="beLink" data-v-06225672>芋道源码</a></div> <div title="创建时间" class="date iconfont icon-riqi" data-v-06225672><a href="javascript:;" data-v-06225672>2022-04-17</a></div> <!----></div></div></div> <!----> <div class="content-wrapper"><div class="right-menu-wrapper"><div class="right-menu-margin"><div class="right-menu-title">目录</div> <div class="right-menu-content"></div></div></div> <h1><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAYAAAA7MK6iAAAAAXNSR0IArs4c6QAABGpJREFUSA3tVVtoXFUU3fvOI53UlmCaKIFmwEhsE7QK0ipFEdHEKpXaZGrp15SINsXUWvBDpBgQRKi0+KKoFeJHfZA+ED9KKoIU2gYD9UejTW4rVIzm0VSTziPzuNu1z507dibTTjL4U/DAzLn3nL3X2o91ziX6f9wMFdh6Jvbm9nNSV0msViVO6tN1Rm7NMu2OpeJ9lWBUTDxrJbYTS0hInuwciu9eLHlFxCLCZEk3MegsJmZ5K/JD6t7FkFdEvGUo1g7qJoG3MHImqRIn8/nzY1K9UPKKiJmtnUqHVE3Gbuay6vJE/N2FEmuxFjW2nUuE0yQXRRxLiTUAzs36zhZvOXJPdX850EVnnLZkB8prodQoM5JGj7Xk2mvC7JB8tG04Ef5PiXtG0UtxupRQSfTnBoCy554x18yJHI6I+G5Eru4LHmPJZEQsrvPUbMiA8G/WgMK7w7I+ez7++o2ANfbrjvaOl1tFMs+htG3IrZH9/hDX1Pr8Tc0UvH8tcX29KzAgIGcEkINyW5BF9x891hw6VYqgJHEk0huccS7vh3C6gTiODL+26huuBtbct8eZnqLML8PkxGYpuPZBqtqwkSjgc4mB5gbgig5i+y0UDK35LMxXisn9xQtK+nd26gTIHsHe/oblK/b29fUmN/8Y+9jAQrnBp56m1LcDlDp9irKTExSKduXJVWSqdBMA08pEJnEIOB3FPPMybu/oeV8zFeYN3xx576Q6RH+VmplE4ncQV5v+5rzSoyOU7PuEAg8g803PwBJ0CExno/jcMbN8tONYeOmHiuUNryvm3fRUy4tMPVLdAGkUhNWuggGrJcXPv+ouCjz0MKUHz1J2/E8IC9nqTabcxgaBYM0hPhD5Y65FsbxRQKxCQrDjDctW7PUM3HuZunFyifSAqEfuzCp48Il24luWUWZoyJCaPR82jE0+kFA643wRFVni4RYSq3ohJO2pZ7B5dO4xkDWbEpossJPLSrPjYID8rS2UHTlvyNxqIGsg674XJJ7vnh5L7PNwC4hh2sjCI96mzszOTpxLF0T7l88Yz7lAuK6OnL8gXLOnTvpzSb22YG8W7us3jSebFHeeqnXRG1vt+MoUM84LQIBmMsCTAcOauTh0T0l0neQK7m2bLMt2mGxU3HYssS0J2cdv5wljlPsrIuZLAG/2DOZIXgCYT8uMGZN+e2kSirfxZOPCsC0f24nTZzspnVn9VePS1Z5vubmAGGXG8ZFno9Hel0yfA5ZPhF7Dh972BQJ2qCpgH67lmWtBYbvk6sz02wjky2vXyz0XErP/kFB619js1BtwfOV4OPRqOQBjy3Qbk18vigUPPSD5ceHnwck7W9bhAqZdd7SuG7w4/P2F/GaJh8c7e9qgow+Q7cGBo+98WsLkuktFqiZabtXuQTu/Y5ETbR0v7tNSFnvrmu6pjdoan2KjMu8q/Hmj1EfCO2ZGfEIbIXKUlw8qaX9/b2oeSJmFksSeT/Fn0V3nSypChh4Gjh74ybO9aeZ/AN2dwciu2/MhAAAAAElFTkSuQmCC">字典数据<!----></h1> <div class="theme-vdoing-content content__default"><p>本小节，讲解前端如何使用 [系统管理 -> 字典管理] 菜单的字典数据，例如说字典数据的下拉框、单选 / 多选按钮、高亮展示等等。</p> <p><img src="https://doc.iocoder.cn/img/Vue3/%E5%AD%97%E5%85%B8%E6%95%B0%E6%8D%AE/01.png" alt="字典管理"></p> <h2 id="_1-全局缓存"><a href="#_1-全局缓存" class="header-anchor">#</a> 1. 全局缓存</h2> <p>用户登录成功后，前端会从后端获取到全量的字典数据，缓存在 store 中。如下图所示：</p> <p><img src="https://doc.iocoder.cn/img/Vue3/%E5%AD%97%E5%85%B8%E6%95%B0%E6%8D%AE/02.png" alt="字典 store"></p> <p>这样，前端在使用到字典数据时，无需重复请求后端，提升用户体验。</p> <p>不过，缓存暂时未提供刷新，所以在字典数据发生变化时，需要用户刷新浏览器，进行重新加载。</p> <h2 id="_2-dict-type"><a href="#_2-dict-type" class="header-anchor">#</a> 2. DICT_TYPE</h2> <p>在 <a href="https://github.com/yudaocode/yudao-ui-admin-vue3/blob/master/src/utils/dict.ts#L73-L125" target="_blank" rel="noopener noreferrer"><code>dict.ts</code><span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a> 文件中，使用 <code>DICT_TYPE</code> 枚举了字典的 KEY。如下图所示：</p> <p><img src="https://doc.iocoder.cn/img/Vue3/%E5%AD%97%E5%85%B8%E6%95%B0%E6%8D%AE/03.png" alt=" 枚举"></p> <p>后续如果有新的字典 KEY，需要你自己进行添加。</p> <h2 id="_3-dicttag-字典标签"><a href="#_3-dicttag-字典标签" class="header-anchor">#</a> 3. DictTag 字典标签</h2> <p><a href="https://github.com/yudaocode/yudao-ui-admin-vue3/blob/master/src/components/DictTag/index.ts" target="_blank" rel="noopener noreferrer"><code><dict-tag /></code><span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a> 组件，翻译字段对应的字典展示文本，并根据 <code>colorType</code>、<code>cssClass</code> 进行高亮。使用示例如下：</p> <div class="language-HTML extra-class"><pre class="language-html"><code><span class="token comment"><!--
type: 字典 KEY
value: 字典值
--></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>dict-tag</span> <span class="token attr-name">:type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>DICT_TYPE.SYSTEM_LOGIN_TYPE<span class="token punctuation">"</span></span> <span class="token attr-name">:value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>row.logType<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span>
</code></pre></div><p><img ><code><span class="token comment">// 获取 dictType 对应的数据字典数组【object】</span>
<span class="token keyword">export</span> <span class="token keyword">const</span> <span class="token function-variable function">getDictOptions</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter"><span class="token literal-property property">dictType</span><span class="token operator">:</span> string</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span><span class="token punctuation">{</span> <span class="token comment">/** 省略代码 */</span> <span class="token punctuation">}</span>
<span class="token comment">// 获取 dictType 对应的数据字典数组【int】</span>
<span class="token keyword">export</span> <span class="token keyword">const</span> <span class="token function-variable function">getIntDictOptions</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter"><span class="token literal-property property">dictType</span><span class="token operator">:</span> string</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> <span class="token comment">/** 省略代码 */</span> <span class="token punctuation">}</span>
<span class="token comment">// 获取 dictType 对应的数据字典数组【string】</span>
<span class="token keyword">export</span> <span class="token keyword">const</span> <span class="token function-variable function">getStrDictOptions</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter"><span class="token literal-property property">dictType</span><span class="token operator">:</span> string</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> <span class="token comment">/** 省略代码 */</span> <span class="token punctuation">}</span>
<span class="token comment">// 获取 dictType 对应的数据字典数组【boolean】</span>
<span class="token keyword">export</span> <span class="token keyword">const</span> <span class="token function-variable function">getBoolDictOptions</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter"><span class="token literal-property property">dictType</span><span class="token operator">:</span> string</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> <span class="token comment">/** 省略代码 */</span> <span class="token punctuation">}</span>
<span class="token comment">// 获取 dictType 对应的数据字典数组【object】</span>
<span class="token keyword">export</span> <span class="token keyword">const</span> <span class="token function-variable function">getDictObj</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter"><span class="token literal-property property">dictType</span><span class="token operator">:</span> string<span class="token punctuation">,</span> <span class="token literal-property property">value</span><span class="token operator">:</span> any</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> <span class="token comment">/** 省略代码 */</span> <span class="token punctuation">}</span>
</code></pre></div><p>结合 Element Plus 的表单组件，使用示例如下：</p> <div class="language-HTML extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>template</span><span class="token punctuation">></span></span>
<span class="token comment"><!-- radio 单选框 --></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>el-radio</span>
<span class="token attr-name">v-for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>dict in getIntDictOptions(DICT_TYPE.COMMON_STATUS)<span class="token punctuation">"</span></span>
<span class="token attr-name">:key</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>dict.value<span class="token punctuation">"</span></span>
<span class="token attr-name">:label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>parseInt(dict.value)<span class="token punctuation">"</span></span>
<span class="token punctuation">></span></span>
{{dict.label}}
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>el-radio</span><span class="token punctuation">></span></span>
<span class="token comment"><!-- select 下拉框 --></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>el-select</span> <span class="token attr-name">v-model</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>form.code<span class="token punctuation">"</span></span> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>请选择渠道编码<span class="token punctuation">"</span></span> <span class="token attr-name">clearable</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>el-option</span>
<span class="token attr-name">v-for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>dict in getStrDictOptions(DICT_TYPE.SYSTEM_SMS_CHANNEL_CODE)<span class="token punctuation">"</span></span>
<span class="token attr-name">:key</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>dict.value<span class="token punctuation">"</span></span>
<span class="token attr-name">:label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>dict.label<span class="token punctuation">"</span></span>
<span class="token attr-name">:value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>dict.value<span class="token punctuation">"</span></span>
<span class="token punctuation">/></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>el-select</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>template</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span> <span class="token attr-name">setup</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>tsx<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token script"><span class="token language-javascript">
<span class="token keyword">import</span> <span class="token punctuation">{</span> <span class="token constant">DICT_TYPE</span><span class="token punctuation">,</span> getIntDictOptions<span class="token punctuation">,</span> getStrDictOptions <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@/utils/dict'</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span>
</code></pre></div></div></div> <div class="page-slot page-slot-bottom">
<div class="wwads-cn wwads-horizontal pageB" data-id="136" style="width:100%;max-height:80px;min-height:auto;"></div>
<style>
.pageB img{width:80px!important;}
.wwads-horizontal .wwads-text, .wwads-content .wwads-text{line-height:1;}
</style>
</div> <div class="page-edit"><!----> <!----> <!----></div> <div class="page-nav-wapper"><div class="page-nav-centre-wrap"><a href="vue3_icon.html" class="page-nav-centre page-nav-centre-prev"><div class="tooltip">Icon 图标</div></a> <a href="vue3_components.html" class="page-nav-centre page-nav-centre-next"><div class="tooltip">系统组件</div></a></div> <div class="page-nav"><p class="inner"><span class="prev">
←
<a href="vue3_icon.html" class="prev">Icon 图标</a></span> <span class="next"><a href="vue3_components.html">系统组件</a>→
</span></p></div></div></div> <!----></main></div> <div class="footer"><div class="icons"><a href="mailto:7685413@qq.com" title="发邮件" target="_blank" class="iconfont icon-youjian"></a><a href="https://github.com/YunaiV" title="GitHub" target="_blank" class="iconfont icon-github"></a><a href="https://www.iocoder.cn/?yudao" title="博客" target="_blank" class="iconfont icon-erji"></a></div>
Theme by
<a href="https://github.com/xugaoyi/vuepress-theme-vdoing" target="_blank" title="本站主题">Vdoing</a>
| Copyright © 2019-2025
<span>芋道源码 | MIT License</span></div> <div class="buttons"><div title="返回顶部" class="button blur go-to-top iconfont icon-fanhuidingbu" style="display:none;"></div> <div title="去评论" class="button blur go-to-comment iconfont icon-pinglun" style="display:none;"></div> <div title="主题模式" class="button blur theme-mode-but iconfont icon-zhuti"><ul class="select-box" style="display:none;"><li class="iconfont icon-zidong">
跟随系统
</li><li class="iconfont icon-rijianmoshi">
浅色模式
</li><li class="iconfont icon-yejianmoshi">
深色模式
</li><li class="iconfont icon-yuedu">
阅读模式
</li></ul></div></div> <!----> <!----> <div class="custom-html-window custom-html-window-rb" style="display:;"><div class="custom-wrapper"><span class="close-but">×</span> <div>
<div class="wwads-cn wwads-vertical windowRB" data-id="136" style="max-width:160px;
min-width: auto;min-height:auto;"></div>
<style>
.windowRB{ padding: 0;}
.windowRB .wwads-img{margin-top: 10px;}
.windowRB .wwads-content{margin: 0 10px 10px 10px;}
.custom-html-window-rb .close-but{
display: none;
}
</style>
</div></div></div></div><div class="global-ui"></div></div>
<script defer></script>
</body>
</html>