这篇文章将为大家详细讲解有关如何基于Element组件改造树形选择器,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。
成都创新互联专业为企业提供抚州网站建设、抚州做网站、抚州网站设计、抚州网站制作等企业网站建设、网页设计与制作、抚州企业网站模板建站服务,十年抚州做网站经验,不只是建网站,更提供有价值的思路和整体网络服务。
前言:由于做项目需要一个树形选择器,项目用的也是element-ui框架,然而它自带的选择器组件没有树形选项,又不想引入其他的框架组件,于是自己利用el-select和el-tree改造了一个,感觉还挺好用的,就封装成了一个组件,如下图:
element-ui的el-select组件的选项只能是列表形式:
改造后的树形选择器:
简介:此树形选择器组件是基于elment-ui框架的el-select和el-tree组件的基础上改造的,其解决了原el-select组件的选项列表不能是树形的问题,集合了前两个组件的属性和方法封装成了一个组件,引入即可使用。其实现了树形列表、默认展开、默认选中、清空选值等功能,基本上可以满足大部分选择器的使用需求。
主要代码
组合el-select和el-tree组件:
封装组件:
css样式:
关于“如何基于Element组件改造树形选择器”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,使各位可以学到更多知识,如果觉得文章不错,请把它分享出去让更多的人看到。