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


Posted in Javascript onFebruary 27, 2020

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

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

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

 改造后的树形选择器:

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

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

主要代码

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

<template>
 <el-select :value="valueTitle" :clearable="clearable" @clear="clearHandle">
  <el-option :value="valueTitle" :label="valueTitle">
   <el-tree id="tree-option"
    ref="selectTree"
    :accordion="accordion"
    :data="options"
    :props="props"
    :node-key="props.value"  
    :default-expanded-keys="defaultExpandedKey"
    @node-click="handleNodeClick">
   </el-tree>
  </el-option>
 </el-select>
</template>

封装组件:

<script>
export default {
 name: "el-tree-select",
 props:{
  /* 配置项 */
  props:{
   type: Object,
   default:()=>{
    return {
     value:'id',       // ID字段名
     label: 'title',     // 显示名称
     children: 'children'  // 子级字段名
    }
   }
  },
  /* 选项列表数据(树形结构的对象数组) */
  options:{
   type: Array,    
   default: ()=>{ return [] }
  },
  /* 初始值 */
  value:{
   type: Number,
   default: ()=>{ return null }
  },
  /* 可清空选项 */
  clearable:{
   type:Boolean,
   default:()=>{ return true }
  },
  /* 自动收起 */
  accordion:{
   type:Boolean,
   default:()=>{ return false }
  },
 },
 data() {
  return {
   valueId:this.value,  // 初始值
   valueTitle:'',
   defaultExpandedKey:[]  
  }
 },
 mounted(){
  this.initHandle()
 },
 methods: {
  // 初始化值
  initHandle(){
   if(this.valueId){
    this.valueTitle = this.$refs.selectTree.getNode(this.valueId).data[this.props.label]   // 初始化显示
    this.$refs.selectTree.setCurrentKey(this.valueId)    // 设置默认选中
    this.defaultExpandedKey = [this.valueId]   // 设置默认展开
   } 
   this.$nextTick(()=>{
    let scrollWrap = document.querySelectorAll('.el-scrollbar .el-select-dropdown__wrap')[0]
    let scrollBar = document.querySelectorAll('.el-scrollbar .el-scrollbar__bar')
    scrollWrap.style.cssText = 'margin: 0px; max-height: none; overflow: hidden;'
    scrollBar.forEach(ele => ele.style.width = 0)
   })
 
  },
  // 切换选项
  handleNodeClick(node){
   this.valueTitle = node[this.props.label]
   this.valueId = node[this.props.value]
   this.$emit('getValue',this.valueId)
   this.defaultExpandedKey = []
  },
  // 清除选中
  clearHandle(){
   this.valueTitle = ''
   this.valueId = null
   this.defaultExpandedKey = []
   this.clearSelected()
   this.$emit('getValue',null)
  },
  /* 清空选中样式 */
  clearSelected(){
   let allNode = document.querySelectorAll('#tree-option .el-tree-node')
   allNode.forEach((element)=>element.classList.remove('is-current'))
  }
 },
 watch: {
  value(){
   this.valueId = this.value
   this.initHandle()
  }
 },
};
</script>

css样式:

<style scoped>
 .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;
 }
</style>

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

Javascript 相关文章推荐
JXTree对象,读取外部xml文件数据,生成树的函数
Apr 02 Javascript
JAVASCRIPT模式窗口中下载文件无法接收iframe的流
Oct 11 Javascript
Google Dart编程语法和基本类型学习教程
Nov 27 Javascript
js中通过父级进行查找定位元素
Jun 15 Javascript
js实现的四级左侧网站分类菜单实例
May 06 Javascript
理解Javascript图片预加载
Feb 23 Javascript
jQuery Password Validation密码验证
Dec 30 Javascript
React-intl 实现多语言的示例代码
Nov 03 Javascript
mock.js实现模拟生成假数据功能示例
Jan 15 Javascript
Vue.js项目实战之多语种网站的功能实现(租车)
Aug 07 Javascript
小程序wx.getUserProfile接口的具体使用
Jun 02 Javascript
vscode中使用npm安装babel的方法
Aug 02 Javascript
js与jquery获取input输入框中的值实例讲解
Feb 27 #jQuery
javascript将扁平的数据转为树形结构的高效率算法
Feb 27 #Javascript
js实现无限层级树形数据结构(创新算法)
Feb 27 #Javascript
js实现树形数据转成扁平数据的方法示例
Feb 27 #Javascript
vue学习笔记之给组件绑定原生事件操作示例
Feb 27 #Javascript
ElementUI Tree 树形控件的使用并给节点添加图标
Feb 27 #Javascript
ElementUI中el-tree节点的操作的实现
Feb 27 #Javascript
You might like
php实现图片上传并利用ImageMagick生成缩略图
2016/03/14 PHP
php的4种常用运行方式详解
2016/12/22 PHP
PHP简单实现解析xml为数组的方法
2018/05/02 PHP
PHP实现小程序批量通知推送
2018/11/27 PHP
javaScript对象和属性的创建方法
2007/01/15 Javascript
javascript实现的动态文字变换
2007/07/28 Javascript
读jQuery之一(对象的组成)
2011/06/11 Javascript
线路分流自动智能跳转代码,自动选择最快镜像网站(js)
2011/10/31 Javascript
jquery parent和parents的区别分析
2013/10/02 Javascript
javascript框架设计之浏览器的嗅探和特征侦测
2015/06/23 Javascript
jQuery实现带滑动条的菜单效果代码
2015/08/26 Javascript
Js动态设置rem来实现移动端字体的自适应代码
2016/10/14 Javascript
JavaScript中关键字 in 的使用方法详解
2016/10/17 Javascript
Vue学习笔记之表单输入控件绑定
2017/09/05 Javascript
js实现购物车商品数量加减
2020/09/21 Javascript
Vue实现boradcast和dispatch的示例
2020/11/13 Javascript
[33:23]VG vs Pain 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
python BeautifulSoup使用方法详解
2013/11/21 Python
在Python中测试访问同一数据的竞争条件的方法
2015/04/23 Python
python友情链接检查方法
2015/07/08 Python
从零开始学Python第八周:详解网络编程基础(socket)
2016/12/14 Python
Python迭代器定义与简单用法分析
2018/04/30 Python
Python利用ORM控制MongoDB(MongoEngine)的步骤全纪录
2018/09/13 Python
Python中PyQt5/PySide2的按钮控件使用实例
2019/08/17 Python
如何安装2019Pycharm最新版本(详细教程)
2019/09/26 Python
Python爬虫中Selenium实现文件上传
2020/12/04 Python
七年级地理教学反思
2014/01/26 职场文书
服装店营销方案
2014/03/10 职场文书
2014年食品安全工作总结
2014/12/04 职场文书
2014年科协工作总结
2014/12/09 职场文书
2014收银员工作总结范文
2014/12/16 职场文书
《山中访友》教学反思
2016/02/24 职场文书
导游词之日月潭
2019/11/05 职场文书
Python 发送SMTP邮件的简单教程
2021/06/24 Python
一起来学习Python的元组和列表
2022/03/13 Python
Golang入门之计时器
2022/05/04 Golang