多tab标签页切换问题修改

This commit is contained in:
暮光:城中城
2021-08-16 20:14:19 +08:00
parent 04b4794f92
commit 27c0d8e50a
6 changed files with 25 additions and 21 deletions

View File

@@ -1 +1 @@
<!DOCTYPE html><html lang=en><head><meta charset=utf-8><meta http-equiv=X-UA-Compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1"><link rel=icon href=favicon-db.png><title>数据库文档管理</title><link href=css/chunk-vendors.8924efc6.css rel=preload as=style><link href=css/index.2a7107f3.css rel=preload as=style><link href=js/chunk-vendors.333ced1f.js rel=preload as=script><link href=js/index.067115cf.js rel=preload as=script><link href=css/chunk-vendors.8924efc6.css rel=stylesheet><link href=css/index.2a7107f3.css rel=stylesheet></head><body><noscript><strong>We're sorry but zyplayer-db-ui doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id=app></div><script src=js/chunk-vendors.333ced1f.js></script><script src=js/index.067115cf.js></script></body></html> <!DOCTYPE html><html lang=en><head><meta charset=utf-8><meta http-equiv=X-UA-Compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1"><link rel=icon href=favicon-db.png><title>数据库文档管理</title><link href=css/chunk-vendors.8924efc6.css rel=preload as=style><link href=css/index.ba19e721.css rel=preload as=style><link href=js/chunk-vendors.1ddbf5ec.js rel=preload as=script><link href=js/index.6b959b2c.js rel=preload as=script><link href=css/chunk-vendors.8924efc6.css rel=stylesheet><link href=css/index.ba19e721.css rel=stylesheet></head><body><noscript><strong>We're sorry but zyplayer-db-ui doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id=app></div><script src=js/chunk-vendors.1ddbf5ec.js></script><script src=js/index.6b959b2c.js></script></body></html>

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@@ -1,7 +1,7 @@
<template> <template>
<div> <div>
<el-tabs v-model="activePage" type="card" closable @tab-click="changePage" @tab-remove="removePageTab" style="padding: 5px 10px 0;"> <el-tabs v-model="activePage" type="card" closable @tab-click="changePage" @tab-remove="removePageTab" style="padding: 5px 10px 0;">
<el-tab-pane :label="pageTabNameMap[item.fullPath]||item.name" :name="getRouteRealPath(item)" v-for="item in pageList"/> <el-tab-pane :label="pageTabNameMap[item.fullPath]||item.name" :name="getRouteRealPath(item)" :fullPath="item.fullPath" :key="item.fullPath" v-for="item in pageList"/>
</el-tabs> </el-tabs>
<keep-alive> <keep-alive>
<router-view :key="$route.fullPath" @initLoadDataList="initLoadDataList" @loadDatasourceList="loadDatasourceList"/> <router-view :key="$route.fullPath" @initLoadDataList="initLoadDataList" @loadDatasourceList="loadDatasourceList"/>
@@ -30,10 +30,12 @@
} }
}, },
created() { created() {
this.pageList.push(this.$route); let {name, path, fullPath} = this.$route;
this.pageList.push({name, path, fullPath});
let activePage = this.getRouteRealPath(this.$route); let activePage = this.getRouteRealPath(this.$route);
this.linkList.push(activePage); this.linkList.push(activePage);
this.activePage = activePage; this.activePage = activePage;
this.$router.push(this.$route.fullPath);
}, },
watch: { watch: {
'$route': function (newRoute, oldRoute) { '$route': function (newRoute, oldRoute) {
@@ -41,13 +43,11 @@
this.activePage = activePage; this.activePage = activePage;
if (this.linkList.indexOf(activePage) < 0) { if (this.linkList.indexOf(activePage) < 0) {
this.linkList.push(activePage); this.linkList.push(activePage);
this.pageList.push(newRoute); let {name, path, fullPath} = newRoute;
} this.pageList.push({name, path, fullPath});
},
'activePage': function (key) {
if (!this.isIgnoreParamPath(key)) {
this.$router.push(key);
} }
let pageRoute = this.pageList.find(item => this.getRouteRealPath(item) === activePage);
pageRoute.fullPath = newRoute.fullPath;
}, },
}, },
methods: { methods: {
@@ -63,8 +63,9 @@
getRouteRealPath(route) { getRouteRealPath(route) {
return this.isIgnoreParamPath(route.path) ? route.path : route.fullPath; return this.isIgnoreParamPath(route.path) ? route.path : route.fullPath;
}, },
changePage(key) { changePage(tab) {
this.activePage = key.name; this.activePage = tab.name;
this.$router.push(tab.$attrs.fullPath);
}, },
editPage(key, action) { editPage(key, action) {
this[action](key); this[action](key);
@@ -72,13 +73,16 @@
removePageTab(key) { removePageTab(key) {
if (this.pageList.length === 1) { if (this.pageList.length === 1) {
this.$message.warning('这是最后一页,不能再关闭了啦'); this.$message.warning('这是最后一页,不能再关闭了啦');
return return;
} }
this.pageList = this.pageList.filter(item => this.getRouteRealPath(item) !== key); this.pageList = this.pageList.filter(item => this.getRouteRealPath(item) !== key);
let index = this.linkList.indexOf(key);
this.linkList = this.linkList.filter(item => item !== key); this.linkList = this.linkList.filter(item => item !== key);
index = index >= this.linkList.length ? this.linkList.length - 1 : index; let index = this.linkList.indexOf(this.activePage);
if (index < 0) {
index = this.linkList.length - 1;
this.activePage = this.linkList[index]; this.activePage = this.linkList[index];
this.$router.push(this.activePage);
}
}, },
} }
} }