vue iview ui 实现左侧menu菜单和tabs联动

Life is short , "play" more!
本文来自lihao's Blog,转载请注明。

想实现左侧menu菜单和tabs 联动, 因为对vue是初学不是特别熟悉, 还是折腾了好几天.   前些日期发现了iview ui, 感觉不错, 并不必bootstrap 差, 所以用iview 重新写了一个demo.  iview 貌似还是国人开发的, 值得推荐.

menu菜单和tabs的联动是指, 我在左侧点击某个菜单时, 右侧的tab页自动创建一个tab标签, 如果点击的该菜单已经存在于tab标签下, 则自动激活该标签显示该标签下内容.    标签下 面需要动态加载dynamic vue component 的内容.   单独的tab页,增加tab和移除tab 标签中并不复杂, 因为iview的tab 组件默认已经支持了.  所以我这里仅是实现menu和tab的联动.  menu 菜单点击后,  触发一个 select 操作,  那么我们需要获取tabs的component 设计activeKey即可实现.

主要的技术点:

1.   动态加载vue compoenent

2.  可以通过ref 指示获取该vue component.  具体用法为

 

 

完整代码如下:

 

 

此篇文章已被阅读218 次


发表评论

电子邮件地址不会被公开。 必填项已用*标注