element递归菜单导航折叠后文字不隐藏
先分析下为什么不隐藏，因为在你使用递归写element的导航时会使用递归调用组件，而在vue的最外层要用div等标签将所有模板包含起来，这就导致导航在递归渲染时会多出很多div标签，导致出现各种奇...
先分析下为什么不隐藏，因为在你使用递归写element的导航时会使用递归调用组件，而在vue的最外层要用div等标签将所有模板包含起来，这就导致导航在递归渲染时会多出很多div标签，导致出现各种奇葩问题，以下有两种解决方案。
先看会出现的问题，文字隐藏不掉，有的人还遇到过展开标识（右箭头，尖括号）折叠后不隐藏，这都和代码从哪里循环有关，这个不多做纠结。
第一种解决方案：
既然刚刚说过是因为div的问题，那么我们想办法让他不渲染，这时可以借助插件。
项目安装vue-fragment
cnpm install --save vue-fragment
在main.js中引入
// main.js import Fragment from 'vue-fragment' Vue.use(Fragment.Plugin)
将递归组件中的<div>修改为<fragment>即可
<template>
<fragment>
</fragment>
</template>
完美解决：
方案二
上面已经有一种方案可以解决了，下面只说思路和案例给大家看下就得了。
思路：刚刚说到是因为渲染了很多无用的div才让导肮受到影响，为什么会这样呢，因为递归时可能在无限调用子组件，父组件写一半，子组件写一半会造成导航中间出现无用div，可能 大家是网上找的例子，网上的例子确实很多这样的，那我们把导航模板写在一个组件不就可以了，然后命名name的模板名，就可以实现无需引入组件便可自己调用自己，完美。
方案二的Vue代码实例
点击下载： vue-el-menu.zip
下载时使用 npm install 或 cnpm install安装包，使用npm run serve 或 npm run dev启动。
- 发表于 2021-06-07 17:47
- 阅读 ( 552 )
- 分类：web前端开发
