|
@@ -6,6 +6,7 @@ export default {
|
|
data () {
|
|
data () {
|
|
return {
|
|
return {
|
|
fullPathList: [],
|
|
fullPathList: [],
|
|
|
|
+ tabsList: [],
|
|
pages: [],
|
|
pages: [],
|
|
activeKey: '',
|
|
activeKey: '',
|
|
newTabIndex: 0
|
|
newTabIndex: 0
|
|
@@ -35,7 +36,7 @@ export default {
|
|
})
|
|
})
|
|
|
|
|
|
this.pages.push(this.$route)
|
|
this.pages.push(this.$route)
|
|
- this.fullPathList.push(this.$route.fullPath)
|
|
|
|
|
|
+ this.tabsList.push(this.$route.name)
|
|
this.selectedLastPath()
|
|
this.selectedLastPath()
|
|
},
|
|
},
|
|
methods: {
|
|
methods: {
|
|
@@ -43,30 +44,30 @@ export default {
|
|
this[action](targetKey)
|
|
this[action](targetKey)
|
|
},
|
|
},
|
|
remove (targetKey) {
|
|
remove (targetKey) {
|
|
- this.pages = this.pages.filter(page => page.fullPath !== targetKey)
|
|
|
|
- this.fullPathList = this.fullPathList.filter(path => path !== targetKey)
|
|
|
|
|
|
+ this.pages = this.pages.filter(page => page.name !== targetKey)
|
|
|
|
+ this.tabsList = this.tabsList.filter(name => name !== targetKey)
|
|
// 判断当前标签是否关闭,若关闭则跳转到最后一个还存在的标签页
|
|
// 判断当前标签是否关闭,若关闭则跳转到最后一个还存在的标签页
|
|
- if (!this.fullPathList.includes(this.activeKey)) {
|
|
|
|
|
|
+ if (!this.tabsList.includes(this.activeKey)) {
|
|
this.selectedLastPath()
|
|
this.selectedLastPath()
|
|
}
|
|
}
|
|
},
|
|
},
|
|
selectedLastPath () {
|
|
selectedLastPath () {
|
|
- this.activeKey = this.fullPathList[this.fullPathList.length - 1]
|
|
|
|
|
|
+ this.activeKey = this.tabsList[this.tabsList.length - 1]
|
|
},
|
|
},
|
|
|
|
|
|
// content menu
|
|
// content menu
|
|
closeThat (e) {
|
|
closeThat (e) {
|
|
// 判断是否为最后一个标签页,如果是最后一个,则无法被关闭
|
|
// 判断是否为最后一个标签页,如果是最后一个,则无法被关闭
|
|
- if (this.fullPathList.length > 1) {
|
|
|
|
|
|
+ if (this.tabsList.length > 1) {
|
|
this.remove(e)
|
|
this.remove(e)
|
|
} else {
|
|
} else {
|
|
this.$message.info('这是最后一个标签了, 无法被关闭')
|
|
this.$message.info('这是最后一个标签了, 无法被关闭')
|
|
}
|
|
}
|
|
},
|
|
},
|
|
closeLeft (e) {
|
|
closeLeft (e) {
|
|
- const currentIndex = this.fullPathList.indexOf(e)
|
|
|
|
|
|
+ const currentIndex = this.tabsList.indexOf(e)
|
|
if (currentIndex > 0) {
|
|
if (currentIndex > 0) {
|
|
- this.fullPathList.forEach((item, index) => {
|
|
|
|
|
|
+ this.tabsList.forEach((item, index) => {
|
|
if (index < currentIndex) {
|
|
if (index < currentIndex) {
|
|
this.remove(item)
|
|
this.remove(item)
|
|
}
|
|
}
|
|
@@ -76,9 +77,9 @@ export default {
|
|
}
|
|
}
|
|
},
|
|
},
|
|
closeRight (e) {
|
|
closeRight (e) {
|
|
- const currentIndex = this.fullPathList.indexOf(e)
|
|
|
|
- if (currentIndex < (this.fullPathList.length - 1)) {
|
|
|
|
- this.fullPathList.forEach((item, index) => {
|
|
|
|
|
|
+ const currentIndex = this.tabsList.indexOf(e)
|
|
|
|
+ if (currentIndex < (this.tabsList.length - 1)) {
|
|
|
|
+ this.tabsList.forEach((item, index) => {
|
|
if (index > currentIndex) {
|
|
if (index > currentIndex) {
|
|
this.remove(item)
|
|
this.remove(item)
|
|
}
|
|
}
|
|
@@ -88,8 +89,8 @@ export default {
|
|
}
|
|
}
|
|
},
|
|
},
|
|
closeAll (e) {
|
|
closeAll (e) {
|
|
- const currentIndex = this.fullPathList.indexOf(e)
|
|
|
|
- this.fullPathList.forEach((item, index) => {
|
|
|
|
|
|
+ const currentIndex = this.tabsList.indexOf(e)
|
|
|
|
+ this.tabsList.forEach((item, index) => {
|
|
if (index !== currentIndex) {
|
|
if (index !== currentIndex) {
|
|
this.remove(item)
|
|
this.remove(item)
|
|
}
|
|
}
|
|
@@ -121,14 +122,21 @@ export default {
|
|
},
|
|
},
|
|
watch: {
|
|
watch: {
|
|
'$route': function (newVal) {
|
|
'$route': function (newVal) {
|
|
- this.activeKey = newVal.fullPath
|
|
|
|
- if (this.fullPathList.indexOf(newVal.fullPath) < 0) {
|
|
|
|
- this.fullPathList.push(newVal.fullPath)
|
|
|
|
|
|
+ this.activeKey = newVal.name
|
|
|
|
+ const index = this.tabsList.indexOf(newVal.name)
|
|
|
|
+ // 不存在
|
|
|
|
+ if (index < 0) {
|
|
|
|
+ this.tabsList.push(newVal.name)
|
|
this.pages.push(newVal)
|
|
this.pages.push(newVal)
|
|
|
|
+ } else {
|
|
|
|
+ // 已存在
|
|
|
|
+ this.pages.splice(index, 1, newVal)
|
|
}
|
|
}
|
|
},
|
|
},
|
|
activeKey: function (newPathKey) {
|
|
activeKey: function (newPathKey) {
|
|
- this.$router.push({ path: newPathKey })
|
|
|
|
|
|
+ const row = this.pages.find(item => item.name == newPathKey)
|
|
|
|
+ console.log(row.fullPath)
|
|
|
|
+ this.$router.push({ path: row.fullPath })
|
|
}
|
|
}
|
|
},
|
|
},
|
|
render () {
|
|
render () {
|
|
@@ -137,10 +145,10 @@ export default {
|
|
return (
|
|
return (
|
|
<a-tab-pane
|
|
<a-tab-pane
|
|
style={{ height: 0 }}
|
|
style={{ height: 0 }}
|
|
- key={page.fullPath} closable={pages.length > 1}
|
|
|
|
|
|
+ key={page.name} closable={pages.length > 1}
|
|
>
|
|
>
|
|
<span slot="tab">
|
|
<span slot="tab">
|
|
- {this.renderTabPane(page.meta.customTitle || page.meta.title, page.fullPath)}
|
|
|
|
|
|
+ {this.renderTabPane(page.meta.customTitle || page.meta.title, page.name)}
|
|
</span>
|
|
</span>
|
|
</a-tab-pane>)
|
|
</a-tab-pane>)
|
|
})
|
|
})
|