本文介绍如何在Vue组件中利用ElementUI的Tabs组件动态展示网页。首先，讨论了两种Vue组件内HTML的写法，推荐使用`type=text/template`的HTML文件或`cshtml`文件来方便编写和调试。接着，详细说明了添加ElementUI Tabs的步骤，包括初始化变量、定义Tabs标签、处理动态加载和关闭事件。通过这种方式，实现了动态路由加载多个网页，并确保左侧导航与选中Tab高亮同步。提供了完整的源码链接供下载参考。
使用上一篇文章搭好的主框架，用ElementUI Tabs 显示网页。
1、vue 组件里html 写法
一种大部分是在js文件 或 .vue 文件，用template: '' 。 这种方法html 如果内容多不好写，也不容易调试
一种是可以在Html 文件或在cshtml 文件里 用 script标签 type类型是 type=text/template，这种方法跟正常的HTML代码一样 ，选用这种写法搭框架
2、添加elementUI tabs 标签
在主页初始化Tabs 标签所需要的变量
添加tabs 标签，添加div 定义id，div里是保存从后端加载的网页，在用component动态组件显示
在导航添加加载网页事件
定义打开网页事件，先判断当前的tabs是否已经加载，如果已加载激活当前tabs选项卡，如果不存在访问服务器获取，保存在tabs定义的div里，name要跟定义的组件名称一致，用eval 字符串转变量赋值给tabs标签里的动态组件显示网页。
关闭tabs选项卡事件
在控制器修改网页路径
定义网页 组件名称要跟Menu 类的 name 一致
实现效果
动态路由加载网页
同时存在多个网页
关闭、选择tabs 选项卡，左侧导航跟激活的选项卡相对应的导航高亮颜色
源码
csdn
扫一扫
6221
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
