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)文章
這篇文章主要給大家介紹了利用vscode編寫vue簡(jiǎn)單配置的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面跟著小編一起來(lái)學(xué)習(xí)學(xué)習(xí)吧。2017-06-06
詳解Vue項(xiàng)目部署遇到的問(wèn)題及解決方案
這篇文章主要介紹了詳解Vue項(xiàng)目部署遇到的問(wèn)題及解決方案，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-01-01
這篇文章主要介紹了Vue的土著指令和自定義指令的用法講解 ,需要的朋友可以參考下2018-02-02
使用element-ui的Pagination分頁(yè)的注意事項(xiàng)及說(shuō)明
這篇文章主要介紹了使用element-ui的Pagination分頁(yè)的注意事項(xiàng)及說(shuō)明,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-02-02
Vue3配置vite.config.js解決跨域問(wèn)題的方法
跨域一般出現(xiàn)在開(kāi)發(fā)階段,由于線上環(huán)境前端代碼被打包成了靜態(tài)資源,因而不會(huì)出現(xiàn)跨域問(wèn)題,這篇文章主要給大家介紹了關(guān)于Vue3配置vite.config.js解決跨域問(wèn)題的相關(guān)資料,需要的朋友可以參考下2024-07-07
這篇文章主要為大家介紹了Vue3組件間傳值避坑方法指南，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-03-03
Computed 計(jì)算屬性是 Vue 中常用的一個(gè)功能，本篇文章主要介紹了Vue Computed 計(jì)算屬性原理，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-05-05
這篇文章主要介紹了vue3.0-monaco組件封裝存檔代碼解析,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧2024-03-03
詳解Vue中如何實(shí)現(xiàn)圖片處理與濾鏡效果
Vue.js作為一個(gè)靈活的JavaScript框架,可以很容易地與圖像處理庫(kù)和濾鏡效果庫(kù)集成,以實(shí)現(xiàn)各種圖像處理需求,下面我們就來(lái)學(xué)習(xí)一下vue是如何實(shí)現(xiàn)圖片處理與濾鏡效果的吧2023-10-10
vue跳轉(zhuǎn)時(shí)根據(jù)url錨點(diǎn)(#xxx)實(shí)現(xiàn)頁(yè)面內(nèi)容定位的方法
本前端仔在做頁(yè)面跳轉(zhuǎn)的時(shí)候,被要求跳轉(zhuǎn)到頁(yè)面時(shí)候,把對(duì)應(yīng)部分的內(nèi)容自動(dòng)滾動(dòng)到頂部,我一開(kāi)始想到的就是根據(jù)錨點(diǎn)<a href="#xxid">進(jìn)行處理,但是發(fā)現(xiàn)不太好實(shí)現(xiàn),于是便自己研究了一個(gè)比較取巧的方法,需要的朋友可以參考下2024-04-04