VueTreeselect 参数options的数据转换-参数normalizer解析
更新时间:2022年07月26日 11:01:45 作者:暴走的大白羊
这篇文章主要介绍了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
}
}以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。
相关文章
使用element-ui的Pagination分页的注意事项及说明
这篇文章主要介绍了使用element-ui的Pagination分页的注意事项及说明,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-02-02
vue跳转时根据url锚点(#xxx)实现页面内容定位的方法
本前端仔在做页面跳转的时候,被要求跳转到页面时候,把对应部分的内容自动滚动到顶部,我一开始想到的就是根据锚点<a href="#xxid">进行处理,但是发现不太好实现,于是便自己研究了一个比较取巧的方法,需要的朋友可以参考下2024-04-04


最新评论