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

最新推荐文章于 2024-03-18 12:22:37 发布

paidaboluo

最新推荐文章于 2024-03-18 12:22:37 发布

阅读量4.3k

点赞数 3

文章标签：前端 java 开发语言

本文链接：https://blog.csdn.net/paidaboluo/article/details/126490623

版权

本文介绍了在前端项目中如何管理和使用字典数据，包括本地静态字典和系统维护的动态字典。通过若依框架的例子展示了如何从vuex中获取系统字典，并在avue表格中应用。同时，讨论了网络字典的请求方式，如何处理字典数据以适应不同场景，并解决请求头问题。最后，提到了直接请求字典数据的方法及其注意事项。

摘要由CSDN通过智能技术生成

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

本地字典

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

// html
<avue-crud
  ref="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.dictLabel
              arr.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知道我们已经修改了值，在这里我使用了（...）扩展运算符进行了一次深拷贝