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