treeSelect树形选择器使用
vue-treeselect树形选择器treeSelect是Vue的一个插件,用于进行一个树形选择的场景,这个组件可以满足大部分场合的使用。官方文档1.安装npm install --save @riophae/vue-treeselect安装完成之后可以在package.json文件中看到2.引用,在需要使用的组件上引用3使用关于组件属性,大家可以去官方文档看一下,这里着重说一下normailz
·
vue-treeselect树形选择器
treeSelect是Vue的一个插件,用于进行一个树形选择的场景,这个组件可以满足大部分场合的使用。
官方文档
1.安装
npm install --save @riophae/vue-treeselect
安装完成之后可以在package.json文件中看到
2.引用,在需要使用的组件上引用
3使用
关于组件属性,大家可以去官方文档看一下,这里着重说一下normailzer,normailzer的意思就是是规范化,意思就是使你的数据格式规范化
treeselect定义的格式是如下所示,包含id,label,children三个属性
options: [ {
id: 'a',
label: 'a',
children: [ {
id: 'aa',
label: 'aa'
}, {
id: 'ab',
label: 'ab'
} ]
}, {
id: 'b',
label: 'b'
}, {
id: 'c',
label: 'c'
} ]
但是我们的后端小伙伴不一定是按照这三个属性返回的,加入后端返回的数据格式如下
options: [{
label: 'a',
value: 'aa',
children: [{
label: 'b',
value: 'bb'
}]
}]
可以看到,我们的label应该对应id,value应该对应label才会被treeselect认识
所以我们就要用到normailzer属性了
今天开发运到的一个问题,现在记录一下,供大家学习参考,刚实习,技术有点菜,在工作中往往因为一点小问题确浪费一大堆时间,现在开始多做笔记,让自己能够越来越好,加油,欧力给
更多推荐
已为社区贡献1条内容
所有评论(0)