微客导航 » 文章资讯 » 基于Element的组件改造的树形选择器(树形下拉框)

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

2023-07-31 12:26:04 161

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

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

改造后的树形选择器：

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

主要代码

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

封装组件：

css样式：


.el-scrollbar.el-scrollbar__view.el-select-dropdown__item{
height:auto;
max-height:274px;
padding:0;
overflow:hidden;
overflow-y:auto;
}
.el-select-dropdown__item.selected{
font-weight:normal;
}
ulli>>>.el-tree.el-tree-node__content{
height:auto;
padding:020px;
}
.el-tree-node__label{
font-weight:normal;
}
.el-tree>>>.is-current.el-tree-node__label{
color:#409EFF;
font-weight:700;
}
.el-tree>>>.is-current.el-tree-node__children.el-tree-node__label{
color:#606266;
font-weight:normal;
}

查看demo

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

到此这篇关于基于Element的组件改造的树形选择器(树形下拉框)的文章就介绍到这了,更多相关Element树形选择器内容请搜索毛票票以前的文章或继续浏览下面的相关文章希望大家以后多多支持毛票票！

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

返回顶部
3162201930
czq8825@qq.com

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

热门推荐

随机推荐