tabs.vue
3.41 KB
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
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
<!--<template>-->
<!--<Tabs value="name1" :animated="false">-->
<!--<Tab-pane label="test" name="test">-->
<!--<Tabs type="card" v-bind:animated="true">-->
<!--<Tab-pane label="标签2一">标签2一的内容</Tab-pane>-->
<!--<Tab-pane label="标签2二">标签2二的内容</Tab-pane>-->
<!--<Tab-pane label="标签2三">标签2三的内容</Tab-pane>-->
<!--</Tabs>-->
<!--</Tab-pane>-->
<!--<Tab-pane :label="label1" name="name1">-->
<!--<Table :columns="columns1" :data="data1"></Table>-->
<!--</Tab-pane>-->
<!--<Tab-pane label="标签二" name="name2">-->
<!--<Table :columns="columns1" :data="data1"></Table>-->
<!--</Tab-pane>-->
<!--<Tab-pane label="标签三" name="name3">-->
<!--<Table :columns="columns1" :data="data1"></Table>-->
<!--</Tab-pane>-->
<!--</Tabs>-->
<!--</template>-->
<!--<script>-->
<!--export default {-->
<!--data () {-->
<!--return {-->
<!--label1: (h) => {-->
<!--return h('div', [-->
<!--h('span', '标签一'),-->
<!--h('Button', 'button')-->
<!--]);-->
<!--},-->
<!--columns1: [-->
<!--{-->
<!--title: '姓名',-->
<!--key: 'name'-->
<!--},-->
<!--{-->
<!--title: '年龄',-->
<!--key: 'age'-->
<!--},-->
<!--{-->
<!--title: '地址',-->
<!--key: 'address'-->
<!--}-->
<!--],-->
<!--data1: [-->
<!--{-->
<!--name: '王小明',-->
<!--age: 18,-->
<!--address: '北京市朝阳区芍药居'-->
<!--},-->
<!--{-->
<!--name: '张小刚',-->
<!--age: 25,-->
<!--address: '北京市海淀区西二旗'-->
<!--},-->
<!--{-->
<!--name: '李小红',-->
<!--age: 30,-->
<!--address: '上海市浦东新区世纪大道'-->
<!--},-->
<!--{-->
<!--name: '周小伟',-->
<!--age: 26,-->
<!--address: '深圳市南山区深南大道'-->
<!--}-->
<!--]-->
<!--}-->
<!--}-->
<!--}-->
<!--</script>-->
<template>
<Tabs type="card" closable @on-tab-remove="handleTabRemove">
<TabPane label="标签一" v-if="tab0">标签一的内容</TabPane>
<TabPane label="标签二" v-if="tab1">标签二的内容</TabPane>
<TabPane label="标签三" v-if="tab2">标签三的内容</TabPane>
</Tabs>
</template>
<script>
export default {
data () {
return {
tab0: true,
tab1: true,
tab2: true
}
},
methods: {
handleTabRemove (name) {
this['tab' + name] = false;
}
}
}
</script>