在日常项目开发中,树状下拉框的需求还是比较常见的,但是element并没有这种组件以供使用。在这里,小编就基于element如何封装一个树状下拉框做个详细的介绍。

通过这篇文章,你可以了解学习到一个树状下拉框组件是如何一步一步封装成功的。

话不多说,先看效果图:


封装组件

该组件主要基于element的select组件、tree组件及input组件进行二次封装的。

组件布局

首先我们需要基于这几个组件对我们的组件进行布局,话不多说直接上代码:

"select">"options">"tree-option"        ref="selectTree"      >

注:css添加scoped属性,是为了让css只在该组件生效,避免样式污染

这个时候直接使用肯定是会报错的,因为我们组件该传的参数还未传递。

组件数据完善

上面我们已经完成了布局,接下来就是为其丰富数据了,因为我们这个组件肯定是复用的,因此我们设计数据的时候,需要把常用的数据属性提取出来通过props传递接收。我提取的主要有几下几个数据:

props:{    /* 配置项 */    props:{      type: Object,      default:()=>{        return {          value:'id',             // ID字段名          label: 'title',         // 显示名称          children: 'children'    // 子级字段名        }      }    },    /* 选项列表数据(树形结构的对象数组) */    options:{      type: Array,             default: ()=>{ return [] }    },    /* 初始值 */    value:{      default: ()=>{ return null }    },    /* 可清空选项 */    clearable:{      type:Boolean,      default:()=>{ return true }    },    /* 自动收起 */    accordion:{      type:Boolean,      default:()=>{ return false }    },    placeholder:{      type:String,      default:()=>{return "请选择"}    }  },

大家可能注意到,我所有prop字段都给了type属性,唯独value没有,这是因为在实际使用中下拉框的数据value值可能是字符串(String)也可能是数字(Number),为了项目开发中控制台不报太多无意义的错,此处就没有规定其type。

接收到prop之后,我们就开始对组件进行数据的处理,直接上代码:

"placeholder" ref="select">"options">"tree-option"        ref="selectTree"        :accordion="accordion"        :data="options"        :props="props"        :node-key="props.value"        :default-expanded-keys="[]"      >

当数据过多的时候,滚动条会出现两条,如下所示:


处理方法如下:

// 初始化滚动条initScroll(){  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)  })},

mounted中调用该方法就可以了,效果如下:


点击选中

数据也渲染显示出来了,这个时候我们需要实现点击数据选中功能。

思路很简单:

  • select组件绑定value值
  • tree组件绑定节点点击事件
  • 点击事件中获取value和label
  • 将获取的值赋给select组件以及返回给父组件

代码如下:

"valueTitle" :placeholder="placeholder" ref="select">"valueTitle" :label="valueTitle" class="options">"tree-option"        ref="selectTree"        :accordion="accordion"        :data="options"        :props="props"        :node-key="props.value"        :default-expanded-keys="defaultExpandedKey"        @node-click="handleNodeClick"        >
data() {    return {      valueId:this.value,// 初始值      valueTitle:'',      defaultExpandedKey:[]    }},
// 切换选项handleNodeClick(node){  this.valueTitle = node[this.props.label]//获取label  this.valueId = node[this.props.value]//获取value  this.$emit('getValue',this.valueId)//传值给父组件},

这样点击选中功能就实现了,但是有个问题,点击之后,下拉框选项没有隐藏,我们只需要再调用一下select组件的blur方法即可实现隐藏

数据初始化

细心的小伙伴肯定已经发现了,上面有一个初始值,并且在选择器中,初始数据也是必不可少的。实现思路如下:

  • watch监听prop中value数据变化
  • 将初始值做对应赋值
  • 获取初始值对应的label并做对应赋值
  • 设置tree组件的默认选中状态
  • 设置tree组件的默认展开节点

代码如下:

watch: {    value(){      this.valueId = this.value      this.initHandle()    }},// 初始化值initHandle(){  if(this.valueId){    // 初始化显示label    this.valueTitle = this.$refs.selectTree.getNode(this.valueId).data[this.props.label]         this.$refs.selectTree.setCurrentKey(this.valueId)// 设置默认选中    this.defaultExpandedKey = [this.valueId]// 设置默认展开  } },

mounted中调用执行既可

清除选中

一般输入框或者选择器都有清除功能,我们的组件自然也少不了清除功能,实现思路如下:

  • 给select组件设置clearable属性
  • 给select组件添加清除监听事件
  • 在监听事件中清除tree组件选中,并清除父组件中的值

代码如下:

"valueTitle" :clearable="clearable" @clear="clearHandle" :placeholder="placeholder" ref="select">
// 清除选中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'))},

筛选数据

当tree中数据量过大时,我们需要筛选数据,实现思路如下:

  • 给tree组件添加filter-node-method方法
  • 添加一个输入框,输入筛选的内容
  • 监听输入内容变化,并调用tree组件的筛选方法

代码如下:

"valueTitle" :clearable="clearable" @clear="clearHandle" :placeholder="placeholder" ref="select">      class="selectInput"      placeholder="检索关键字"      v-model="filterText">"valueTitle" :label="valueTitle" class="options">"tree-option"        ref="selectTree"        :accordion="accordion"        :data="options"        :props="props"        :node-key="props.value"            :default-expanded-keys="defaultExpandedKey"        :filter-node-method="filterNode"        @node-click="handleNodeClick">

.selectInput{    padding: 0 5px;    box-sizing: border-box;}
filterNode(value, data) {  if (!value) return true;  return data.name.indexOf(value) !== -1;}watch: {    filterText(val) {      this.$refs.selectTree.filter(val);    }},

这样一个简单的树状下拉框组件就封装好了。

使用组件

下面给个简单的使用示例:

      :props="defaultProps"      :options="treeData"      :value="value"      :accordion="true"      @getValue="getValue($event)"      placeholder="请选择所属区域"    />选中的id:{{value}}

下拉框_教你封装 Element Tree 树状下拉框相关推荐

  1. html6+树状下拉列表,layui+ztree 树状下拉框

    一.效果图 [关闭] [展开] 二.代码 [HTML]注:布局一定要用DIV不是select否则效果···· 部门 @* *@ [js] ① 以下为固定方法 function initSelectTr ...

  2. vue+element实现树状表格的增删改查;使用el-table树形数据与懒加载实现树状表格增删改查

    以下代码可以直接复制使用 一.情景: 列表是一个树状表格,可以无限添加下级,以及对列表的某一行进行增删改查(目前查没有写). 原博链接 二.本篇是在原博主的代码基础上添加了部分功能. 功能1: 给树状 ...

  3. e语言mysql怎么放在超级列表框_易语言中的MYSQL操作之超级列表框使用

    .版本 2 .支持库 mysql .支持库 iext .支持库 CnCalendar .支持库 spec .程序集 窗口程序集_启动窗口 .程序集变量 MySQL句柄, 整数型 .程序集变量 记录集, ...

  4. 根据树状数据渲染树状下拉选项

    最终的效果类似这样: 作者是把非末级的选项给禁用了,如果你们需求是要不禁用求留意笔者渲染时的操作. 接下来我们一起来做这个效果: 笔者所用的是react + antd,用其他的架构也是类似,请自行举一 ...

  5. java能下划线开头_为什么Java7开始在数字中使用下划线

    JDK1.7的发布已经介绍了一些有用的特征,尽管大部分都是一些语法糖,但仍然极大地提高了代码的可读性和质量.其中的一个特征是介绍字面常量数字的下划线.从Java7开始,你就可以在你的Java代码里把长 ...

  6. vue+element实现树状菜单并底层菜单横向排列

    参考博文:https://blog.csdn.net/qq_33769914/article/details/81562278 效果如下: 首先用elemnetUI的树形控件,将获取到的数据进行基本展 ...

  7. java 多选列表框_快逸报表:填报中的下拉多选列表框

    在快逸报表应用的填报页面中,下拉框是最常见的了.下拉选择框可以简化用户的输入,可以避免用户的错误录入,还可以轻松实现中文与代码的映射关系,可谓用途多多. 可是随着业务的越来越复杂,各种奇怪的需求均可能 ...

  8. Flex3 带复选框的树状下拉框

    Main.mxml主程序文件: <?xml version="1.0" encoding="utf-8"?> <mx:Application ...

  9. adm怎么下bt连接_小型会议室音响设备怎么连接?学习下

    一般来说是包括有音箱.功放,麦克风.音箱线等. 一.调音台的连接 提到音响系统,我们当然首先会想到调音台,调音台,会有很多种形容法,最贴切的莫过于把调音台比喻成一个音响系统的心脏了,这个心脏血液循环的 ...

最新文章

  1. java aws访问授权 实例_java – 使用IAM身份验证和Spring JDBC访问AWS ...
  2. Android 模仿微信启动动画
  3. 在Cisco交换机上实现隔离访问
  4. 递归删除目录下.svn文件
  5. 趣学python3(2)-添加以数字文字形式使用下划线的功能,以提高可读性
  6. PyTorch 和 Tensorflow 学哪个?上手简单的PyTorch考虑一下!
  7. Gram-Schmidt正交化
  8. c语言怎么下载步骤,C语言教程下载_C语言教程APP手机最新版安装 - 风云下载
  9. word转html在前端页面显示
  10. ERP和SAP是什么意思?
  11. FW:nbsp;司马相如琴挑文君真相:劫色劫…
  12. Timer定时器用法详解
  13. sql数据库包含关系查询
  14. Android提高与总结的Android技能导图
  15. 阿里P8专家年薪170万IT男征婚被嘲讽?钱不是万能的!
  16. php var的解释
  17. CSS3——多媒体查询属性
  18. 蓝宝石RX590GME 8G D5白金版黑苹果免驱成功
  19. 计算机开关电源的发展,开关电源发展史及发展趋势剖析
  20. python中true是什么意思_python中的true是什么

热门文章

  1. 前端学习(1920)vue之电商管理系统电商系统之角色列表路由的切换
  2. 前端学习(1333):mongodb增
  3. 前端学习(751):Javascript作用域
  4. mybatis学习(38):动态sql-foreach
  5. 第一百零四期:搞清这些陷阱,NULL和三值逻辑再也不作妖
  6. spring学习(26):更优雅的依赖注入 在@bean注入参数
  7. setInterval 和setTimeout 清空定时器,返回值,赋值为null的区别
  8. JQ trigger触发a标签点击事件
  9. 类模板(参考《C++ Templates 英文版第二版》)
  10. 操作系统进程学习(Linux 内核学习笔记)