基于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 相关文章推荐
fckeditor 获取文本框值的实现代码
Feb 09 Javascript
javascript 简练的几个函数
Aug 29 Javascript
实现图片预加载的三大方法及优缺点分析
Nov 19 Javascript
JavaScript中使用Object.create()创建对象介绍
Dec 30 Javascript
jQuery实现可用于博客的动态滑动菜单
Mar 09 Javascript
javascript Array 数组常用方法
Apr 05 Javascript
浅析四种常见的Javascript声明循环变量的书写方式
Oct 14 Javascript
浅谈JS获取元素的N种方法及其动静态讨论
Aug 25 Javascript
BootStrap模态框和select2合用时input无法获取焦点的解决方法
Sep 01 Javascript
深入理解Vue 的钩子函数
Sep 05 Javascript
JavaScrip如果基于url实现图片下载
Jul 03 Javascript
Nuxt的路由配置和参数传递方式
Nov 06 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中if和or运行效率对比
2014/12/12 PHP
php比较两个字符串长度的方法
2015/07/13 PHP
PHP mysql事务问题实例分析
2016/01/18 PHP
nginx下安装php7+php5
2016/07/31 PHP
PHP实现的折半查找算法示例
2017/12/19 PHP
PHP实现的DES加密解密类定义与用法示例
2020/11/02 PHP
php实现数组重复数字统计实例
2018/09/30 PHP
jquery实现效果比较好的table选中行颜色
2014/03/25 Javascript
JavaScript实现跨浏览器的添加及删除事件绑定函数实例
2015/08/04 Javascript
JSONObject使用方法详解
2015/12/17 Javascript
BootStrap select2 动态改变值的方法
2017/02/10 Javascript
vue中element组件样式修改无效的解决方法
2018/02/03 Javascript
详解vue中v-bind:style效果的自定义指令
2020/01/21 Javascript
微信小程序自定义支持图片的弹窗
2020/12/21 Javascript
python通过pil为png图片填充上背景颜色的方法
2015/03/17 Python
Python的条件语句与运算符优先级详解
2015/10/13 Python
快速排序的算法思想及Python版快速排序的实现示例
2016/07/02 Python
python回调函数中使用多线程的方法
2017/12/25 Python
Python常见工厂函数用法示例
2018/03/21 Python
python使用for循环计算0-100的整数的和方法
2019/02/01 Python
超简单使用Python换脸实例
2019/03/27 Python
Python面向对象程序设计类的封装与继承用法示例
2019/04/12 Python
python3使用腾讯企业邮箱发送邮件的实例
2019/06/28 Python
Python实现仿射密码的思路详解
2020/04/23 Python
Python中的特殊方法以及应用详解
2020/09/20 Python
多个版本的python共存时使用pip的正确做法
2020/10/26 Python
css3的@media属性实现页面响应式布局示例代码
2014/02/10 HTML / CSS
Jabra捷波朗美国官网:用于办公、车载和运动的无线蓝牙耳麦
2017/02/01 全球购物
美国高档帽子网上商店:Hats.com
2018/08/09 全球购物
翻译专业应届生求职信
2013/11/23 职场文书
行政总经理岗位职责
2013/12/05 职场文书
学前教育学生自荐信范文
2013/12/31 职场文书
校长寄语大全
2014/04/09 职场文书
老兵退伍感言
2015/08/03 职场文书
Django项目如何正确配置日志(logging)
2021/04/29 Python
Java日常练习题,每天进步一点点(38)
2021/07/26 Java/Android