基于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 相关文章推荐
如何学习Javascript入门指导
Nov 01 Javascript
JQGrid的用法解析(列编辑,添加行,删除行)
Nov 08 Javascript
JS实现文档加载完成后执行代码
Jul 09 Javascript
Jquery全选与反选点击执行一次的解决方案
Aug 14 Javascript
详解JavaScript中的4种类型识别方法
Sep 14 Javascript
快速解决jquery.touchSwipe左右滑动和垂直滚动条冲突
Apr 15 Javascript
微信小程序开发实战教程之手势解锁
Nov 18 Javascript
微信JS-SDK自定义分享功能实例详解【分享给朋友/分享到朋友圈】
Nov 25 Javascript
js微信支付实现代码
Dec 22 Javascript
JS实现两周内自动登录功能
Mar 23 Javascript
ExtJs整合Echarts的示例代码
Feb 27 Javascript
js实现拖拽与碰撞检测
Sep 18 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
建立文件交换功能的脚本(三)
2006/10/09 PHP
在PHP3中实现SESSION的功能(二)
2006/10/09 PHP
php利用iframe实现无刷新文件上传功能的代码
2011/09/29 PHP
php实现读取超大文件的方法
2014/07/28 PHP
JQuery Dialog的内存泄露问题解决方法
2010/06/18 Javascript
js网页侧边随页面滚动广告效果实现
2011/04/14 Javascript
原生js实现改变随意改变div属性style的名称和值的结果
2013/09/26 Javascript
JS小功能(操作Table--动态添加删除表格及数据)实现代码
2013/11/28 Javascript
超简单JS二级、多级联动的简单实例
2014/02/18 Javascript
jquery.cookie.js使用指南
2015/01/05 Javascript
js阻止默认浏览器行为与冒泡行为的实现代码
2016/05/15 Javascript
AngularJS模板加载用法详解
2016/11/04 Javascript
javascript循环链表之约瑟夫环的实现方法
2017/01/16 Javascript
js实现增加数字显示的环形进度条效果
2017/02/05 Javascript
Node连接mysql数据库方法介绍
2017/02/07 Javascript
jQuery树控件zTree使用方法详解(一)
2017/02/28 Javascript
提高JavaScript执行效率的23个实用技巧
2017/03/01 Javascript
vue+elementUI实现表格关键字筛选高亮
2020/10/26 Javascript
jquery实现垂直无限轮播的方法分析
2019/07/16 jQuery
Vue监听滚动实现锚点定位(双向)示例
2019/11/13 Javascript
微信小程序实现多选框功能的实例代码
2020/06/24 Javascript
[00:35]DOTA2上海特级锦标赛 EG战队宣传片
2016/03/04 DOTA
Python中使用PIPE操作Linux管道
2015/02/04 Python
Python数据类型学习笔记
2016/01/13 Python
python中的二维列表实例详解
2018/06/19 Python
python3中datetime库,time库以及pandas中的时间函数区别与详解
2020/04/16 Python
详解python with 上下文管理器
2020/09/02 Python
Pycharm Available Package无法显示/安装包的问题Error Loading Package List解决
2020/09/18 Python
2014年创卫实施方案
2014/02/18 职场文书
《大作家的小老师》教学反思
2014/04/16 职场文书
党员活动日总结
2014/05/05 职场文书
倡导文明标语
2014/06/16 职场文书
美术第二课堂活动总结
2014/07/08 职场文书
公司离职证明范本(汇总)
2014/09/10 职场文书
2014年党员自我评价材料
2014/09/22 职场文书
Java循环队列与非循环队列的区别总结
2021/06/22 Java/Android