vue的树形(下拉框)选择框组件总结
前言
在前端使用ElementUI
开发中,可能会遇到需要展示选择树状数据的表单组件,但是在ElementUI
中,并没有提供能够处理树状数据选择的select
选择框组件。在开发中遇到类似的问题,为此也作出了相关的方案总结,方便大家根据自己的使用场景去进行选择使用。主要是针对三种方案的总结,接下来给大家讲述一下!
一、vue + element 树形选择框实现
由于做项目需要一个树形选择器,项目用的也是element-ui
框架,然而它自带的选择器组件没有树形选项,又不想引入其他的框架组件,于是利用el-select
和el-tree
改造了一个,感觉还挺好用的,就封装成了一个组件,如下图:
element-ui
的el-select
组件的选项只能是列表形式:
改造后的树形选择器:
此树形选择器组件是基于elment-ui
框架的el-select
和el-tree
组件的基础上改造的,其解决了原el-select组件的选项列表不能是树形的问题,集合了前两个组件的属性和方法封装成了一个组件,引入即可使用。其实现了树形列表、默认展开、默认选中、清空选值等功能,基本上可以满足大部分选择器的使用需求。
主要代码
组合el-select和el-tree组件 => SelectTree.vue:
1 | <template> |
封装组件:
1 | <script> |
css样式(可以根据自己项目的需求进行自定义):
1 | <style scoped> |
使用Demo:
1 | <template> |
注意:此树形选择器要求的值(options)必须是树形对象数组,如你的值是扁平数据,需转换成树形数据。
二、使用element-plus官方已推出的TreeSelect树形选择器
element-plus官方TreeSelect组件地址:https://element-plus.gitee.io/zh-CN/component/tree-select.html
使用方法
1、选择一个你喜欢的包管理器
1 | NPM |
2、手动导入TreeSelect树形选择器
1 | <template> |
3、效果图
三、使用第三方组件vue-treeselect
vue-treeselect是一个开源的组件,研究过后发现还是很方便的,但是官网全英文,很难懂,网上其他资源也有限,不是很透彻,下面大家用最简单的方式讲一下基本的用法,解决你80%的需求应该是没问题的。
官方地址:https://vue-treeselect.js.org/
git地址:https://github.com/riophae/vue-treeselect
效果图:
1、vue-treeselect是一个树形的下拉菜单,至于到底有多少节点那就要看你的数据源有多少层了,挺方便的。下面这个这个不用多说吧,下载依赖
1 | npm install --save @riophae/vue-treeselect |
2、引入组件和样式
至于是全局引入还是单页面引入那就看你自己需求了,我这里列举单页面引入
1 | import Treeselect from "@riophae/vue-treeselect"; |
3、使用
1 | <treeselect v-model="form.parentId" :options="deptOptions" :normalizer="normalizer" placeholder="选择上级目录" @select="change(node)"/> |
v-model
:双向数据绑定,不用多说
options
:树形下拉菜单选项的数据源
normalizer
:自定义展示结构字段,说白了把自己的名字换成树规定的名字
select
:选择事件
首先看一段数据结构的代码:
1 | data: [{ |
首先说一下这个normalizer这个属性,看着花里胡哨,其实很好理解:
1 | normalizer(node) { |
先把你数据里所有的children为空的节点都删掉,然后规定三个字段:id,label,children来更方便的操作数据;
参数node就是每个节点,通俗说就是每隔子项数据;
id就是你v-model获取到的值,就相当于opiton里的value;
label就是你要展示的值,让用户看到的东西,就相当于option里的label;
children也不用说了,你数据的子节点;
说的在在在通俗点,有可能你的后端工程师给你的数据id叫ids,label叫value,children叫content,但是树只认识id,label,children,那你给他对应上就行了,就这么简单。
下面就是选择事件了,这个好理解,参数node是当前的节点,你可以得到他做你想做的操作
1 | change(node){ |
其他的参数、事件以及插槽的应用大家可以自行去查看官方api,相信能够解决大家项目中的大部分的问题。