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

目录 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
?? ?}
}

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

查看更多关于VueTreeselect 参数options的数据转换-参数normalizer解析的详细内容...