VueTreeselect 参数options的数据转换-参数normalizer解析
作者：暴走的大白羊
这篇文章主要介绍了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
}
}以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。