element-plus菜单递归_elementplus 递归menu-CSDN博客

本文展示了如何使用Vue.js创建一个递归菜单组件，该组件包含子菜单，并通过鼠标移入移出来实现菜单项的增删改查功能。组件使用了`el-menu`和`el-sub-menu`元素，以及`v-if`和`v-else`来条件渲染菜单项和子菜单。同时，详细介绍了`setup`函数中的事件处理方法，如`selectMenu`、`updateDoc`、`deleteDoc`和`addDoc`，用于触发菜单项的操作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

父组件中：

<el-menu
   class="el-menu-vertical-demo"
   :default-active="$route.path"
   router
   exact
>
   <tree :docList="docList"  ></tree>
</el-menu>

import tree from './components/tree.vue'

递归菜单子组件：

<div v-for="item in docList" :key="item.document_id">
      <el-menu-item 
         v-if="item.children.length==0" 
         :index="item.path" 
         @click="selectMenu(item)"
       >
       </el-menu-item>
       <el-sub-menu v-else :index="item.path">
                <template #title > 
                    <div style="width:100%" @mouseenter="item.options=true" @mouseleave="item.options=false">
                        <span >{{item.title}}</span>
                    </div>
                </template>
                //递归自己
                //v-bind="$attrs" 设置这个属性，可以讲子菜单的时间递归
                <tree v-bind="$attrs" :docList="item.children"></tree>
        </el-sub-menu>
</div>

export default ({
    name: 'Tree',
    props: ['docList'],
    setup(props, context) {
        
    },
})
</script>

通过鼠标移入移出实现菜单的增删改查：

<template>
    <div>
        <div v-for="item in docList" :key="item.document_id">
            <el-menu-item v-if="item.children.length==0" :index="item.path"
                            @click="selectMenu(item)"
                            @mouseenter="item.options=true"
                            @mouseleave="item.options=false"
                            >
                <span>{{item.title}}</span>
                <span v-if="item.options">
                    <!-- <a v-if="item.is_leaf==0" @click.stop="addDoc('directory', item)"> +目录 </a>
                    <a v-if="item.is_leaf==0" @click.stop="addDoc('doc', item)"> +文档 </a>
                    <a @click.stop="updateDoc(item)">&nbsp; 修改 </a>
                    <a @click.stop="deleteDoc(item)"> 删除 </a> -->
                </span>
            </el-menu-item>
            <el-sub-menu v-else :index="item.path">
                <template #title > 
                    <div style="width:100%" @mouseenter="item.options=true" @mouseleave="item.options=false">
                        <span >{{item.title}}</span>
                        <span v-if="item.options">
                            <!-- <a v-if="item.is_leaf==0" @click.stop="addDoc('directory', item)"> +目录 </a>
                            <a v-if="item.is_leaf==0" @click.stop="addDoc('doc', item)"> +文档 </a>
                            <a @click.stop="updateDoc(node, item)">&nbsp; 修改 </a>
                            <a @click.stop="deleteDoc(item)"> 删除 </a> -->
                        </span>
                    </div>
                </template>
                    <tree v-bind="$attrs" :docList="item.children"></tree>
            </el-sub-menu>
        </div>
    </div>
            
</template>
<script> 
import { getCurrentInstance } from 'vue'
export default ({
    name: 'Tree',
    props: ['docList'],
    setup(props, context) {
        let { proxy } = getCurrentInstance()
        const selectMenu = (item) => {
            context.emit('menuItem', item)
        }
        // 修改
        const updateDoc = (item) => {
            context.emit('updateDoc', item)
        }
        // 删除
        const deleteDoc = (item) => {
            context.emit('deleteDoc', item)
        }
        // 新增
        const addDoc = (type, item) => {
            let data = {
                type: type,
                item: item
            }
            context.emit('addDoc', data)
        }
        return {
            selectMenu,
            deleteDoc,
            updateDoc,
            addDoc
        }
    },
})
</script>