本文实例为大家分享了vue +元素标签选项卡分页效果的具体代码,供大家参考,具体内容如下
文件目录:
功能展示:
路由配置:
{
路径:/账户,
组件:()=比;导入(“. ./组件/home/home.vue”),//布局页面
重定向:列表/账户/所有账户/,//定向到列表路径
名称:“账号管理”,
孩子:(
{
路径:/账户/所有账户/列表,
重定向:员工/账户/所有账户/,//定向到员工路径
名称:“员工管理”,
组件:()=比;进口(“. ./组件/视图/账户/index.vue '),
孩子:(
{
路径:/账户/所有账户/人员,
组件:()=比;进口(“. ./组件/视图/账户/account.vue '),
隐藏:真
}，
{
路径:/账户/所有客户/代理,
名称:“代理人账号”,
组件:()=比;进口(“. ./组件/视图/账户/agent.vue '),
隐藏:真
}，
{
路径:/账户/所有账户/部门,
名称:“部门设置”,
组件:()=比;进口(“. ./组件/视图/账户/department.vue '),
隐藏:真
}，
{
路径:/账户/所有账户的作用,
名称:“角色权限设置的,
组件:()=比;进口(“. ./组件/视图/账户/role.vue '),
隐藏:真
}，
{
路径:/账户/所有账户/城市,
名称:“城市管理”,
组件:()=比;进口(“. ./组件/视图/账户/city.vue '),
隐藏:真
}，
]
}，
}
之前
组件代码:
index.vue
& lt; template>
& lt; div类=皃age_container”比;
& lt; router-view/比;
& lt;/div>
& lt;/template>
account.vue
& lt; template>
& lt; !分——账号管理选项卡页——比;
& lt; div id=癳mployeeCareMng”class=皃age_container”比;
& lt; div v=癷sNative”比;
& lt; div比;
& lt; el-tabs v模型=" activeName " @tab-click=癶andleClick”比;
& lt; el-tab-pane标签="员工账号“name=暗谝弧钡脑?
& lt;员工/比;
& lt;/el-tab-pane>
& lt; el-tab-pane标签="代理人账号“name=暗诙北?
& lt;代理/比;
& lt;/el-tab-pane>
& lt; el-tab-pane标签="部门设置“name=暗谌北?
& lt;部门/比;
& lt;/el-tab-pane>
& lt; el-tab-pane标签="角色权限设置“name=暗谒摹北?
& lt;角色/比;
& lt;/el-tab-pane>
& lt; el-tab-pane标签="城市管理“name=暗谖濉北?
& lt;城市/比;
& lt;/el-tab-pane>
& lt;/el-tabs>
& lt;/div>
& lt;/div>
& lt; div v-else比;
& lt; router-view/比;
& lt;/div>
& lt;/div>
& lt;/template>
& lt; script>
导入员工从“/员工。”
从’。/代理的进口代理
从“。/部门的进口部门
从“进口的角色。/角色'
从“进口城市。/城”
出口默认{
组件:{
员工、代理、部门、角色的城市
}，
数据(){
返回{
isNative:没错,
activeName:‘第一次’//默认先渲染第一个
}
}，//页面初始默认是第一个板块展示
创建(){
如果美元的路线。路===/账户/所有账户/员工){
这一点。isNative=true
其他}{
这一点。isNative=false
}
}，
方法:{
handleClick(选项卡中,事件){
控制台。日志(选项卡中,事件)
}
}
}
& lt;/script>
& lt; scoped>风格;
.page_container {
背景:# ffffff;
高度:100%;
}
& lt;/style>
& lt;风格比;
# employeeCareMng .el-tabs__content {
高度:calc - 55 px (100%);
}
& lt;/style>
其分他标签页的组件:
staff.vue 其他类似
& lt; template>
& lt; div类="员工"比;
员工账号
& lt;/div>
& lt;/template>
& lt; script>
出口默认{
名称:“工作人员”,
数据(){
返回{
}
}，
创建(){
}，
方法:{
}，
};
& lt;/script>
& lt;风格scoped>
