若依框架ruoyi-vue(前后端版)字典的使用

在ruoyi框架下,通过字典管理定义状态值,然后在Vue工程的vue文件中引用该字典,设置表格列的显示,利用<dict-tag>组件实现状态的前端回显,刷新页面后状态信息即可正确展示。

显示效果:

 状态实际 值为 1,讲师审核中为我们在字典管理中定义的。

步骤:先在ruoyi的字典管理中定义字典

字典管理中 

然后根据字典设置自己需要的值

设置完值后,然后是前端表格的数据回显

这里先打开我们的前端vue工程,我们需要回显页面对应的vue文件中

在export default中加入我们刚刚定义的字典 dicts:['我们定义的字典类型']

然后在表格中需要将对应的值设置为需要显示的字典处,用如下操作,完成数据显示

 <el-table-column label="状态" align="center" prop="state" >
                  <template slot-scope="scope">
                    <dict-tag
                      :options="dict.type.leave_state"
                      :value="scope.row.state"
                    >
                    </dict-tag>
                  </template>
  </el-table-column>

 完成以后,刷新页面后就可以显示了

 

<think>我们在使用RuoYi-Vue-Plus框架时,字典功能是常见需求。根据引用[2]和引用[3],我们可以整理出字典使用方法,主要涉及前端表格渲染字典数据。字典功能使用步骤:1.后端准备:在字典管理模块中定义字典类型和字典数据。2.前端使用:在页面中引入字典标签组件,并在表格列中使用`<dict-tag>`组件。具体操作如下:###1.后端字典管理在RuoYi-Vue-Plus的后台管理系统中,进入“系统管理”->“字典管理”:-添加字典类型:填写字典类型(唯一标识)、字典名称等。-字典类型下添加字典数据:设置字典标签(显示文本)和字典键值(实际存储的值)。###2.前端使用字典标签在Vue组件的表格列中,使用`<dict-tag>`组件来渲染字典值对应的标签。示例代码(参考引用[2]):```html<el-table-column label="班组" align="center" key="team" prop="team"><templateslot-scope="scope"><dict-tag :options="dict.type.team" :value="scope.row.team"/></template> </el-table-column>```说明:-`:options="dict.type.team"`:这里的`team`是你在字典管理中定义的字典类型(唯一标识)。-`:value="scope.row.team"`:`team`是当前行数据中存储的字典值(即字典数据中的键值)。###3.初始化字典数据在Vue组件中,需要先通过`dict`方法初始化字典。通常在组件的`created`或`mounted`生命周期中调用。示例: ```javascriptimport {getDicts} from"@/api/system/dict/data"; exportdefault {data() {return{//字典dict: {//初始化一个空对象,用于存储字典类型type: {}}};},created(){//获取字典类型为'team'的字典数据getDicts('team').then(response=> {this.dict.type.team =response.data;});}};```注意:`getDicts`是框架提供的API,用于根据字典类型获取字典数据列表。 ###4.表单中使用字典(下拉框)在表单中,我们可能需要使用字典数据作为下拉选项。示例: ```html<el-form-itemlabel="班组"prop="team"><el-selectv-model="form.team" placeholder="请选择班组"><el-optionv-for="itemin dict.type.team":key="item.value":label="item.label":value="item.value"/></el-select></el-form-item> ```同样,需要先在组件的`created`或`mounted`中通过`getDicts`方法获取字典数据。###注意事项-确保字典类型已经在后端正确添加。-前端组件中使用字典类型标识必须与后端一致。-如果字典数据需要全局使用,可以考虑在全局状态管理(如Vuex)中存储,避免重复请求。通过以上步骤,你可以在RuoYi-Vue-Plus中实现字典的展示和选择功能。 §§相关问题§§1.如何在RuoYi-Vue-Plus中新增一个字典类型? 2.如何在前端页面中同时使用多个字典类型? 3.字典数据发生变化时,如何实时更新前端显示?</think>在 RuoYi-Vue-Plus 中使用字典功能主要涉及后端字典配置和前端组件调用两个环节,以下是详细使用教程: ### 一、后端字典配置(系统管理) 1. **添加字典类型** - 进入:`系统管理 > 字典管理 > 字典类型` - 点击"新增"按钮 - 填写关键字段: ```markdown 字典名称:性别 字典类型:sys_user_sex # 唯一标识符 状态:正常 ``` 2. **添加字典数据** -字典类型列表点击"字典数据"按钮 - 添加具体键值对: ```markdown | 字典标签 | 字典键值 | 是否默认 | |----------|----------|----------| | 男 | 0 | 是 | | 女 | 1 | 否 | | 未知 | 2 | 否 | ``` ### 二、前端组件使用Vue页面) 1. **表格渲染字典**(参考引用[2]) ```html <el-table-column label="性别" align="center" prop="sex"> <template slot-scope="scope"> <dict-tag :options="dict.type.sys_user_sex" :value="scope.row.sex"/> </template> </el-table-column> ``` - `:options`:绑定字典类型标识符 - `:value`:绑定数据字段 2. **表单选择器使用** ```html <el-form-item label="性别" prop="sex"> <el-select v-model="form.sex"> <el-option v-for="item in dict.type.sys_user_sex" :key="item.value" :label="item.label" :value="item.value" /> </el-select> </el-form-item> ``` 3. **独立标签显示** ```html <dict-tag :options="dict.type.sys_user_sex" :value="userInfo.sex"/> ``` ### 三、字典数据初始化 在 Vue 组件中声明字典类型(通常在 `created` 生命周期): ```javascript export default { dicts: ['sys_user_sex'], // 声明需要加载的字典类型 data() { return { // 自动注入字典数据到 this.dict.type } } } ``` ### 四、注意事项 1. **字典同步**:后端字典修改后需刷新前端页面或调用字典更新接口 2. **命名规范**:字典类型标识符需全局唯一(建议使用 `模块_业务` 格式) 3. **多租户支持**:若启用多租户(参考引用[3]),字典数据会自动按租户隔离 ### 效果示例 用户数据 `{ sex: 0 }` 在表格中会自动渲染为带颜色的标签:<span style="color:blue">男</span> > 注:`<dict-tag>` 组件会自动根据字典配置转换键值,并添加颜色标识
评论 6
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值