ElementUI下拉树（树形下拉框）组件封装

安木夕
4,946 阅读2分钟

ElementUI中有Tree 树形控件、下拉框Select 选择器，却没有树形下拉框选择器控件，本文就基于ElementUI（Vue2）封装一个树形下拉框选择器控件。

image.png

这其实算是一个比较基础的控件，ElementUI居然没有提供，不太理解！不过在新版的Element Plus 中提供了TreeSelect 树形选择控件。更不能理解的是，发现不止一个项目中使用下面这种“假树”，基于下拉框Select选择器，用空格+制表符字符假装成一棵树，文本框中显示的内容还有空格和制表符内容，不仅low，明显就算是bug了。

image.png

在ElementUI其实有一个Cascader 级联选择器，可以实现类似的功能，只是表现形式不同。ElementUI中有Tree 树形控件，可以基于该控件进行封装，实现还是比较简单的。

image.png

基本思路：

  • 一个主控件框，可以直接用一个文本框，或者用下拉框Select 选择器。
  • 一棵树，就用Tree 树形控件，基本的功能（单选、多选、禁用项、过滤）都已支持，所以封装起来就比较简单。
  • 点击主控件框，弹出选择树，这里有两种方法：
    • 方式1：文本框+Popover 弹出框，Tree 树形控件用Pop方式弹出。
    • 方式2：下拉框Select 选择器，Tree作为唯一一个el-option 选项的内容。

模板的封装的代码：确实就很简单！

<template>
  <!-- 代理所有属性、事件：v-bind="$attrs" v-on="$listeners" -->
  <el-select ref="select" v-model="currentText"
    @clear="handelClear" @visible-change="visibleChanged"
    class="tree-select" v-bind="$attrs" v-on="$listeners"
    :filter-method="filter" :filterable="filterable" >
    <el-option
      class="tree-option view-scroll" :value="selectedItem?.[option.value]" :label="selectedItem?.[option.label]" >
      <!-- data：数据-->
      <!-- props：数据结构配置 -->
      <!-- node-key：唯一标识字段 -->
      <el-tree
        ref="tree" :data="data" :node-key="option.value" :props="option"
        class="tree-select-innertree" @current-change="handleCurrentChange" :filter-node-method="filterNode"
        :highlight-current="true" check-on-click-node
      ></el-tree>
    </el-option>
  </el-select>
</template>

JS代码中封装了下面几个外部属性Props：

  • value：绑定的选中项值，v-model绑定。暂时没有考虑多选值的情况，因为项目上暂时还没用到，Tree本身支持多选的，添加也是比较容易的。
  • data：树形结构的数据源。
  • onlyLeaf：boo值，是否只能选择叶子节点，使用属性为“only-leaf”（被Vue自动转换的）。
  • filterable：是否支持筛选，如果开启，则支持搜索树节点内容。
  • hideOnSelected：选中后是否自动关闭弹窗树，使用的属性为 “hide-on-selected”。
  • option：树形数据data的数据结构配置，默认值为{ value: 'id', label: 'name', children: 'children' }。

完整代码直接看马上掘金的在线代码吧：code.juejin.cn/pen/7270899…

示例中用到了列表转树结构的代码，参考上篇文章《前端树形Tree数据结构使用-🤸🏻‍♂️各种姿势总结》

©️版权申明：版权所有@安木夕，本文内容仅供学习，欢迎指正、交流，转载请注明出处！原文编辑地址-语雀

avatar
文章
阅读
粉丝