vue 循环tabs 标签页 组件_vue2.0 + elementUi 实现无限tab式页面

使用elementUi的tabs组件 + vuex 实现点击菜单或者点击按钮新增一个tab标签页

一、思路

由于之前一直做的单页面项目都是使用路由控制实现的路由改变销毁原有组件加载新组件的方式，是view区域始终只有一个路由的方式实现单页面的管理系统，后面接到一个新的项目后发现原来的逻辑对于新需求不太适应，首先新的需求要求，打开的页面或者类页面的tab标签页数量上可能是无限的，这样对于使用路由逻辑上就不太好实现，比如我现在需要打开N个订单详情，路由控制的方式就比较麻烦了，虽然可以用keep-alive 标签来控制和保存参数，但是各个页面之间的交互以及菜单与tab方面的切换，还有国际化做起来就比较麻烦。后面就想到使用elementUi的tabs组件和vuex来做，因为tabs组件效果上看上去和浏览器的新标签打开页面效果比较相似，这样可以减少很多交互效果的css和js书写，不过这个组件也有很多坑(具体后面再说)

1.产品想要的效果

image

首先点击一个菜单项生成一个tab页面，其他的页面或者组件也能通过点击生成tabs 相同的组件但是除菜单的不可以重复外其他入口的是可以无限打开的，比如订单详情

image

点击x的时候关闭当前页面，点击刷新标识的时候刷新当前页面的数据。

2 菜单效果

image

菜单实现分为三级菜单、一、二级 为展开式菜单，三级菜单为弹出式菜单(这个菜单踩了不少坑)因为这个项目是一开始就确定使用elementUi来做的，这次是属于重构所以优先考虑的是使用elementUi自带的组件来实现这个效果，但是这个效果显然 没有现成的 elementUi的API上只有全展开或者全弹出式的菜单没有这种混合的，后面是做其他业务模块的时候使用到了Popover弹出 组件 于是来了灵感使用 于是使用 NavMenu + Popover 的方式实现了这种混合菜单。

上干货：

el-menu

:unique-opened="true"

class="el-menu_nav"

collapse-transition

:collapse="isCollapse"

:default-active="activeTabName"

@select="addTab">

:index="item.index"

:key="index"

v-if="!item.children"

v-for="(item,index) in navList"

>

{ {item.title}}

background-color="#fff"

:index="item.index"

:key="index"

v-if="item.children"

v-for="(item,index) in