treeSelect树形选择器使用

最新推荐文章于 2024-09-14 08:06:34 发布

小白搬运

最新推荐文章于 2024-09-14 08:06:34 发布

阅读量3w

点赞数 17

分类专栏：前端 elementui vue 文章标签： vue 前端 elementui

本文链接：https://blog.csdn.net/weixin_41723305/article/details/109459922

版权

前端同时被 3 个专栏收录

18 篇文章 0 订阅

订阅专栏

vue

10 篇文章 0 订阅

订阅专栏

elementui

1 篇文章 0 订阅

订阅专栏

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属性了
在这里插入图片描述
今天开发运到的一个问题，现在记录一下，供大家学习参考，刚实习，技术有点菜，在工作中往往因为一点小问题确浪费一大堆时间，现在开始多做笔记，让自己能够越来越好，加油，欧力给