vue元素选项卡选项卡分页效果

本文实例为大家分享了某视频剪辑软件元素选项卡选项卡分页效果的具体代码，供大家参考，具体内容如下

文件目录：

功能展示：

路由配置：

{ path: '/account '，component: ()=import('./components/home/home.vue ')，//布局页面重定向：/帐户/所有帐户/列表/定向到目录路径名称： '账号管理，子项：[{ path : '/帐户/所有帐户/列表'，重定向： '/帐户/所有帐户/员工'，//定向到员工路径名称： '员工管理，component: ()=import('./组件/视图/帐户/索引。vue ')，children :[{ path : '/account/all-account/staff '，component: ()=import('./组件/视图/帐户/帐户。vue ')，hidden: true }，{ path : '/account/all-account/agent '，name: '代理人账号，component: ()=import('./组件/视图/帐户/代理。vue ')，hidden: true }，{ path : '/account/all-account/department '，name: '部门设置，component: ()=import('./组件/视图/客户/部门。vue ')，hidden: true }，{ path : '/account/all-account/role '，name: '角色权限设置，component: ()=import('./组件/视图/帐户/角色。vue ')，hidden: true }，{ path : '/account/all-account/city '，name: '城市管理，component: ()=import('./组件/视图/帐户/城市。vue ')，hidden: true }，] }，}组件代码：

index.vue

template div class=' page _ container ' style=' overflow : auto；高度：100%;背景# ffffffpadding: 10px最小宽度：1200像素路由器-查看///div/模板帐户。某视频剪辑软件

模板！-账号管理标签分页-div id=' employeeCareMng ' class=' page _ container ' style=' overflow : auto；高度：100%;背景： # ffffff最小宽度：1200像素div v-if=' is NAtive ' div style=' height :100%；El-tab v-model=' ActiVe NAmE ' style=' height :100%；@ tab-click=' handleClick ' El-tab-窗格标签='员工账号name=' first ' style=' height :100%；'五线谱//El-tab-窗格El-tab-窗格标签='代理人账号name=' second ' style=' height :100%；'代理//El-选项卡-窗格埃尔-选项卡-窗格标签='部门设置name=' third ' style=' height :100%；'部门//El-选项卡-窗格埃尔-选项卡-窗格标签='角色权限设置名称='第四'样式='高度：100%；'角色//El-选项卡-窗格埃尔-选项卡-窗格标签='城市管理name=' fifth ' style=' height :100%；'city//El-tab-pane/El-tab/div/div v-else style=' height :100%；'router-view///div/div/templatescriptimport staff from ' ./工作人员"进口代理自"。/代理"进口部门自"。/部门"从导入角色"。/角色"从导入城市"。/city '导出默认值{组件： }职员、代理、部门、角色、城市}，data(){ return { isnity : true，activeName: 'first' //默认先渲染第一个} }, //页面初始默认是第一个板块展示创建了(){如果(这.$路线。path==='/account/all-account/staff '){ this。notice=true } else { this。is notice=false } }，methods: { handleClick(tab，event) { console.log(tab，event)} } } }/脚本样式作用域。page _ container { background : # ffffff；高度： 100%;}/style style # employeecarming .El-tab _ _ content { height : calc(100%-55px)；}/样式其他制表符分页的组件：

staff.vue其他类似

模板div class='五线谱'员工账号/div/模板脚本导出默认{ name:'staff '，data(){ return } }，created(){ }，methods: { }，}；/脚本样式范围以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。