我们在使用 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 定义的, 因为这样, 页面标签才会监测到数据的变化,作出响应变化, (最主要的原因, 还是因为数据的请求是异步的,有可能页面显示的时候还没有得到数据, 但是响应式的数据,就不会被异步来防碍了,大至是这个意思,细品一下)