快捷導(dǎo)航

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

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

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

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

因為上面的位置有很多表都會使用的，所以我們在 vue3 中最好是寫一個公共的方法，每個頁面都可以隨意使用，這里，我們就想到了使用 vue3中的 hooks

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

hooks 文件的代碼如下：

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

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

	//getDictDataFun 接收兩個參數(shù)，也可能是一個參數(shù)， 如果是只接收一個參數(shù)， 說明是要獲取字典列表，給 el-select el-option 等來使用的，如果是兩個參數(shù)， 則說明是給 table-column中的顯示數(shù)據(jù)名稱來使用的
    const getDictDataFun = (str,value = "")=>{  //注意這個地方不能使用 async 和 await ,因為這個函數(shù)是要導(dǎo)出去給 模板使用的， 而如果加了 async ，則返回的是一個 promise 函數(shù)， 頁面中用不了
        let label = ref("");     
        if(Object.keys(dictDataCanUse.value).length == 0 || dictDataCanUse.value[str] == undefined){  第一次請求的時候 是沒有值的
            dictDataCanUse.value[str] = [];  這里我們先的把數(shù)據(jù)賦成空數(shù)組，  不然后面的dictDataCanUse.value[str].find 這句會報錯
            let res =  getDictData({  
                type: str
            }).then(res=>{
                dictDataCanUse.value = res;  //這里我們請求并更改了 dictDataCanUse
            })
        }
        if(value){ //如果有value ，我們得到label來返回數(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}  //把這個方法 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中返回的數(shù)據(jù)一定是響應(yīng)式數(shù)據(jù) ref reactive 定義的，因為這樣，頁面標(biāo)簽才會監(jiān)測到數(shù)據(jù)的變化，作出響應(yīng)變化，（最主要的原因，還是因為數(shù)據(jù)的請求是異步的，有可能頁面顯示的時候還沒有得到數(shù)據(jù)，但是響應(yīng)式的數(shù)據(jù)，就不會被異步來防礙了，大至是這個意思，細(xì)品一下）

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

您可能感興趣的文章: