elementui中el-select和el-tree实现下拉树形多选功能

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

<template>
  <el-select
    v-model="selectedValues"
    multiple
    placeholder="请选择"
    @remove-tag="removeSelected"
    @clear="clearSelected">
    <el-option
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value">
    </el-option>
    <el-tree
      :data="treeData"
      :props="defaultProps"
      :default-expanded-keys="defaultExpandedKeys"
      node-key="id"
      ref="tree"
      @check-change="handleCheckChange"
      show-checkbox>
    </el-tree>
  </el-select>
</template>
 
<script>
export default {
  data() {
    return {
      selectedValues: [],
      options: [],
      treeData: [
        // 树形结构的数据
      ],
      defaultProps: {
        children: 'children',
        label: 'label'
      },
      defaultExpandedKeys: []
    };
  },
  methods: {
    handleCheckChange(data, checked, indeterminate) {
      if (checked) {
        this.options.push({ label: data.label, value: data.id });
        this.selectedValues.push(data.id);
      } else {
        this.options = this.options.filter(option => option.value !== data.id);
        this.selectedValues = this.selectedValues.filter(value => value !== data.id);
      }
    },
    removeSelected(value) {
      const node = this.$refs.tree.getNode(value);
      if (node) {
        this.$refs.tree.setChecked(node, false);
      }
    },
    clearSelected() {
      this.options = [];
      this.selectedValues = [];
      this.$refs.tree.setCheckedKeys([]);
    }
  }
};
</script>

在这个示例中，el-select组件用于展示已选择的选项，并允许用户通过点击清除按钮清除选择。el-tree组件则用于展示完整的树形结构，并允许用户通过勾选/取消勾选节点来选择或取消选择选项。选中的节点会被添加到options数组中，并显示在下拉菜单中，同时对应的节点id会被添加到selectedValues数组中。当用户移除下拉菜单中的选项时，相应的树节点会被取消选择。当用户清除所有选项时，树形控件会清除所有选中的节点。