大连网站策划,网站开发 团队构成,企业组网解决方案,百度分公司我们在使用 element-plus的时候#xff0c;经常会使用一些字典数据#xff0c; 在搜索框的时候#xff0c;字典数数要使用 el-select el-option 来显示#xff0c;当在table表格的时候#xff0c;我们通常记录的是 字典数据的id , 又要把它改变成 字典数据的 name 属性 因…我们在使用 element-plus的时候经常会使用一些字典数据 在搜索框的时候字典数数要使用 el-select el-option 来显示当在table表格的时候我们通常记录的是 字典数据的id , 又要把它改变成 字典数据的 name 属性 因为上面的位置有很多表都会使用的 所以我们在 vue3 中最好是写一个公共的方法 每个页面都可以随意使用 这里 我们就想到了使用 vue3中的 hooks
我们的字典的数据格式如下
hooks 文件的代码如下
import { getDictData } from ../../src/api/app //这里是字典列表的请求接口
import {ref,onMounted} from vueexport 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 propsource_fromel-select classw-[200px] stylewidth:200px v-modelqueryParams.source_from clearable placeholder客户来源el-option label全部 value/el-optionel-option v-for(item,index) in getDictDataFun(source_from) :keyindex :labelitem.name :valueparseInt(item.value)/el-option/el-select/el-form-item如果是table-column中使用el-table-column label渠道来源 propsource_fromtemplate v-slot:default { row }el-tag effectplain{{ getDictDataFun(source_from,row.source_from) }}/el-tag/template/el-table-column
//-------------以上就是用一个 hooks 解决了 表格查询框中的字典显示问题了注意 hooks中返回的数据一定是 响应式数据 ref reactive 定义的 因为这样 页面标签才会监测到数据的变化作出响应变化 最主要的原因 还是因为数据的请求是异步的有可能页面显示的时候还没有得到数据 但是响应式的数据就不会被异步来防碍了大至是这个意思细品一下
