快捷導(dǎo)航

Vue3使用hooks解決字典數(shù)據(jù)的顯示問(wèn)題

更新時(shí)間：2024年12月09日 08:37:50 作者：A黃俊輝A

我們?cè)谑褂?nbsp;element-plus的時(shí)候,經(jīng)常會(huì)使用一些字典數(shù)據(jù), 在搜索框的時(shí)候,字典數(shù)數(shù)要使用 el-select el-option 來(lái)顯示,但是經(jīng)常會(huì)遇到字典數(shù)據(jù)的顯示問(wèn)題,所以本文給大家介紹了Vue3使用hooks解決字典數(shù)據(jù)的顯示問(wèn)題,需要的朋友可以參考下

我們?cè)谑褂?element-plus的時(shí)候，經(jīng)常會(huì)使用一些字典數(shù)據(jù)，在搜索框的時(shí)候，字典數(shù)數(shù)要使用 el-select el-option 來(lái)顯示，當(dāng)在table表格的時(shí)候，我們通常記錄的是字典數(shù)據(jù)的id , 又要把它改變成字典數(shù)據(jù)的 name 屬性

因?yàn)樯厦娴奈恢糜泻芏啾矶紩?huì)使用的，所以我們?cè)?vue3 中最好是寫(xiě)一個(gè)公共的方法，每個(gè)頁(yè)面都可以隨意使用，這里，我們就想到了使用 vue3中的 hooks

我們的字典的數(shù)據(jù)格式如下

hooks 文件的代碼如下：

import { getDictData } from '../../src/api/app'   //這里是字典列表的請(qǐng)求接口
import {ref,onMounted} from 'vue'

export default function(){
    const dictDataCanUse = ref([]);   //注意， 這里要定義成響應(yīng)式的數(shù)據(jù)，其它頁(yè)才可以用，

	//getDictDataFun 接收兩個(gè)參數(shù)，也可能是一個(gè)參數(shù)， 如果是只接收一個(gè)參數(shù)， 說(shuō)明是要獲取字典列表，給 el-select el-option 等來(lái)使用的，如果是兩個(gè)參數(shù)， 則說(shuō)明是給 table-column中的顯示數(shù)據(jù)名稱(chēng)來(lái)使用的
    const getDictDataFun = (str,value = "")=>{  //注意這個(gè)地方不能使用 async 和 await ,因?yàn)檫@個(gè)函數(shù)是要導(dǎo)出去給 模板使用的， 而如果加了 async ，則返回的是一個(gè) promise 函數(shù)， 頁(yè)面中用不了
        let label = ref("");     
        if(Object.keys(dictDataCanUse.value).length == 0 || dictDataCanUse.value[str] == undefined){  第一次請(qǐng)求的時(shí)候 是沒(méi)有值的
            dictDataCanUse.value[str] = [];  這里我們先的把數(shù)據(jù)賦成空數(shù)組，  不然后面的dictDataCanUse.value[str].find 這句會(huì)報(bào)錯(cuò)
            let res =  getDictData({  
                type: str
            }).then(res=>{
                dictDataCanUse.value = res;  //這里我們請(qǐng)求并更改了 dictDataCanUse
            })
        }
        if(value){ //如果有value ，我們得到label來(lái)返回?cái)?shù)據(jù)
            let labelitem = dictDataCanUse.value[str].find(item=>{
                return item.id == value
            })
            label.value = labelitem.name?labelitem.name:"";
        }
		// 如果 value 不為空，則返回 label ,如果為空， 則返回字典數(shù)據(jù)
        return value ? label : dictDataCanUse.value[str];
    }
    return {getDictDataFun}  //把這個(gè)方法 export 出去
}

上面就是一個(gè) hooks 的方法了

引入到要使用的頁(yè)面去使用

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="客戶(hù)來(lái)源">
           <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="渠道來(lái)源" prop="source_from">
                        <template v-slot:default ="{ row }">
                            <el-tag effect="plain">{{ getDictDataFun('source_from',row.source_from) }}</el-tag>
                        </template>
                    </el-table-column>
//-------------

以上就是用一個(gè) hooks 解決了，表格，查詢(xún)框中的字典顯示問(wèn)題了，注意 hooks中返回的數(shù)據(jù)一定是響應(yīng)式數(shù)據(jù) ref reactive 定義的，因?yàn)檫@樣，頁(yè)面標(biāo)簽才會(huì)監(jiān)測(cè)到數(shù)據(jù)的變化，作出響應(yīng)變化，（最主要的原因，還是因?yàn)閿?shù)據(jù)的請(qǐng)求是異步的，有可能頁(yè)面顯示的時(shí)候還沒(méi)有得到數(shù)據(jù)，但是響應(yīng)式的數(shù)據(jù)，就不會(huì)被異步來(lái)防礙了，大至是這個(gè)意思，細(xì)品一下）

到此這篇關(guān)于Vue3使用hooks解決字典數(shù)據(jù)的顯示問(wèn)題的文章就介紹到這了,更多相關(guān)Vue3 hooks字典數(shù)據(jù)顯示問(wèn)題內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: