elemenu-plus vue3如何下拉带树形结构，setup方式

1、效果图

2、封装组件SelectTree

<!--
 * @Author: zhangming zhangming@sinoma-tianjin.cn
 * @Date: 2024-03-14 10:45:54
 * @LastEditors: zhangming zhangming@sinoma-tianjin.cn
 * @LastEditTime: 2024-03-14 11:25:51
 * @FilePath: \Frontend\src\common\components\selectTree.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <el-select ref="mySelect" v-bind="$attrs" v-model="optionValue" :multiple="false" :disabled="disabled">
    <el-option :value="optionValue" :label="optionValue" class="options">
      <el-tree id="tree-option" ref="selectTree" default-expand-all :data="options" @node-click="handleNodeClick" />
    </el-option>
  </el-select>
</template>

<script setup>
import { defineComponent, ref, watch, onMounted } from 'vue';
const props = defineProps({
  modelValue: { type: String, default: '' },
  disabled: {
    type: Boolean,
    default: false,
  },
  options: {
    type: Array,
    default: () => [],
  },
});
const mySelect = ref();
const optionValue = ref('');
const emit = defineEmits(['nodeclick', 'update:modelValue']);

watch(
  () => {
    return props.modelValue;
  },
  () => {
    optionValue.value = getLable(props.options, props.modelValue);
  }
);

const getLable = (arr, value) => {
  let res = '';
  function find(arr, value) {
    for (let i = 0; i < arr.length; i++) {
      if (arr[i].value === value) {
        res = arr[i].label;
      }
      if (arr[i].children && arr[i].children.length) {
        find(arr[i].children, value);
      }
    }
  }
  find(arr, value);
  return res;
};

const handleNodeClick = (node) => {
  optionValue.value = node.label;
  mySelect.value.blur();
  emit('nodeclick', node);
  emit('update:modelValue', node.value);
};
</script>

<style scoped>
.el-scrollbar .el-scrollbar__view .el-select-dropdown__item {
  height: auto;
  max-height: 274px;
  padding: 0;
  overflow: hidden;
  overflow-y: auto;
}
.el-select-dropdown__item.selected {
  font-weight: normal;
}
ul li :deep(.el-tree .el-tree-node__content) {
  height: auto;
  padding: 0 20px;
}
.el-tree-node__label {
  font-weight: normal;
}
.el-tree :deep(.is-current .el-tree-node__label) {
  color: #409eff;
  font-weight: 700;
}
.el-tree :deep(.is-current .el-tree-node__children .el-tree-node__label) {
  color: #606266;
  font-weight: normal;
}
.selectInput {
  padding: 0 5px;
  box-sizing: border-box;
}
</style>

3、使用

<SelectTree v-model="form.elName" :options="treeList" @nodeclick="handleSelect" />

const handleSelect = (data) => {
  //下拉树形选择
  console.log('下拉树形选择');
  console.log(data);
};