当前位置：首页 > news >正文

vue3字典数据的显示问题（使用hooks解决）

news 2025/7/23 19:10:40

我们在使用 element-plus的时候，经常会使用一些字典数据，在搜索框的时候，字典数数要使用 el-select el-option 来显示，当在table表格的时候，我们通常记录的是字典数据的id , 又要把它改变成字典数据的 name 属性
在这里插入图片描述
因为上面的位置有很多表都会使用的，所以我们在 vue3 中最好是写一个公共的方法，每个页面都可以随意使用，这里，我们就想到了使用 vue3中的 hooks

我们的字典的数据格式如下
在这里插入图片描述

hooks 文件的代码如下：

import { getDictData } from '../../src/api/app'   //这里是字典列表的请求接口
import {ref,onMounted} from 'vue'export default function(){const dictDataCanUse = ref([]);   //注意， 这里要定义成响应式的数据，其它页才可以用，//getDictDataFun 接收两个参数，也可能是一个参数， 如果是只接收一个参数， 说明是要获取字典列表，给 el-select el-option 等来使用的，如果是两个参数， 则说明是给 table-column中的显示数据名称来使用的const getDictDataFun = (str,value = "")=>{  //注意这个地方不能使用 async 和 await ,因为这个函数是要导出去给 模板使用的， 而如果加了 async ，则返回的是一个 promise 函数， 页面中用不了let label = ref("");     if(Object.keys(dictDataCanUse.value).length == 0 || dictDataCanUse.value[str] == undefined){  第一次请求的时候 是没有值的dictDataCanUse.value[str] = [];  这里我们先的把数据赋成空数组，  不然后面的dictDataCanUse.value[str].find 这句会报错let res =  getDictData({  type: str}).then(res=>{dictDataCanUse.value = res;  //这里我们请求并更改了 dictDataCanUse})}if(value){ //如果有value ，我们得到label来返回数据let labelitem = dictDataCanUse.value[str].find(item=>{return item.id == value})label.value = labelitem.name?labelitem.name:"";}// 如果 value 不为空，则返回 label ,如果为空， 则返回字典数据return value ? label : dictDataCanUse.value[str];}return {getDictDataFun}  //把这个方法 export 出去
}

上面就是一个 hooks 的方法了

引入到要使用的页面去使用

import useDictDataCanUse from '@/hooks/useDictDataCanUse'
const { getDictDataFun } = useDictDataCanUse()//------------在template中的使用如果是 el-select 中使用<el-form-item prop="source_from"><el-select class="w-[200px]" style="width:200px" v-model="queryParams.source_from" clearable placeholder="客户来源"><el-option label="全部" value=""></el-option><el-option v-for="(item,index) in getDictDataFun('source_from')" :key="index" :label="item.name" :value="parseInt(item.value)"></el-option></el-select></el-form-item>如果是table-column中使用<el-table-column label="渠道来源" prop="source_from"><template v-slot:default ="{ row }"><el-tag effect="plain">{{ getDictDataFun('source_from',row.source_from) }}</el-tag></template></el-table-column>
//-------------

以上就是用一个 hooks 解决了，表格，查询框中的字典显示问题了，注意 hooks中返回的数据一定是响应式数据 ref reactive 定义的，因为这样，页面标签才会监测到数据的变化，作出响应变化，（最主要的原因，还是因为数据的请求是异步的，有可能页面显示的时候还没有得到数据，但是响应式的数据，就不会被异步来防碍了，大至是这个意思，细品一下）

查看全文

http://www.lryc.cn/news/500067.html