开发后台管理的时候需要开发一个下拉树控件,找了网上的代码有些地方有些瑕疵,现在发完善后的版本
<!--
/**
* 树形下拉选择组件,下拉框展示树形结构,提供选择某节点功能,方便其他模块调用
* 调用示例:
* <tree-select :height="400" // 下拉框中树形高度
* :width="200" // 下拉框中树形宽度
* v-model="value"
* placeholder-text="操作类型"
* size="small" // 输入框的尺寸: medium/small/mini
* :data="data" // 树结构的数据
* :defaultProps="defaultProps" // 树结构的props
* multiple // 多选
* checkStrictly // 多选时,严格遵循父子不互相关联
* :nodeKey="nodeKey" // 绑定nodeKey,默认绑定'id'
* :checkedKeys="defaultCheckedKeys" // 传递默认选中的节点key组成的数组
* @popoverHide="popoverHide"> // 事件有两个参数:第一个是所有选中的节点ID,第二个是所有选中的节点数据
* </tree-select>
*/
-->
<template>
<div>
<div v-show="isShowSelect" class="mask" @click="isShowSelect = !isShowSelect" />
<el-popover
ref="popover"
v-model="isShowSelect"
placement="bottom-start"
:width="width"
trigger="manual"
@hide="popoverHide"
>
<el-tree
ref="tree"
:key="freshKey"
class="common-tree"
:style="style"
:data="treeData"
:props="defaultProps"
:show-checkbox="multiple"
:node-key="nodeKey"
:check-on-click-node="true"
:check-strictly="checkStrictly"
default-expand-all
:expand-on-click-node="false"
:highlight-current="true"
@node-click="handleNodeClick"
@check-change="handleCheckChange"
/>
<el-