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 } }
以上为个人经验,希望能给大家一个参考,也希望大家多多支持阿兔在线工具。