fix: 修复tabs组件因v-model绑定值类型不符导致的报警问题
This commit is contained in:
@@ -5,7 +5,7 @@
|
|||||||
<el-tab-pane
|
<el-tab-pane
|
||||||
v-for="(tab,index) in tabsData"
|
v-for="(tab,index) in tabsData"
|
||||||
:key="tab.i18n"
|
:key="tab.i18n"
|
||||||
:name="index"
|
:name="JSON.stringify(index)"
|
||||||
:disabled="tab.disable">
|
:disabled="tab.disable">
|
||||||
<template #label>
|
<template #label>
|
||||||
<div class="chart-tabs__label">
|
<div class="chart-tabs__label">
|
||||||
@@ -71,7 +71,7 @@ export default {
|
|||||||
const router = useRouter()
|
const router = useRouter()
|
||||||
const routerPath = router.currentRoute.value.path
|
const routerPath = router.currentRoute.value.path
|
||||||
const tabList = window.currentChartTabList
|
const tabList = window.currentChartTabList
|
||||||
let currentTab = 0
|
let currentTab = '0'
|
||||||
|
|
||||||
if (props.data) {
|
if (props.data) {
|
||||||
tabsData.value = [...props.data]
|
tabsData.value = [...props.data]
|
||||||
@@ -87,12 +87,13 @@ export default {
|
|||||||
if (props.router === 'noRouter') {
|
if (props.router === 'noRouter') {
|
||||||
const { query } = useRoute()
|
const { query } = useRoute()
|
||||||
const tabIndexParam = query.tabIndex
|
const tabIndexParam = query.tabIndex
|
||||||
currentTab = ref(tabIndexParam ? parseInt(tabIndexParam) : 0)
|
currentTab = ref(tabIndexParam ? JSON.stringify(tabIndexParam) : '0')
|
||||||
} else if (!tabList) {
|
} else if (!tabList) {
|
||||||
// 此处为刷新界面时,根据当前路由获取index
|
// 此处为刷新界面时,根据当前路由获取index
|
||||||
currentTab = tabsData.value.findIndex(item => {
|
currentTab = tabsData.value.findIndex(item => {
|
||||||
return item.path === routerPath
|
return item.path === routerPath
|
||||||
})
|
})
|
||||||
|
currentTab = JSON.stringify(currentTab)
|
||||||
window.currentChartTabList = [{ path: routerPath, index: currentTab }]
|
window.currentChartTabList = [{ path: routerPath, index: currentTab }]
|
||||||
} else {
|
} else {
|
||||||
// 此处为切换界面,如果window里保存的路径和tabsData里的路径一致,选择window数据并使用
|
// 此处为切换界面,如果window里保存的路径和tabsData里的路径一致,选择window数据并使用
|
||||||
@@ -106,12 +107,12 @@ export default {
|
|||||||
}
|
}
|
||||||
|
|
||||||
if (obj0 && obj1) {
|
if (obj0 && obj1) {
|
||||||
currentTab = parseFloat(tabList[1].index)
|
currentTab = tabList[1].index
|
||||||
} else if (obj0) {
|
} else if (obj0) {
|
||||||
currentTab = parseFloat(tabList[0].index)
|
currentTab = tabList[0].index
|
||||||
} else {
|
} else {
|
||||||
window.currentChartTabList = [{ path: tabsData.value[0].path, index: 0 }]
|
window.currentChartTabList = [{ path: tabsData.value[0].path, index: '0' }]
|
||||||
currentTab = 0
|
currentTab = '0'
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -3,7 +3,7 @@
|
|||||||
<div class="npm-tabs__active-bar"></div>
|
<div class="npm-tabs__active-bar"></div>
|
||||||
<el-tabs v-model="currentTab" ref="elTabs" type="border-card" v-show="isCurTabReady"
|
<el-tabs v-model="currentTab" ref="elTabs" type="border-card" v-show="isCurTabReady"
|
||||||
@tab-click="handleClick">
|
@tab-click="handleClick">
|
||||||
<el-tab-pane v-for="(tab,index) in tabs" :key="tab.i18n" :name="index" :disabled="tab.disable" >
|
<el-tab-pane v-for="(tab,index) in tabs" :key="tab.i18n" :name="JSON.stringify(index)" :disabled="tab.disable" >
|
||||||
<template #label>
|
<template #label>
|
||||||
<div class="npm-tab__label">
|
<div class="npm-tab__label">
|
||||||
<i :class="tab.icon"></i>
|
<i :class="tab.icon"></i>
|
||||||
@@ -29,7 +29,7 @@ export default {
|
|||||||
data () {
|
data () {
|
||||||
return {
|
return {
|
||||||
leftOffset: 27,
|
leftOffset: 27,
|
||||||
currentTab: ref(0),
|
currentTab: ref('0'),
|
||||||
isCurTabReady: false
|
isCurTabReady: false
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
@@ -152,7 +152,7 @@ export default {
|
|||||||
})
|
})
|
||||||
})
|
})
|
||||||
} else {
|
} else {
|
||||||
this.currentTab = curTabIndexInUrl || 0
|
this.currentTab = curTabIndexInUrl || '0'
|
||||||
this.isCurTabReady = true
|
this.isCurTabReady = true
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
this.handleActiveBar(this.currentTab)
|
this.handleActiveBar(this.currentTab)
|
||||||
|
|||||||
Reference in New Issue
Block a user