不对是基于elementUI的tree组件封装一个和el-select 类似使用的下拉树组件。可配置单选多选传输树形数据下拉展示树形数据

的结构，支持搜索过滤等功能。

组件名称：el-tree-select

使用方式：

1. 引入组件

import ElTreeSelect from 'el-tree-select'

2. 注册组件

Vue.component('el-tree-select', ElTreeSelect)

3. 在模板中使用

<el-tree-select
  v-model="selectedNode"
  :data="treeData"
  :multiple="true"
  :show-checkbox="true"
  :default-expand-all="true"
  :filterable="true"
  :clearable="true"
  :placeholder="'请选择'"
  :loading="isLoading"
  :load-data="loadData"
></el-tree-select>

组件属性：

| 属性名 | 类型 | 默认值 | 说明 | | ---------------- | --------- | ------ | ------------------------------------------------------------ | | data | Array | [] | 树形数据 | | value / v-model | Array / String | '' | 当前选中节点的 key 值，单选时为 String，多选时为 Array | | multiple | Boolean | false | 是否多选 | | show-checkbox | Boolean | false | 是否显示多选框 | | default-expand-all | Boolean | false | 是否默认展开所有节点 | | filterable | Boolean | false | 是否可搜索 | | clearable | Boolean | true | 是否可清空 | | placeholder | String | '' | 输入框的占位文本 | | loading | Boolean | false | 是否正在加载数据 | | load-data | Function | null | 异步加载数据的函数，具体使用说明见下文 |

组件事件：

| 事件名 | 说明 | 回调参数 | | -------------- | ------------------------------------------------------------ | ------------------------------------------------------ | | change | 当选中节点发生变化时触发 | 当前选中节点的 key 值，单选时为 String，多选时为 Array | | node-click | 当某个节点被点击时触发 | 被点击的节点对象 | | check-change | 当选中节点发生变化时触发（多选模式下） | 选中的节点对象的数组 | | expand-change | 当某个节点的展开状态发生变化时触发 | 节点对象 | | node-contextmenu | 当某个节点被鼠标右键点击时触发 | 被点击的节点对象 | | clear | 当清空按钮被点击时触发 | 无 |

异步加载数据：

如果需要异步加载树形数据，可以使用组件的 load-data 属性，该属性为一个函数，具有以下参数：

loadData(query, callback, parentNode)

• query：输入框中的搜索关键字
• callback：异步加载数据完成后的回调函数，回调函数的参数为一个数组，表示异步加载的子节点数据
• parentNode：当前节点的父节点对象，如果是根节点则为 null

示例代码：

<el-tree-select
  v-model="selectedNode"
  :data="treeData"
  :multiple="true"
  :show-checkbox="true"
  :default-expand-all="true"
  :filterable="true"
  :clearable="true"
  :placeholder="'请选择'"
  :loading="isLoading"
  :load-data="loadData"
></el-tree-select>

...

methods: {
  loadData(query, callback, parentNode) {
    // 发送异步请求获取子节点数据
    axios.get('/api/getChildNodes', { params: { parentNodeId: parentNode ? parentNode.id : null } }).then(res => {
      // 将子节点数据传给回调函数
      callback(res.data)
    })
  }
}