多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>
<div>
<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>
<keep-alive>
<router-view :key="$route.fullPath" @initLoadDataList="initLoadDataList" @loadDatasourceList="loadDatasourceList"/>
@@ -28,12 +28,14 @@
pageTabNameMap () {
return this.$store.state.global.pageTabNameMap;
}
},
created() {
this.pageList.push(this.$route);
},
created() {
let {name, path, fullPath} = this.$route;
this.pageList.push({name, path, fullPath});
let activePage = this.getRouteRealPath(this.$route);
this.linkList.push(activePage);
this.activePage = activePage;
this.$router.push(this.$route.fullPath);
},
watch: {
'$route': function (newRoute, oldRoute) {
@@ -41,13 +43,11 @@
this.activePage = activePage;
if (this.linkList.indexOf(activePage) < 0) {
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: {
@@ -63,8 +63,9 @@
getRouteRealPath(route) {
return this.isIgnoreParamPath(route.path) ? route.path : route.fullPath;
},
changePage(key) {
this.activePage = key.name;
changePage(tab) {
this.activePage = tab.name;
this.$router.push(tab.$attrs.fullPath);
},
editPage(key, action) {
this[action](key);
@@ -72,13 +73,16 @@
removePageTab(key) {
if (this.pageList.length === 1) {
this.$message.warning('这是最后一页,不能再关闭了啦');
return
}
this.pageList = this.pageList.filter(item => this.getRouteRealPath(item) !== key);
let index = this.linkList.indexOf(key);
this.linkList = this.linkList.filter(item => item !== key);
index = index >= this.linkList.length ? this.linkList.length - 1 : index;
this.activePage = this.linkList[index];
return;
}
this.pageList = this.pageList.filter(item => this.getRouteRealPath(item) !== key);
this.linkList = this.linkList.filter(item => item !== key);
let index = this.linkList.indexOf(this.activePage);
if (index < 0) {
index = this.linkList.length - 1;
this.activePage = this.linkList[index];
this.$router.push(this.activePage);
}
},
}
}