若依字典使用

这篇具有很好参考价值的文章主要介绍了若依字典使用。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

若依字典使用

此文章使用的若依是大于3.7.0版本的

JS文件配置

main.js中引入全局变量和方法

import DictData from '@/components/DictData'
DictData.install()

DictData.js配置

可以从DictData.js中看出在install方法中调用了字典查询接口,在install方法中可以做以下操作:
(1)修改字典接口为你的字典接口,或者去api/dict/data.js中修改getDicts方法
(2)配置label和value对应的后端返回字段,若依框架会去后端返回的数据中拿到配置字段的值赋给label和value

labelField: 'dictLabel',//label对应的字段
valueField: 'dictValue',//value对应的字段

DictData.js
若依字典使用,vue.js,前端,javascript

vue页面使用字典

(1)加载数据字典,可以是多个

export default {
  dicts: ['字典类型'],
  ...
...

(2)读取数据字典
此处的label和value就是DictData.js中配置的字段对应的值

<el-option
  v-for="dict in dict.type.字典类型"
  :key="dict.value"
  :label="dict.label"
  :value="dict.value"
/>

(3)也可以在列表中翻译返回的值

// 字典标签组件翻译
<el-table-column label="名称" align="center" prop="name">
  <template slot-scope="scope">
    <dict-tag :options="dict.type.字典类型" :value="scope.row.name"/>
  </template>
</el-table-column>

// 自定义方法翻译
{{ xxxxFormat(form) }}

xxxxFormat(row, column) {
  return this.selectDictLabel(this.dict.type.字典类型, row.name);
},

拓展

上面的就是若依字典使用的过程,以下是拓展:
若依字典手册:http://doc.ruoyi.vip/ruoyi-vue/document/qdsc.html#%E4%BD%BF%E7%94%A8%E5%AD%97%E5%85%B8
若依字典底层执行过程逻辑:https://blog.csdn.net/weixin_43094085/article/details/122472351文章来源地址https://www.toymoban.com/news/detail-575985.html

到了这里,关于若依字典使用的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 【Java】若依的使用代码生成及字典的使用

            若依管理系统是一款基于 Java 语言开发的 开源管理系统 。它采用了 Spring Boot 框架,使得开发更加 快速和高效 。同时,它还集成了 MyBatis Plus ,进一步简化了数据库操作。若依管理系统的界面简洁美观,且支持多语言,可以满足不同用户的需求。此外,它还提供

    2024年02月05日
    浏览(31)
  • 【前端灵魂脚本语言JavaScript⑤】——JS中数组的使用

    🐚 作者: 阿伟 💂 个人主页: Flyme awei 🐋 希望大家多多支持😘一起进步呀! 💬 文章对你有帮助👉关注✨点赞👍收藏📂 第一种: var 数组名 = new Array(); 创建一个空数组 第二种: var arr2 = new Array(10); 创建一个定长为10的数组 第三种 var arr3 = new Array(a,b,c); 创建时直接指定元素值

    2023年04月08日
    浏览(65)
  • vue2 若依项目,使用plotly.js-dist图表库,将数据图表一键导出为图片

    此代码适用的场景是一个页面有多个数据图表。 首先需要拿到你生成数据图表的数据, 然后赋值给一个数组,数组需要在data定义,还需要去重。  然后点击导出按钮的代码如下: 单个下载可以点击数据图表的照相机,可以实现单个下载。 如果数据图表做了分页和懒加载,无

    2024年02月12日
    浏览(46)
  • ruoyi 若依 前端vue npm install 运行vue前端

    1. 安装jdk ​​​​​​​https://blog.csdn.net/torpidcat/article/details/90549551 2. nginx https://blog.csdn.net/torpidcat/article/details/97934302 3. mysql https://blog.csdn.net/torpidcat/article/details/110265490 4. redis https://blog.csdn.net/torpidcat/article/details/123021796 =================================== 首次导入,需要先执行 np

    2024年01月25日
    浏览(59)
  • 若依vue前端有全局用户信息变量吗

    \\\"若依\\\"是一个基于SpringBoot和Vue的前后端分离的开源项目。在前端Vue部分,全局用户信息通常保存在Vuex中,Vuex是Vue.js的状态管理模式。它提供了一个集中式存储来管理所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。 在若依系统中,全局用户信息通常

    2024年02月14日
    浏览(38)
  • 打包部署若依SpringBoot后端和Vue前端

    打开若依,点击右侧的Maven展开Maven管理,选择ruoyiLifecycle 先双击clean清除原本启动项目时生成的文件。然后点击package等待项目打包 打包完成后会在ruoyi-adminsrctarget里面看到.jar后缀的文件,就代表打包成功(可以把这个文件复制出来存放到其他地方,方便后面启动) 把刚刚打

    2024年04月25日
    浏览(43)
  • vue 前端 + 若依(ruoyi)后端 实现国际化

    记录一下,前端使用vue,后端使用若依(ruoyi,基于spring-boot)实现页面,后端返回提示信息国际化 vue:2.6.12 vue-i18n:^8.27.2 安装vue-i18n,注:最新的交于该版本有差异,所以指定使用版本:8.27.2 添加国际化js文件:language.en_US.js 添加国际化js文件:language.zh_CN.js 添加i18n.js ma

    2024年02月12日
    浏览(56)
  • 若依前端Vue3模板——自定义主题+炫彩主题

    实现结果 实现步骤 默认主题的设置 文件位置: src/settings.js 布局设置 图标文件 文件位置: src/assets/images/blue.svg 复制同级的 light.svg 修改名称即可,将两个颜色替换为:#409eff 布局组件 文件位置: src/layout/components/Settings/index.vue template模板中添加控件如下 新增一个主题风格选

    2024年02月14日
    浏览(51)
  • 若依vue(前后端分离版本)前端获取登录用户id

    1.找到user.js 2.在user.js中找到以下几个地方 属性:state{} 属性:mutations{} 函数:GetInfo() 3.在user.js中添加代码  4.在自己的页面中添加获取id的代码 在该若依的版本中,从下列目录找到,ruoyi-ui-src-store-modules-user.js 属性state在页面中的位置 还有mutations 最后是GetInfo方法 步骤三 到此

    2024年04月12日
    浏览(55)
  • 部署若依前端vue3后端SSM项目实战

    前端部署在nginx 后端部署在tomcat 系统 前端服务器 后端服务器 前端项目架构 后端项目架构 win10 nginx1.22.1 tomcat9 vue3 ssm linux 亲测! 环境同样适用。 前端项目修改项目下载地址 GIThub RuoYi-Vue3 vite.config.js 基本不用动, 默认打包为文件夹名 dist , 不用dist可以自定义(我用的自定义) 前

    2024年04月09日
    浏览(42)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包