快捷導(dǎo)航

VueTreeselect?參數(shù)options的數(shù)據(jù)轉(zhuǎn)換-參數(shù)normalizer解析

更新時間：2022年07月26日 11:01:45 作者：暴走的大白羊

這篇文章主要介紹了VueTreeselect?參數(shù)options的數(shù)據(jù)轉(zhuǎn)換-參數(shù)normalizer解析，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教

VueTreeselect 參數(shù)options的數(shù)據(jù)轉(zhuǎn)換-參數(shù)normalizer

VueTreeselect 控件：

<template>
? <div>
? ? <treeselect v-model="value" :normalizer="normalizer" placeholder="請選擇..." :options="options" />
? </div>
</template>

options的值是個樹形結(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屬性分配一個空數(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="請選擇..." ? ? ? ? ? ? ? ? ? ?
? ? ? ? ? ? ? ? ? ? v-model="addEventForm.parentId"/>

options的值是個樹形結(jié)構(gòu)的數(shù)組，normalizer屬性，是用于轉(zhuǎn)換options的值的，把options的值，轉(zhuǎn)換為符合vue-treeselect要求的數(shù)據(jù)格式。

//后臺返回的數(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
?? ?}
}

以上為個人經(jīng)驗(yàn)，希望能給大家一個參考，也希望大家多多支持腳本之家?！　?/p>

您可能感興趣的文章:

相關(guān)文章

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