# BsTab 标签页
分隔内容上有关联但属于不同类别的数据集合。
# 基础用法
标签页展示、默认选中和点击回调
标签页展示、默认选中和点击回调
<template>
<div class="header-nav-api__wrap">
<BsTab
:tab-list="tabList"
tab-class="main-modulebox-tab"
:default-select="activeSelect"
@onTabClick="onTabClick"
/>
</div>
</template>
<script>
export default {
data() {
return {
initload: true,
tabList: [
{
label: '基础信息',
component: 'baseInfo'
},
{
label: '支出预算',
component: 'payoutBudget'
},
{
label: '收入预算',
component: 'incomeBudget'
},
{
label: '收支总表',
component: 'balance'
},
{
label: '汇总提交',
component: 'sumSubmit'
}
],
activeSelect: {
label: '支出预算',
component: 'payoutBudget'
}
}
},
methods: {
onTabClick(obj) {
if(this.initload){
this.initload = false
return
}
this.activeSelect = obj
this.$message({
showClose: true,
message: obj.label,
type: 'success'
})
}
}
}
</script>
<style>
.header-nav-api__wrap {
/* width: 900px; */
}
</style>
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
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
Expand Copy Copy
# 动态增减标签页
动态增减标签页
动态增减标签页
<template>
<div class="header-nav-api__wrap">
<vxe-button content="新增" class="bsTab-btn" @click="addTabList"></vxe-button>
<BsTab
canClear
topTip
:tab-list="tabList"
tab-class="main-modulebox-tab"
:default-select="activeSelect"
@onTabClick="onTabClick"
@onClearClick="onClearClick"
/>
</div>
</template>
<script>
export default {
data() {
return {
uid: 0,
initload: true,
onClear: false,
tabList: [
{
label: '基础信息',
component: 'baseInfo'
},
{
label: '支出预算',
component: 'payoutBudget'
},
{
label: '收入预算',
component: 'incomeBudget'
},
{
label: '收支总表',
component: 'balance'
},
{
label: '汇总提交',
component: 'sumSubmit'
}
],
activeSelect: {
label: '支出预算',
component: 'payoutBudget'
},
tabListCp: []
}
},
methods: {
onTabClick(obj) {
if(this.initload){
this.initload = false
return
}
this.activeSelect = obj
this.$message({
showClose: true,
message: obj.label,
type: 'success'
})
},
onClearClick(deledList, tabList){
this.tabListCp = tabList
this.onClear = true
console.log(deledList, tabList)
},
addTabList(){
const item = {
label: this.uuid('new'),
component: `component${this.uuid}`,
}
this.tabListCp = this.onClear ? this.tabListCp : this.tabList
this.tabListCp.push(item)
this.tabList = this.deepCopy(this.tabListCp)
},
uuid(prefix){
this.uid++
return (prefix || '') + this.uid
},
deepCopy(obj) {
// 深拷贝通用方法
// var new_arr = JSON.parse(JSON.stringify(arr)) // 不仅可拷贝数组还能拷贝对象（ 但不能拷贝函数）
// 只拷贝对象
let me = this
if (typeof obj !== 'object' || obj === null) return obj
// 根据obj的类型判断是新建一个数组还是一个对象
let newObj = obj instanceof Array ? [] : {}
for (let key in obj) {
// 遍历obj,并且判断是obj的属性才拷贝
if (obj.hasOwnProperty(key)) {
// 判断属性值的类型，如果是对象递归调用深拷贝
newObj[key] =
typeof obj[key] === 'object' ? me.deepCopy(obj[key]) : obj[key]
}
}
return newObj
}
}
}
</script>
<style>
.header-nav-api__wrap {
/* width: 900px; */
}
.bsTab-btn {
margin-bottom: 15px;
}
</style>
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
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
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
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
Expand Copy Copy
# 页签上带数字
页签上带数字
页签上带数字
<template>
<div class="header-nav-api__wrap">
<BsTab
isToolBar
showNum
tab-class="main-modulebox-tab"
:tab-list="tabList"
:default-select="activeSelect"
@onTabClick="onTabClick"
/>
</div>
</template>
<script>
export default {
data() {
return {
initload: true,
tabList: [
{
label: '待审核',
labelNum: '3',
num: 5
},
{
label: '已审核',
labelNum: '3',
num: 3
},
{
label: '未送审',
labelNum: '6',
num: 6
},
{
label: '被退回',
labelNum: '3',
num: 3
}
],
activeSelect: {
label: '已审核',
labelNum: '3',
num: 3
}
}
},
methods: {
onTabClick(obj) {
if(this.initload){
this.initload = false
return
}
this.activeSelect = obj
this.$message({
showClose: true,
message: obj.label,
type: 'success'
})
}
}
}
</script>
<style>
.header-nav-api__wrap {
/* width: 800px; */
}
</style>
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
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
Expand Copy Copy