问题
后台数据量过大,需要分标签显示,在切换标签时不希望到后台重新拉取数据,需要做一个页面缓存
解决方案
<template>
<div>
<Card>
<Tabs @on-click="handleTabClick">
<TabPane label="module1"></TabPane>
<TabPane label="module2"></TabPane>
<TabPane label="module3"></TabPane>
<TabPane label="module4"></TabPane>
</Tabs>
<keep-alive>
<component :is="tabs[currentTab]"></component>
</keep-alive>
</Card>
</div>
</template>
<script>
import module1 from './module1'
import module2 from './module2'
import module3 from './module3'
import module4 from './module4'
export default {
name: 'test_page',
components: {
module1,
module2,
module3,
module4
},
data () {
return {
currentTab: 0,
tabs: [
`module1`,
`module2`,
`module3`,
`module4`
]
}
},
methods: {
handleTabClick (name) {
this.currentTab = name
}
}
}
</script>