elementUI实现selecttree自定义下拉框树形组件支持多选和搜索

在Element UI中，可以使用el-select组件结合el-tree组件来实现一个树形的下拉选择器。以下是一个简单的实现示例：

<template>
  <el-select v-model="selectedValues" multiple filterable placeholder="请选择">
    <el-option
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value">
    </el-option>
    <el-tree
      :data="treeData"
      :props="defaultProps"
      :expand-on-click-node="false"
      :render-content="renderContent"
      node-key="value"
      ref="tree"
      @check="handleCheckChange">
    </el-tree>
  </el-select>
</template>
 
<script>
export default {
  data() {
    return {
      selectedValues: [],
      options: [],
      treeData: [
        // 这里填充你的树形数据
      ],
      defaultProps: {
        children: 'children',
        label: 'label'
      }
    };
  },
  methods: {
    renderContent(h, { node, data }) {
      return (
        <span>
          <span>{node.label}</span>
          <span>{this.selectedValues.includes(data.value) ? '✔' : ''}</span>
        </span>
      );
    },
    handleCheckChange(data, checked, indeterminate) {
      if (checked) {
        this.selectedValues.push(data.value);
      } else {
        const index = this.selectedValues.indexOf(data.value);
        if (index > -1) {
          this.selectedValues.splice(index, 1);
        }
      }
      this.options = this.$refs.tree.getCheckedNodes();
    }
  }
};
</script>

在这个示例中，el-select组件被用来作为下拉框，并通过multiple属性来支持多选。filterable属性允许用户进行搜索。el-tree组件被用来展示树形结构，并通过自定义内容(render-content)来显示节点选中的状态。

在handleCheckChange方法中，当用户选中或取消选中树节点时，相应的值会被添加到selectedValues数组中，并且更新options数组以反映当前被选中的节点。这样，无论用户是通过点击树还是通过搜索，都可以进行多选操作。