Avue使用本地/网络数据字典

当我们在项目中使用 avue 表格展示选择器内容时，就需要使用数据字典

本地字典

比如我们使用一个前端写死的字典

// html
<avue-crudref="crud":data="studentList":option="option":page.sync="page"
>
</avue-crud>// js
option: {column: [{dicData: [{ label:'zs',value:0 }],}]
}

没错就是这么简单,但是一般情况我们需要使用可以通过系统维护的字典，比如若依就是一个很好的例子，若依在项目启动时，已经将我们可能使用到的所以字典，都存放到了vuex中，我们可以直接通过vuex调用字典值

this.$store.state.dict.dictTree

这个 dictTree 中存放着系统所有的字典，我们也可以看一下他的源码

getListAll().then(res => {// 获取所有信息console.log(res)if (res.code === 200) {const dictTree = {};res.data.forEach(i => {dictTree[i.dictType] = {}const obj = {};const arr = [];i.dictDataList.map(childDict => {obj[childDict.dictValue] = childDict.dictLabelarr.push({value:JSON.stringify(parseInt(childDict.dictValue))=='null'? childDict.dictValue:parseInt(childDict.dictValue),label: childDict.dictLabel})});dictTree[i.dictType] = {dictName: i.dictType,dictType: i.dictName,obj,arr}});commit('SET_DICT_TREE', dictTree)}})

其实也很简单，首先在系统中按照规范添加字典，在请求所有的字典后，遍历一次，通过 dictTree[i.dictType] = {} 规整好数据，其中包括了，obj格式和arr格式，完全满足我们的使用需求，由于他存在了vuex中其实就是一个一个的变量，我们使用时也是使用 dicData

type: 'select',
dicData: this.$store.state.dict.dictTree['字典名称']['arr'],

props

首先是一些公共的参数比如配置字典的显示值 label 和绑定值 value

props: {label: 'name',value: 'code'
},

默认是就是 label:label 和 value:value ,通常我们使用网络字典是需要自己配置一下这个参数

网络字典

有的使用我们需要通过接口去请求某些字典不能满足的数据

 dicUrl: 'xxxxxxxxxx请求地址'dicMethod:'post',dicQuery:{type: 2}

dicUrl 也是可以使用代理的比如

dicUrl: `${process.env.VUE_APP_BASE_API}/getDic`

process.env.VUE_APP_BASE_API为前缀 ‘/api’

但是这样请求可能会有一个问题，就使我们无法配置请求头，有一些限制，比如接口 401 问题，没有办法携带token。

直接请求字典

这时我们需要直接去请求数据，然后修改字典变量

option: {column: [{dicData: [],}]
}

定义好 option，去请求数据通过下标去访问 dicData 并修改值

created() {this.getDicData()
},
methods: {getDicData() {listRoles({ roleId: 2 }).then(res => {if (res.code === 200) {this.option.column[0].dicData.push(...res.rows)}})}
}

注：不能是用 = 直接赋值，页面是不会更新的，我们需要让vue知道我们已经修改了值，在这里我使用了（...）扩展运算符进行了一次深拷贝