el-select下拉框内展示el-tree结构

el-select下拉框内展示el-tree结构

封装组件

<template>
  <div>
    <!-- :size="size" -->
    <el-select
      v-model="mineStatus"
      ref="searchSelect"
      :placeholder="placeholder"
      :multiple="!Single"
      :disabled="disabled"
      @change="selectChange"
      :loading="loading"
    >
      <el-option
        :value="mineStatusValue"
        v-on:click="doThis($event)"
        style="position: relative; width: 100%"
        :style="{ height: height + 'px', 'overflow-y': overflow }"
      >
        <div style="height: 100%" v-on:click="doThis($event)">
          <div style="padding-right: 10px" v-on:click="doThis($event)">
            <el-tree
              v-if="treeData.length"
              :data="treeData"
              :show-checkbox="!Single"
              ref="tree"
              style="font-weight: 500"
              highlight-current
              :props="defaultProps"
              :default-expand-all="defaultExpandAll"
              :default-checked-keys="defaultCheckedKeys"
              :check-strictly="Single"
              :filter-node-method="filterNode"
              node-key="id"
              @check-change="handleCheckChange"
              @node-click="clickNode"
            >
            </el-tree>
          </div>
          <div
            v-if="!treeData.length"
            style="
              width: 100%;
              height: 100%;
              background-color: #ffffff;
              text-align: center;
            "
          >
            暂无数据
          </div>
        </div>
        <div
          id="load"
          v-show="load"
          style="
            position: absolute;
            left: 0;
            top: 0;
            height: 200px;
            width: 100%;
          "
        ></div>
      </el-option>
    </el-select>
  </div>
</template>

<!-- /**
 * 组件说明
 * 属性:
 * 参数                     说明                       类型                    默认值
 * ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 * placeholder              输入框占位文本                String                '请选择'
 * defaultProps             需要使用的展示字段值          Object                {children: 'children',label: 'label'}
 * data                     tree 的数据源                 Array                 []
 * filterable               是否开启搜索功能              Boolean                false
 * Single                   tree下拉是否单选              Boolean                false
 * defaultExpandAll         tree是否展开全部节点          Boolean                 false
 * defaultCheckedKeys          默认勾选节点               Array                   []
 * disabled                   是否禁止操作                Boolean                Array
 * size                    el-option大小尺寸选择          String                 medium
 *
 * 事件:
 * selectTerrEvent  获取选中对象 返回数组
 */ -->
<script>
const deepFind = (arr, condition, children) => {
     
  let main = [];
  try {
     
    (function poll(arr, level) {
     
      if (!Array.isArray(arr)) return;
      for (let i = 0; i < arr.length; i++) {
     
        const item = arr[i];
        main[level] = item;
        const