accout-vue3-ui/src/views/system/setBtn/components/menu-tree.vue

<script setup lang="ts">
import { ref, nextTick } from "vue";
import { httpList } from "/@/api/system/menuOperator";
import { ElTree } from "element-plus";
import type { IMenuTree } from "../types";

const defaultProps = {
  label: "menu_name",
  children: "child"
};

const emit = defineEmits(["treeSelectChange", "initTableData"]);

const treeData = ref<Array<IMenuTree>>([]);
const treeRef = ref<InstanceType<typeof ElTree>>(null);
const defaultExpandedKeys = ref<Array<string>>([]);

//获取菜单树列表
async function initMenuList() {
  const { data: list } = await httpList({});
  treeData.value = list;
  const menu = list[0];
  const page = menu.child[0];
  defaultExpandedKeys.value = [menu.id];

  //默认选中节点
  nextTick(() => treeRef.value.setCurrentKey(page.id));

  emit("initTableData", page.id);
}

//选择节点
function handleSelect(node) {
  emit("treeSelectChange", node);
}

initMenuList();
</script>

<template>
  <div
    class="max-w-280px w-[280px] h-full min-h-780px bg-white p-2 mt-5px mr-10px"
  >
    <div class="flex justify-between mb-1 font-bold">
      <h1>菜单列表</h1>
    </div>
    <el-tree
      ref="treeRef"
      accordion
      node-key="id"
      highlight-current
      :props="defaultProps"
      :data="treeData"
      :default-expanded-keys="defaultExpandedKeys"
      @current-change="handleSelect"
    />
  </div>
</template>