若依字典使用
此文章使用的若依是大于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页面使用字典
(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)也可以在列表中翻译返回的值文章来源:https://www.toymoban.com/news/detail-575985.html
// 字典标签组件翻译
<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模板网!