基于Element-UI的组件改造的树形选择器(树形下拉框)

前言:由于做项目需要一个树形选择器,项目用的也是element-ui框架,然而它自带的选择器组件没有树形选项,又不想引入其他的框架组件,于是自己利用el-select和el-tree改造了一个,感觉还挺好用的,就封装成了一个组件,如下图:

element-ui的el-select组件的选项只能是列表形式:

基于Element-UI的组件改造的树形选择器(树形下拉框)_第1张图片

 改造后的树形选择器:

基于Element-UI的组件改造的树形选择器(树形下拉框)_第2张图片

简介:此树形选择器组件是基于elment-ui框架的el-select和el-tree组件的基础上改造的,其解决了原el-select组件的选项列表不能是树形的问题,集合了前两个组件的属性和方法封装成了一个组件,引入即可使用。其实现了树形列表、默认展开、默认选中、清空选值等功能,基本上可以满足大部分选择器的使用需求。

主要代码

组合el-select和el-tree组件:

封装组件:

css样式:

查看demo

注意:此树形选择器要求的值(options)必须是树形对象数组,如你的值是扁平数据,需转换成树形数据。可参考js实现无限层级树形数据结构(创新算法)

------------------------------------------ 我是有底线的 -------------------------------------------

2019.05.01更新 --- 解决初始化时滚动条滚到底部的bug

2019.05.04更新 --- 解决默认值再次改变时页面没渲染的问题

你可能感兴趣的:(☛,Vue.js,☛,Element-UI,element-ui,el-select,树形,树形选择器,树形下拉框)