vue+element-ui el-select + el-tree下拉树形结构组件(支持筛选过滤)

一、最终效果

二、具体HTML代码（详情请看源码）

<template>
  <el-select
    ref="select"
    v-model="selectValue"
    :multiple="multiple"
    :filter-method="dataFilter"
    @remove-tag="removeTag"
    @clear="clearAll"
    popper-class="t-tree-select"
    :style="{width: width||'100%'}"
    v-bind="attrs"
    v-on="$listeners"
  >
    <el-option v-model="selectTree" class="option-style" disabled>
      <div class="check-box" v-if="multiple&&checkBoxBtn">
        <el-button type="text" @click="handlecheckAll">全选el-button>
        <el-button type="text" @click="handleReset">清空el-button>
        <el-button type="text" @click="handleReverseCheck">反选el-button>
      div>
      <el-tree
        :data="options"
        :props="treeProps"
        class="tree-style"
        ref="treeNode"
        :show-checkbox="multiple"
        :node-key="treeProps.value"
        :filter-node-method="filterNode"
        :default-checked-keys="defaultValue"
        :current-node-key="currentKey"
        @node-click="handleTreeClick"
        @check-change="handleNodeChange"
        v-bind="treeAttrs"
        v-on="$listeners"
      >el-tree>
    el-option>
  el-select>
template>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37

三、参数配置

1、代码示例

<t-tree-select
  :options="treeList"
  placeholder="请选择tree结构"
  width="50%"
  :defaultData="defaultValue"
  :treeProps="treeProps"
  @handleNodeClick="selectDrop"
/>
1
2
3
4
5
6
7
8

2、配置参数（Attributes）继承 el-select 和 el-tree Attributes

3、 events 继承 el-select 和 el-tree events

四、组件地址

gitHub组件地址

gitee码云组件地址

五、相关文章

基于ElementUi或AntdUI再次封装基础组件文档

---

基于Element-plus再次封装基础组件文档(vue3+ts)