1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
| <template>
| <div class="tab-container">
| <el-tag>mounted times ：{{ createdTimes }}</el-tag>
| <el-alert :closable="false" style="width:200px;display:inline-block;vertical-align: middle;margin-left:30px;" title="Tab with keep-alive" type="success" />
| <el-tabs v-model="activeName" style="margin-top:15px;" type="border-card">
| <el-tab-pane v-for="item in tabMapOptions" :key="item.key" :label="item.label" :name="item.key">
| <keep-alive>
| <tab-pane v-if="activeName==item.key" :type="item.key" @create="showCreatedTimes" />
| </keep-alive>
| </el-tab-pane>
| </el-tabs>
| </div>
| </template>
|
| <script>
| import TabPane from './components/TabPane'
|
| export default {
| name: 'Tab',
| components: { TabPane },
| data() {
| return {
| tabMapOptions: [
| { label: 'China', key: 'CN' },
| { label: 'USA', key: 'US' },
| { label: 'Japan', key: 'JP' },
| { label: 'Eurozone', key: 'EU' }
| ],
| activeName: 'CN',
| createdTimes: 0
| }
| },
| watch: {
| activeName(val) {
| this.$router.push(`${this.$route.path}?tab=${val}`)
| }
| },
| created() {
| // init the default selected tab
| const tab = this.$route.query.tab
| if (tab) {
| this.activeName = tab
| }
| },
| methods: {
| showCreatedTimes() {
| this.createdTimes = this.createdTimes + 1
| }
| }
| }
| </script>
|
| <style scoped>
| .tab-container {
| margin: 30px;
| }
| </style>
|
|
