element递归菜单导航折叠后文字不隐藏

先分析下为什么不隐藏,因为在你使用递归写element的导航时会使用递归调用组件,而在vue的最外层要用div等标签将所有模板包含起来,这就导致导航在递归渲染时会多出很多div标签,导致出现各种奇...

先分析下为什么不隐藏,因为在你使用递归写element的导航时会使用递归调用组件,而在vue的最外层要用div等标签将所有模板包含起来,这就导致导航在递归渲染时会多出很多div标签,导致出现各种奇葩问题,以下有两种解决方案。

先看会出现的问题,文字隐藏不掉,有的人还遇到过展开标识(右箭头,尖括号)折叠后不隐藏,这都和代码从哪里循环有关,这个不多做纠结。

attachments-2021-06-lFrxNSG260bde661820d6.png

第一种解决方案:

既然刚刚说过是因为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>

完美解决:

attachments-2021-06-ocPfzlNg60bde8a62234d.png


方案二

上面已经有一种方案可以解决了,下面只说思路和案例给大家看下就得了。

思路:刚刚说到是因为渲染了很多无用的div才让导肮受到影响,为什么会这样呢,因为递归时可能在无限调用子组件,父组件写一半,子组件写一半会造成导航中间出现无用div,可能             大家是网上找的例子,网上的例子确实很多这样的,那我们把导航模板写在一个组件不就可以了,然后命名name的模板名,就可以实现无需引入组件便可自己调用自己,完美。

方案二的Vue代码实例

    点击下载:   vue-el-menu.zip


下载时使用 npm install 或 cnpm install安装包,使用npm run serve 或 npm run dev启动。




你可能感兴趣的文章

相关问题

0 条评论

请先 登录 后评论
admin
admin

608 篇文章

作家榜 »

  1. admin 608 文章
  2. 粪斗 185 文章
  3. 王凯 92 文章
  4. 廖雪 78 文章
  5. 牟雪峰 12 文章
  6. 李沁雪 9 文章
  7. 全易 2 文章
  8. 魏晓亮 0 文章