VueTreeselect?參數(shù)options的數(shù)據(jù)轉(zhuǎn)換-參數(shù)normalizer解析
更新時(shí)間：2022年07月26日 11:01:45 作者：暴走的大白羊
這篇文章主要介紹了VueTreeselect?參數(shù)options的數(shù)據(jù)轉(zhuǎn)換-參數(shù)normalizer解析，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
VueTreeselect 參數(shù)options的數(shù)據(jù)轉(zhuǎn)換-參數(shù)normalizer
VueTreeselect 控件：
<template> ? <div> ? ? <treeselect v-model="value" :normalizer="normalizer" placeholder="請(qǐng)選擇..." :options="options" /> ? </div> </template>
options的值是個(gè)樹(shù)形結(jié)構(gòu)的數(shù)組
options: [ {
? ? ? ? ? id: '1',
? ? ? ? ? name: 'a',
? ? ? ? ? children: [ {
? ? ? ? ? ? id: '11',
? ? ? ? ? ? name: 'aa',
? ? ? ? ? }, {
? ? ? ? ? ? id: '12',
? ? ? ? ? ? name: 'ab',
? ? ? ? ? } ],
? ? ? ? },?
? ? ? ? {
? ? ? ? ? id: '2',
? ? ? ? ? name: 'b',
? ? ? ? ? children: []
? ? ? ? } ],normalizer屬性，是用于將options的值，轉(zhuǎn)換為符合vue-treeselect要求的數(shù)據(jù)格式
vue-treeselect中，即使您為children屬性分配一個(gè)空數(shù)組，依然會(huì)顯示有分支，這時(shí)就可以使用normalizer去掉children屬性：
normalizer(node){
? ? //去掉children=[]的children屬性
? ? if(node.children && !node.children.length){
? ? ? ? delete node.children;
? ? }
? ? return {
? ? ? ? id: node.id,
? ? ? ? //將name轉(zhuǎn)換成必填的label鍵
? ? ? ? label:node.name,
? ? ? ? children:node.children
? ? }
}VueTreeselect 參數(shù)options的數(shù)據(jù)轉(zhuǎn)換解析
VueTreeselect 控件
? ? ? ? ? ? <Treeselect ? ? ? ? ? ? ? ? ? ? :options="options" ? ? ? ? ? ? ? ? ? ? :normalizer="normalizer" ? ? ? ? ? ? ? ? ? ? placeholder="請(qǐng)選擇..." ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? v-model="addEventForm.parentId"/>
options的值是個(gè)樹(shù)形結(jié)構(gòu)的數(shù)組，normalizer屬性，是用于轉(zhuǎn)換options的值的，把options的值，轉(zhuǎn)換為符合vue-treeselect要求的數(shù)據(jù)格式。
//后臺(tái)返回的數(shù)據(jù)如果和VueTreeselect要求的數(shù)據(jù)結(jié)構(gòu)不同，需要進(jìn)行轉(zhuǎn)換
normalizer(node){
?? ?//去掉children=[]的children屬性
?? ?if(node.children && !node.children.length){
?? ??? ?delete node.children;
?? ?}
?? ?return {
?? ??? ?id: node.id,
?? ??? ?label:node.name,
?? ??? ?children:node.children
?? ?}
}以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家?！ ?/p>
相關(guān)文章
這篇文章主要介紹了關(guān)于pinia的簡(jiǎn)單使用方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-04-04
一文詳細(xì)了解Vue?3.0中的onMounted和onUnmounted鉤子函數(shù)
Vue3.0引入了新的組件生命周期鉤子函數(shù)onMounted和onUnmounted,分別用于組件掛載后和卸載前的操作,這些鉤子函數(shù)為開(kāi)發(fā)者提供了更多靈活性,文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下2024-10-10
Vue 實(shí)現(xiàn)前進(jìn)刷新后退不刷新的效果
這篇文章主要介紹了Vue 實(shí)現(xiàn)前進(jìn)刷新后退不刷新的效果,小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2019-06-06
Vue3?中的?readonly?特性及函數(shù)使用詳解
readonly是Vue3中提供的一個(gè)新特性，用于將一個(gè)響應(yīng)式對(duì)象變成只讀對(duì)象，這篇文章主要介紹了Vue3?中的?readonly?特性詳解,需要的朋友可以參考下2023-04-04
vue3.0中的watch偵聽(tīng)器實(shí)例詳解
雖然計(jì)算屬性在大多數(shù)情況下更合適,但有時(shí)也需要一個(gè)自定義的偵聽(tīng)器,這就是為什么Vue通過(guò)watch選項(xiàng)提供了一個(gè)更通用的方法,來(lái)響應(yīng)數(shù)據(jù)的變化,這篇文章主要給大家介紹了關(guān)于vue3.0中watch偵聽(tīng)器的相關(guān)資料,需要的朋友可以參考下2021-10-10
今天小編就為大家分享一篇axios的攔截請(qǐng)求與響應(yīng)方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-08-08
Vue報(bào)錯(cuò)ERR_OSSL_EVP_UNSUPPORTED解決方法
Vue項(xiàng)目啟動(dòng)時(shí)報(bào)錯(cuò)ERR_OSSL_EVP_UNSUPPORTED,本文主要介紹了Vue報(bào)錯(cuò)ERR_OSSL_EVP_UNSUPPORTED解決方法,具有一定的參考價(jià)值,感興趣的可以了解一下2024-08-08
Vue Element前端應(yīng)用開(kāi)發(fā)之整合ABP框架的前端登錄
VUE+Element 前端是一個(gè)純粹的前端處理，前面介紹了很多都是Vue+Element開(kāi)發(fā)的基礎(chǔ)，從本章隨筆開(kāi)始，就需要進(jìn)入深水區(qū)了，需要結(jié)合ABP框架使用2021-05-05
Vue 設(shè)置axios請(qǐng)求格式為form-data的操作步驟
今天小編就為大家分享一篇Vue 設(shè)置axios請(qǐng)求格式為form-data的操作步驟，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-10-10
vue如何解決sass-loader的版本過(guò)高導(dǎo)致的編譯錯(cuò)誤
這篇文章主要介紹了vue如何解決sass-loader的版本過(guò)高導(dǎo)致的編譯錯(cuò)誤問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-06-06