欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

VueTreeselect?參數options的數據轉換-參數normalizer解析

 更新時間：2022年07月26日 11:01:45   作者：暴走的大白羊  
這篇文章主要介紹了VueTreeselect?參數options的數據轉換-參數normalizer解析，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教

VueTreeselect 參數options的數據轉換-參數normalizer

VueTreeselect 控件： 

<template>
? <div>
? ? <treeselect v-model="value" :normalizer="normalizer" placeholder="請選擇..." :options="options" />
? </div>
</template>
  • options的值是個樹形結構的數組
options: [ {
? ? ? ? ? id: '1',
? ? ? ? ? name: 'a',
? ? ? ? ? children: [ {
? ? ? ? ? ? id: '11',
? ? ? ? ? ? name: 'aa',
? ? ? ? ? }, {
? ? ? ? ? ? id: '12',
? ? ? ? ? ? name: 'ab',
? ? ? ? ? } ],
? ? ? ? },?
? ? ? ? {
? ? ? ? ? id: '2',
? ? ? ? ? name: 'b',
? ? ? ? ? children: []
? ? ? ? } ],
  • normalizer屬性，是用于將options的值，轉換為符合vue-treeselect要求的數據格式

vue-treeselect中，即使您為children屬性分配一個空數組，依然會顯示有分支，這時就可以使用normalizer去掉children屬性：

normalizer(node){
? ? //去掉children=[]的children屬性
? ? if(node.children && !node.children.length){
? ? ? ? delete node.children;
? ? }
? ? return {
? ? ? ? id: node.id,
? ? ? ? //將name轉換成必填的label鍵
? ? ? ? label:node.name,
? ? ? ? children:node.children
? ? }
}

VueTreeselect 參數options的數據轉換解析

VueTreeselect 控件

? ? ? ? ? ? <Treeselect
? ? ? ? ? ? ? ? ? ? :options="options"
? ? ? ? ? ? ? ? ? ? :normalizer="normalizer"
? ? ? ? ? ? ? ? ? ? placeholder="請選擇..." ? ? ? ? ? ? ? ? ? ?
? ? ? ? ? ? ? ? ? ? v-model="addEventForm.parentId"/>

options的值是個樹形結構的數組，normalizer屬性，是用于轉換options的值的，把options的值，轉換為符合vue-treeselect要求的數據格式。

//后臺返回的數據如果和VueTreeselect要求的數據結構不同，需要進行轉換
normalizer(node){
?? ?//去掉children=[]的children屬性
?? ?if(node.children && !node.children.length){
?? ??? ?delete node.children;
?? ?}
?? ?return {
?? ??? ?id: node.id,
?? ??? ?label:node.name,
?? ??? ?children:node.children
?? ?}
}

以上為個人經驗，希望能給大家一個參考，也希望大家多多支持腳本之家?！　?/p>

相關文章

  • 關于pinia的簡單使用方式

    關于pinia的簡單使用方式

    這篇文章主要介紹了關于pinia的簡單使用方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
    2024-04-04
  • 一文詳細了解Vue?3.0中的onMounted和onUnmounted鉤子函數

    一文詳細了解Vue?3.0中的onMounted和onUnmounted鉤子函數

    Vue3.0引入了新的組件生命周期鉤子函數onMounted和onUnmounted,分別用于組件掛載后和卸載前的操作,這些鉤子函數為開發(fā)者提供了更多靈活性,文中通過代碼介紹的非常詳細,需要的朋友可以參考下
    2024-10-10
  • Vue 實現前進刷新后退不刷新的效果

    Vue 實現前進刷新后退不刷新的效果

    這篇文章主要介紹了Vue 實現前進刷新后退不刷新的效果,小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
    2019-06-06
  • Vue3?中的?readonly?特性及函數使用詳解

    Vue3?中的?readonly?特性及函數使用詳解

    readonly是Vue3中提供的一個新特性，用于將一個響應式對象變成只讀對象，這篇文章主要介紹了Vue3?中的?readonly?特性詳解,需要的朋友可以參考下
    2023-04-04
  • vue3.0中的watch偵聽器實例詳解

    vue3.0中的watch偵聽器實例詳解

    雖然計算屬性在大多數情況下更合適,但有時也需要一個自定義的偵聽器,這就是為什么Vue通過watch選項提供了一個更通用的方法,來響應數據的變化,這篇文章主要給大家介紹了關于vue3.0中watch偵聽器的相關資料,需要的朋友可以參考下
    2021-10-10
  • axios的攔截請求與響應方法

    axios的攔截請求與響應方法

    今天小編就為大家分享一篇axios的攔截請求與響應方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
    2018-08-08
  • Vue報錯ERR_OSSL_EVP_UNSUPPORTED解決方法

    Vue報錯ERR_OSSL_EVP_UNSUPPORTED解決方法

    Vue項目啟動時報錯ERR_OSSL_EVP_UNSUPPORTED,本文主要介紹了Vue報錯ERR_OSSL_EVP_UNSUPPORTED解決方法,具有一定的參考價值,感興趣的可以了解一下
    2024-08-08
  • Vue Element前端應用開發(fā)之整合ABP框架的前端登錄

    Vue Element前端應用開發(fā)之整合ABP框架的前端登錄

    VUE+Element 前端是一個純粹的前端處理，前面介紹了很多都是Vue+Element開發(fā)的基礎，從本章隨筆開始，就需要進入深水區(qū)了，需要結合ABP框架使用
    2021-05-05
  • Vue 設置axios請求格式為form-data的操作步驟

    Vue 設置axios請求格式為form-data的操作步驟

    今天小編就為大家分享一篇Vue 設置axios請求格式為form-data的操作步驟，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
    2019-10-10
  • vue如何解決sass-loader的版本過高導致的編譯錯誤

    vue如何解決sass-loader的版本過高導致的編譯錯誤

    這篇文章主要介紹了vue如何解決sass-loader的版本過高導致的編譯錯誤問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
    2024-06-06

最新評論