Vue3递归渲染树状菜单（完整代码实例）

目录

新建一个MyTree.vue的组件 

使用此组件

效果：

---

新建一个MyTree.vue的组件 

如下内容：

<template>
  <div class="tree-item">
    <div v-for="item in treeData" :key="item.id">
      <div class="item-title" @click="nodeClick(item)">
        <span>{{ item.name }}</span>
        <span v-if="item.children && item.children.length">
          [{{ isOpen(item.id) ? '-' : '+' }}]
        </span>
      </div>
      <div
          v-if="item.children && item.children.length"
          v-show="isOpen(item.id)"
          class="item-childen"
      >
        <MyTree
            :treeData="item.children"
            @node-click="Emit('node-click', $event)"
        ></MyTree>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref} from "vue";

const items = defineProps(["treeData"]);
const treeData = items.treeData;
const expandedKeys = ref([])
const Emit=defineEmits(["node-click"]);

const isOpen = (id) => {
  // 判断节点id在不在数组中，在则显示，不在则隐藏
  return expandedKeys.value.includes(id)
}

const nodeClick = (item) => {
  Emit('node-click', item)
  if (item.children && item.children.length) {
    let index = expandedKeys.value.indexOf(item.id)
    if (index > -1) {
      // 如果当前节点id存在数组中，则删除
      expandedKeys.value.splice(index, 1)
    } else {
      // 如果当前节点id不存在数组中，则添加
      expandedKeys.value.push(item.id)
    }
  }
}
</script>

<style scoped>
.tree-item {
  cursor: pointer;
}

.item-title {
  padding: 4px 8px;
}

.item-title:hover {
  background: #ff1111;
}

.item-childen {
  padding-left: 20px;
}
</style>

使用此组件

<template>
  <MyTree :tree-data="treeData" @node-click="nodeClick"></MyTree>
</template>

<script setup>
import MyTree from "../../../../components/Common/pc/MyTree.vue";
const treeData= [
  { id: 1, name: '一级1' },
  {
    id: 2,
    name: '一级2',
    children: [
      { id: 3, name: '二级2-1' },
      { id: 4, name: '二级2-2' }
    ]
  },
  {
    id: 5,
    name: '一级3',
    children: [
      {
        id: 6,
        name: '二级3-1',
        children: [
          { id: 7, name: '三级3-1-1' },
          { id: 8, name: '三级3-1-2' }
        ]
      },
      { id: 9, name: '二级3-2' },
      { id: 10, name: '二级3-3' }
    ]
  }
]

const  nodeClick=(val)=>{
  console.log(val)
}
</script>

<style scoped>
</style>

效果：