Vue3使用hooks解决字典数据的显示问题
作者：A黄俊辉A
我们在使用 element-plus的时候,经常会使用一些字典数据, 在搜索框的时候,字典数数要使用 el-select el-option 来显示,但是经常会遇到字典数据的显示问题,所以本文给大家介绍了Vue3使用hooks解决字典数据的显示问题,需要的朋友可以参考下
我们在使用 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 定义的， 因为这样， 页面标签才会监测到数据的变化，作出响应变化， （最主要的原因， 还是因为数据的请求是异步的，有可能页面显示的时候还没有得到数据， 但是响应式的数据，就不会被异步来防碍了，大至是这个意思，细品一下）
到此这篇关于Vue3使用hooks解决字典数据的显示问题的文章就介绍到这了,更多相关Vue3 hooks字典数据显示问题内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！