Element-plus侧边栏踩坑的问题解决
更新时间:2023年08月20日 11:34:20 作者:真让人秃头呀
本文主要介绍了Element-plus侧边栏踩坑的问题解决,主要解决了el-menu直接嵌套el-menu-item菜单,折叠时不会出现文字显示和小箭头无法隐藏的问题,具有一定的参考价值,感兴趣的可以了解一下
问题描述
el-menu直接嵌套el-menu-item菜单,折叠时不会出现文字显示和小箭头无法隐藏的问题,但是实际开发需求中难免需要把el-menu-item封装为组件
解决
vue3项目中嵌套两层template
<template> <template v-for="item in list" :key="item.path"> <!-- 一级路由 --> <el-menu-item v-if="!item.children && !item.meta?.hidden" :index="item.path"> <el-icon size="30px"> <component :is="item.meta?.icon"></component> </el-icon> <template #title> <span class="ml-1">{{ item.meta?.title }}</span> </template> </el-menu-item> <!-- 二级路由但只有一个子项 --> <el-menu-item v-if="(item.meta?.single && item.children) && !item.meta?.hidden" :index="item.children[0].path"> <el-icon size="30px"> <component :is="item.children[0].meta?.icon"></component> </el-icon> <template #title> <span class="ml-1">{{ item.children[0].meta?.title }}</span> </template> </el-menu-item> <!-- 二级路由 --> <el-sub-menu :index="item.path" v-if="(item.children && item.children.length > 1) && !item.meta?.hidden"> <template #title> <el-icon size="30px"> <component :is="item.meta?.icon"></component> </el-icon> <span class="ml-1">{{ item.meta?.title }}</span> </template> <!-- 递归路由 --> <MenuItem :list="item.children"> </MenuItem> </el-sub-menu> </template> </template>
效果
到此这篇关于Element-plus侧边栏踩坑的问题解决的文章就介绍到这了,更多相关Element-plus侧边栏踩坑内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!
相关文章
el-checkbox-group 的v-model无法绑定对象数组的问题解决
elementUI官方文档中el-checkbox-group组件绑定的都为一维数组,本文主要介绍了解决el-checkbox-group 的v-model无法绑定对象数组,感兴趣的可以了解一下2023-05-05Vue v2.4中新增的$attrs及$listeners属性使用教程
这篇文章主要给大家介绍了关于Vue v2.4中新增的$attrs及$listeners属性的使用方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧。2018-01-01
最新评论