VueTreeselect 参数options的数据转换-参数normalizer解析
更新时间:2022年7月26日 13:42 点击:430 作者:暴走的大白羊
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 } }
以上为个人经验,希望能给大家一个参考,也希望大家多多支持猪先飞。
原文出处:https://blog.csdn.net/qq_28449701/article/details/104019727
相关文章
mysql unique option prefix myisam_recover instead of myisam-recover-options的解决方法
Using unique option prefix myisam_recover instead of myisam-recover-options is deprecated and will be removed in a future release. Please use the full name instead...2016-05-20- 这篇文章主要介绍了.Net Core 中选项Options的具体实现,文中运用大量代码对相关知识详细介绍,感兴趣的小伙伴可以参考一下这篇文章,希望对你有所帮助...2021-09-22
Vue中的this.$options.data()和this.$data用法说明
这篇文章主要介绍了Vue中的this.$options.data()和this.$data用法说明,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-07-27解读ASP.NET 5 & MVC6系列教程(15):MvcOptions配置
这篇文章主要介绍了ASP.NET 5 MVC6中MvcOptions配置方法,需要的朋友可以参考下...2021-09-22- 本文主要简单介绍RegexOptions各种选项的作用,并介绍如何组合使用,为初学者解除一些疑惑。...2020-06-25
详解ASP.NET Core3.0 配置的Options模式
这篇文章主要介绍了详解ASP.NET Core3.0 配置的Options模式,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2021-09-22- 这篇文章主要介绍了如何使用.NET Core 选项模式,文中讲解非常详细,代码帮助大家更好的理解和学习,感兴趣的朋友可以了解下...2021-09-22
VueTreeselect 参数options的数据转换-参数normalizer解析
这篇文章主要介绍了VueTreeselect 参数options的数据转换-参数normalizer解析,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教...2022-07-26