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、代码示例

<t-tree-select
  :options="treeList"
  placeholder="请选择tree结构"
  width="50%"
  :defaultData="defaultValue"
  :treeProps="treeProps"
  @handleNodeClick="selectDrop"
/>

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

参数	说明	类型	默认值
options	tree 原始数据源	Array	无
treeProps	tree 配置	Object	el-tree props 默认值一样
checkBoxBtn	是否显示全选、反选、清空操作(多选的情况下)	Boolean	true
multiple	是否开启多选	Boolean	false
width	选择宽度（可以设置 px 或者%）	String	100%
defaultData	单选默认值	Object	{}
defaultValue	多选默认值	Array	[]

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

事件名	说明	返回值
handleNodeClick	选中 tree 节点	单选传出当前选择项；多选传出选中的集合。

四、组件地址

gitHub组件地址

gitee码云组件地址

五、相关文章

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

---

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