基于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 10 Javascript
javascript中文本框中输入法切换的问题
Dec 10 Javascript
深入分析js的冒泡事件
Dec 05 Javascript
解决js页面滚动效果scrollTop在FireFox与Chrome浏览器间的兼容问题的方法
Dec 03 Javascript
学JavaScript七大注意事项【必看】
May 04 Javascript
js基于cookie方式记住返回页面用法示例
May 27 Javascript
JS判断字符串变量是否含有某个字串的实现方法
Jun 03 Javascript
angularjs实现多张图片上传并预览功能
Feb 24 Javascript
VueJS事件处理器v-on的使用方法
Sep 27 Javascript
解析原来浏览器原生支持JS Base64编码解码
Aug 12 Javascript
关于angular引入ng-zorro的问题浅析
Sep 09 Javascript
vue实现简单数据双向绑定
Apr 28 Vue.js
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
兼容PHP5的PHP目录管理函数库
2008/07/10 PHP
让PHP支持断点续传的源码
2010/05/16 PHP
Symfony2使用Doctrine进行数据库查询方法实例总结
2016/03/18 PHP
JavaScript 中的replace方法说明
2007/04/13 Javascript
IE autocomplete internet explorer's autocomplete
2007/06/30 Javascript
类似GMAIL的Ajax信息反馈显示
2010/02/16 Javascript
JS随机调用指定函数的方法
2015/07/01 Javascript
js实现不提交表单获取单选按钮值的方法
2015/08/21 Javascript
jquery结婚电子请柬特效源码分享
2015/08/21 Javascript
js绘制购物车抛物线动画
2020/11/18 Javascript
打造自己的jQuery插件入门教程
2016/09/23 Javascript
jQuery事件用法详解
2016/10/06 Javascript
jQuery如何解决IE输入框不能输入的问题
2016/10/08 Javascript
AngularJS过滤器filter用法总结
2016/12/13 Javascript
AngularJS 打开新的标签页实现代码
2017/09/07 Javascript
详解基于Vue2.0实现的移动端弹窗(Alert, Confirm, Toast)组件
2018/08/02 Javascript
webpack打包非模块化js的方法
2018/10/24 Javascript
vue中使用vue-print.js实现多页打印
2020/03/05 Javascript
TypeScript 引用资源文件后提示找不到的异常处理技巧
2020/07/15 Javascript
JS+CSS实现过渡特效
2021/01/02 Javascript
Python创建xml的方法
2015/03/10 Python
Python实现控制台输入密码的方法
2015/05/29 Python
解决csv.writer写入文件有多余的空行问题
2018/07/06 Python
python安装pywin32clipboard的操作方法
2019/01/24 Python
Spring http服务远程调用实现过程解析
2020/06/11 Python
keras输出预测值和真实值方式
2020/06/27 Python
用python写爬虫简单吗
2020/07/28 Python
日本最大的旅游网站:Rakuten Travel(乐天旅游)
2018/08/02 全球购物
中药专业自荐信范文
2014/03/18 职场文书
优秀学生党员先进事迹材料
2014/05/29 职场文书
经营理念口号
2014/06/21 职场文书
大学生军训感言
2015/08/01 职场文书
2016年大学生暑期社会实践活动总结
2016/04/06 职场文书
导游词之崇武古城
2019/10/07 职场文书
python pyhs2 的安装操作
2021/04/07 Python
springboot利用redis、Redisson处理并发问题的操作
2021/06/18 Java/Android