VueTreeselect参数options如何改写normalizer以生成长尾词？

本文共计396个文字，预计阅读时间需要2分钟。

目录：VueTreeselect 参数 options 数据转换 - 参数 normalizer 解析 - VueTreeselect 参数 options 数据转换 - 参数 normalizer 解析 - VueTreeselect 控件：template div treeselect v-model=

VueTreeselect 参数 options 数据转换 - 参数 normalizer 解析VueTreeselect 控件：template div treeselect v-model=

目录

• VueTreeselect 参数options的数据转换-参数normalizer
• VueTreeselect 参数options的数据转换解析

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     } }

以上为个人经验，希望能给大家一个参考，也希望大家多多支持易盾网络。