基于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 相关文章推荐
JS宝典学习笔记(下)
Jan 10 Javascript
javascript hashtable 修正版 下载
Dec 30 Javascript
Grid得到选择行数据的方法总结
Jan 17 Javascript
模仿百度三维地图的js数据分享
May 12 Javascript
jquery中get和post的简单实例
Feb 04 Javascript
Vue.js bootstrap前端实现分页和排序
Mar 10 Javascript
详解angularJS动态生成的页面中ng-click无效解决办法
Jun 19 Javascript
5分钟打造简易高效的webpack常用配置
Jul 04 Javascript
深入分析element ScrollBar滚动组件源码
Jan 22 Javascript
javascript刷新父页面方法汇总详解
Oct 10 Javascript
JavaScript数组排序小程序实现解析
Jan 13 Javascript
JavaScript枚举选择jquery插件代码实例
Nov 17 jQuery
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
基于wordpress主题制作的具体实现步骤
2013/05/10 PHP
探讨PHP使用eAccelerator的API开发详解
2013/06/09 PHP
php比较相似字符串的方法
2015/06/05 PHP
PHPExcel中文帮助手册|PHPExcel使用方法(分享)
2017/06/09 PHP
php微信开发之关注事件
2018/06/14 PHP
php获取微信基础接口凭证Access_token
2018/08/23 PHP
JQuery扩展插件Validate 2通过参数设置验证规则
2011/09/05 Javascript
JS(JQuery)操作Array的相关方法介绍
2014/02/11 Javascript
js跳转页面方法实现汇总
2014/02/11 Javascript
基于JavaScript判断浏览器到底是关闭还是刷新(超准确)
2016/02/01 Javascript
jQuery ajax中使用confirm,确认是否删除的简单实例
2016/06/17 Javascript
解决node.js安装包失败的几种方法
2016/09/02 Javascript
Vue.js每天必学之方法与事件处理器
2016/09/06 Javascript
js生成随机颜色方法代码分享(三种)
2016/12/29 Javascript
详解Vue监听数据变化原理
2017/03/08 Javascript
ES6新数据结构Set与WeakSet用法分析
2017/03/31 Javascript
requirejs + vue 项目搭建详解
2017/06/16 Javascript
vue组件通信传值操作示例
2019/01/08 Javascript
vue axios封装及API统一管理的方法
2019/04/18 Javascript
微信小程序的开发范式BeautyWe.js入门详解
2019/07/10 Javascript
vue实现网络图片瀑布流 + 下拉刷新 + 上拉加载更多(步骤详解)
2020/01/14 Javascript
Python内置的字符串处理函数整理
2013/01/29 Python
Django基础之Model操作步骤(介绍)
2017/05/27 Python
python requests 使用快速入门
2017/08/31 Python
Python实现正整数分解质因数操作示例
2018/08/01 Python
django-rest-swagger的优化使用方法
2019/08/29 Python
pytorch实现mnist数据集的图像可视化及保存
2020/01/14 Python
Python使用turtle库绘制小猪佩奇(实例代码)
2020/01/16 Python
解决python replace函数替换无效问题
2020/01/18 Python
pandas 数据类型转换的实现
2020/12/29 Python
拖鞋店创业计划书
2014/01/15 职场文书
银行优秀员工事迹
2014/02/06 职场文书
幼儿园中班下学期评语
2014/04/18 职场文书
考察邀请函范文
2015/01/31 职场文书
大学升旗仪式主持词
2015/07/04 职场文书
一文搞懂Python Sklearn库使用
2021/08/23 Python