189 8069 5689

如何基于Element组件改造树形选择器

这篇文章将为大家详细讲解有关如何基于Element组件改造树形选择器,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。

成都创新互联专业为企业提供抚州网站建设、抚州做网站、抚州网站设计、抚州网站制作等企业网站建设、网页设计与制作、抚州企业网站模板建站服务,十年抚州做网站经验,不只是建网站,更提供有价值的思路和整体网络服务。

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

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

如何基于Element组件改造树形选择器

 改造后的树形选择器:

如何基于Element组件改造树形选择器

简介:此树形选择器组件是基于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;
 }
 ul li >>>.el-tree .el-tree-node__content{
  height:auto;
  padding: 0 20px;
 }
 .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;
 }

关于“如何基于Element组件改造树形选择器”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,使各位可以学到更多知识,如果觉得文章不错,请把它分享出去让更多的人看到。


网站栏目:如何基于Element组件改造树形选择器
文章位置:http://cdxtjz.cn/article/gpcohj.html

其他资讯