前言：由于做项目需要一个树形选择器，项目用的也是element-ui框架，然而它自带的选择器组件没有树形选项，又不想引入其他的框架组件，于是自己利用el-select和el-tree改造了一个，感觉还挺好用的，就封装成了一个组件，如下图：
element-ui的el-select组件的选项只能是列表形式：
改造后的树形选择器：
简介：此树形选择器组件是基于elment-ui框架的el-select和el-tree组件的基础上改造的，其解决了原el-select组件的选项列表不能是树形的问题，集合了前两个组件的属性和方法封装成了一个组件，引入即可使用。其实现了树形列表、默认展开、默认选中、清空选值等功能，基本上可以满足大部分选择器的使用需求。
主要代码
组合el-select和el-tree组件：
封装组件：
css样式：
查看demo
注意：此树形选择器要求的值（options）必须是树形对象数组，如你的值是扁平数据，需转换成树形数据。可参考js实现无限层级树形数据结构（创新算法）
—————————————— 我是有底线的 ——————————————-
2019.05.01更新 — 解决初始化时滚动条滚到底部的bug
2019.05.04更新 — 解决默认值再次改变时页面没渲染的问题
2022.05.18更新 — 该组件已停止迭代，element-plus官方已推出了TreeSelect 树形选择
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请联系我们举报，一经查实，本站将立刻删除。
发布者：全栈程序员-站长，转载请注明出处：https://javaforall.net/201039.html原文链接：https://javaforall.net
