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

最新推荐文章于 2025-06-05 19:32:25 发布

SiTiA Tech ? offical

最新推荐文章于 2025-06-05 19:32:25 发布

阅读量1.5w

点赞数 12

CC 4.0 BY-SA版权

分类专栏：若依文章标签： vue.js 前端 javascript 后端 java

本文链接：https://blog.youkuaiyun.com/SiTiATech/article/details/128750068

若依专栏收录该内容

2 篇文章

订阅专栏

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

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

显示效果：

状态实际值为 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>

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