# BsTreeSet 树设置
可以通过切换树数据源切换树组件内容，一般和左侧树组合使用
# 基础用法
可切换树数据源
可切换树数据源
<template>
<div class="tree-set-api__wrap">
<BsTreeSet
ref="treeSet"
v-model="showAside"
:tree-config="treeConfig"
@onChangeInput="changeInput"
@onAsideChange="asideChange"
@onConfrimData="confrimData"
/>
</div>
</template>
<script>
export default {
data() {
return {
showAside: false,
treeConfig: {
curRadio: 'zf',
radioGroup: [
{
code: 'zf',
label: '政府部门树'
},
{
code: 'xuexiao',
label: '学校树'
},
{
code: 'jigou',
label: '机构树'
}
]
}
}
},
methods: {
asideChange(val) {
this.$message({
showClose: true,
message: val,
type: 'success'
});
},
changeInput(val) {
this.$message({
showClose: true,
message: `输入的内容${val}`,
type: 'success'
});
},
confrimData(curTree) {
this.$message({
showClose: true,
message: curTree.label,
type: 'success'
});
this.treeConfig.curRadio = curTree.code
this.$refs.treeSet.closeDialog()
}
}
}
</script>
<style>
.tree-set-api__wrap {
width: 320px;
}
</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
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
Expand Copy Copy
# 隐藏折叠按钮和隐藏设置树数据源按钮
isHide控制折叠按钮显示和隐藏，treeConfig的radioGroup数组长度控制 设置树数据源按钮显示和隐藏
隐藏折叠按钮和隐藏设置树数据源按钮
<template>
<div class="tree-set-api__wrap">
<BsTreeSet
isHide
ref="treeSet"
v-model="showAside"
:tree-config="treeConfig"
@onChangeInput="changeInput"
@onAsideChange="asideChange"
/>
</div>
</template>
<script>
export default {
data() {
return {
showAside: false,
treeConfig: {}
}
},
methods: {
asideChange(val) {
this.$message({
showClose: true,
message: val,
type: 'success'
});
},
changeInput(val) {
this.$message({
showClose: true,
message: `输入的内容${val}`,
type: 'success'
});
}
}
}
</script>
<style>
.tree-set-api__wrap {
width: 320px;
}
</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
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
Expand Copy Copy
# 和BsTree配套使用
可切换树数据源,搜索和数据源切换 与BsTree组件联动
可切换树数据源
<template>
<div class="tree-set-api__wrap">
<div class="mmc-left-tree-title">
<BsTreeSet
ref="treeSet"
v-model="showAside"
:tree-config="setConfig"
@onChangeInput="changeInput"
@onAsideChange="asideChange"
@onConfrimData="confrimData"
/>
</div>
<div class="mmc-left-tree-body">
<BsTree
:queryparams="treeQueryparams"
:config="treeConfig"
:filter-text="filterText"
:tree-data="treeData"
@onNodeClick="onNodeClick"
/>
</div>
</div>
</template>
<script>
export default {
data() {
return {
showAside: false,
setConfig: {
curRadio: 'zf',
radioGroup: [
{
code: 'zf',
label: '政府部门树'
},
{
code: 'xuexiao',
label: '学校树'
},
{
code: 'jigou',
label: '机构树'
}
]
},
treeQueryparams: { elementCode: 'AGENCY'},
treeConfig: {
showFilter: false, // 是否显示过滤
levelno: -1, // 可选层级
valueKeys: ['code', 'name', 'id'],
placeholder: '请选择',
treeProps: {
// 树配置选项
labelFormat: '{code}-{name}', // {code}-{name}
nodeKey: 'id', // 树的主键
label: 'name', // 树的显示lalel字段
children: 'children' // 树的嵌套字段
},
axiosConfig: {
rootName: '全部',
successCode: '200', // 成功code
statusField: 'rscode',
method: 'get', // 请求方式
url: ''
},
multiple: false, // 是否多选,
clearable: true, // 可清除
defaultExpandAll: true // 默认是否展开所有节点
},
filterText: '', // 树字段过滤
treeData: [],
zfTreeData: [
{
'id': 'CB5C08205C7D4576A8B51C372E09F5CE',
'code': '302',
'name': '商品和服务支出',
'label': '302-商品和服务支出',
'children': [
{
'id': '4D85E3CD5F3B4F5BB871E6191A603EB8',
'code': '30201',
'name': '办公费',
'label': '30201-办公费'
},
{
'id': 'BF6A16E0849241909932CEE6864A138A',
'code': '30202',
'name': '印刷费',
'label': '30202-印刷费'
},
{
'id': '101544967B71468D8FDB25E2898C2D84',
'code': '30204',
'name': '手续费',
'label': '30204-手续费'
},
{
'id': 'FDA0605965044F0492FC0F0F205D957D',
'code': '30205',
'name': '水费',
'label': '30205-水费'
},
{
'id': 'ED4CA44259D246F4A3EDD0E04813518B',
'code': '30206',
'name': '电费',
'label': '30206-电费'
},
{
'id': '597E28C38CA64BF0BB9B319C3ED66A94',
'code': '30207',
'name': '邮电费',
'label': '30207-邮电费'
},
{
'id': '184C6072F4B14F149AA6994FE6ECB3A3',
'code': '30208',
'name': '取暖费',
'label': '30208-取暖费',
'children': [
{
'id': '110DD34524E849C388EE5FA56FDA7701',
'code': '3020801',
'name': '取暖费',
'label': '3020801-取暖费'
},
{
'id': 'D4E56702FD1E487BA5655155BD605F9F',
'code': '3020802',
'name': '办公用房取暖费',
'label': '3020802-办公用房取暖费'
},
{
'id': '20BDC442D26A47259D987F181F2FD60C',
'code': '3020803',
'name': '职工宿舍取暖费',
'label': '3020803-职工宿舍取暖费'
}
]
},
{
'id': '5858C959750641BF92AE33EB4316D6C7',
'code': '30209',
'name': '物业管理费',
'label': '30209-物业管理费'
},
{
'id': 'BBD287CB11004F96B3438E647A07A8AA',
'code': '30211',
'name': '差旅费',
'label': '30211-差旅费'
},
{
'id': '8DF66DB50BDC4840B8035DE51C35B4B1',
'code': '30214',
'name': '租赁费',
'label': '30214-租赁费'
},
{
'id': '342FD3149932452399FFEC0EED95DBF5',
'code': '30228',
'name': '工会经费',
'label': '30228-工会经费'
},
{
'id': 'ED7202B8F9554BAFBEA2683CF6010371',
'code': '30229',
'name': '福利费',
'label': '30229-福利费'
},
{
'id': '1CBE96E92632463194874DFFF641AB15',
'code': '30239',
'name': '其他交通费用',
'label': '30239-其他交通费用'
},
{
'id': '344D2196D66148069A1AB7FF41CD8106',
'code': '30240',
'name': '税金及附加费用',
'label': '30240-税金及附加费用'
}
]
}
],
xuexiaoTreeData: [
{
'id': '1',
'code': '100',
'name': '中心学校',
'label': '100-中心学校',
'children': [
{
'id': '11',
'code': '101',
'name': '王校长',
'label': '101-王校长'
},
{
'id': '12',
'code': '102',
'name': '李校长',
'label': '102-李校长'
},
{
'id': '13',
'code': '103',
'name': '张校长',
'label': '103-张校长'
}
]
}
],
jigouTreeData: [
{
'id': '1',
'code': '100',
'name': '山西省',
'label': '100-山西省',
'children': [
{
'id': '11',
'code': '101',
'name': '太原',
'label': '101-太原'
},
{
'id': '12',
'code': '102',
'name': '大同',
'label': '102-大同'
},
{
'id': '13',
'code': '103',
'name': '运城',
'label': '103-运城'
}
]
}
]
}
},
methods: {
asideChange(val) {
this.$message({
showClose: true,
message: val,
type: 'success'
});
},
changeInput(val) {
this.filterText = val
},
confrimData(curTree) {
this.setConfig.curRadio = curTree.code
switch (curTree.code) {
case 'zf':
this.treeData = this.zfTreeData
break
case 'xuexiao':
this.treeData = this.xuexiaoTreeData
break
case 'jigou':
this.treeData = this.jigouTreeData
break
}
this.$refs.treeSet.closeDialog()
},
// 点击树节点
onNodeClick({ node, treeData }, $event, treeContext) {
this.$message({
showClose: true,
message: node.label,
type: 'success'
})
console.log(node, treeData, $event, treeContext)
}
},
mounted() {
this.treeData = this.zfTreeData
}
}
</script>
<style>
.tree-set-api__wrap {
width: 320px;
}
</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
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
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
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
Expand Copy Copy
# 和BsTree配套使用多次
可切换树数据源
<template>
<div class="tree-set-api__wrap" style="height: 500px;">
<div class="top">
<div class="mmc-left-tree-title">
<BsTreeSet
ref="treeSet"
v-model="showAside"
:tree-config="setConfigTop"
@onChangeInput="changeInputTop"
@onAsideChange="asideChange"
/>
</div>
<div class="mmc-left-tree-body">
<BsTree
:queryparams="treeQueryparamsTop"
:config="treeConfigTop"
:filter-text="filterTextTop"
:tree-data="xuexiaoTreeData"
@onNodeClick="onNodeClickTop"
/>
</div>
</div>
<div class="bottom">
<div class="mmc-left-tree-title">
<BsTreeSet
isHide
ref="treeSetBottom"
:tree-config="setConfigBottom"
@onChangeInput="changeInputBottom"
/>
</div>
<div class="mmc-left-tree-body">
<BsTree
:queryparams="treeQueryparamsBottom"
:config="treeConfigBottom"
:filter-text="filterTextBottom"
:tree-data="jigouTreeData"
@onNodeClick="onNodeClickBottom"
/>
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
showAside: false,
setConfigTop: {
title: '项目分类'
},
setConfigBottom: {
title: '预算单位'
},
treeQueryparamsTop: { elementCode: 'AGENCY'},
treeConfigTop: {
showFilter: true, // 是否显示过滤
levelno: -1, // 可选层级
valueKeys: ['code', 'name', 'id'],
placeholder: '请选择',
treeProps: {
// 树配置选项
labelFormat: '{code}-{name}', // {code}-{name}
nodeKey: 'id', // 树的主键
label: 'name', // 树的显示lalel字段
children: 'children' // 树的嵌套字段
},
axiosConfig: {
rootName: '全部',
successCode: '200', // 成功code
statusField: 'rscode',
method: 'get', // 请求方式
url: ''
},
multiple: false, // 是否多选,
clearable: true, // 可清除
defaultExpandAll: true // 默认是否展开所有节点
},
filterTextTop: '', // 树字段过滤
treeQueryparamsBottom: { elementCode: 'AGENCY'},
treeConfigBottom: {
showFilter: true, // 是否显示过滤
levelno: -1, // 可选层级
valueKeys: ['code', 'name', 'id'],
placeholder: '请选择',
treeProps: {
// 树配置选项
labelFormat: '{code}-{name}', // {code}-{name}
nodeKey: 'id', // 树的主键
label: 'name', // 树的显示lalel字段
children: 'children' // 树的嵌套字段
},
axiosConfig: {
rootName: '全部',
successCode: '200', // 成功code
statusField: 'rscode',
method: 'get', // 请求方式
url: ''
},
multiple: false, // 是否多选,
clearable: true, // 可清除
defaultExpandAll: true // 默认是否展开所有节点
},
filterTextBottom: '', // 树字段过滤
xuexiaoTreeData: [
{
'id': '1',
'code': '100',
'name': '中心学校',
'label': '100-中心学校',
'children': [
{
'id': '11',
'code': '101',
'name': '王校长',
'label': '101-王校长'
},
{
'id': '12',
'code': '102',
'name': '李校长',
'label': '102-李校长'
},
{
'id': '13',
'code': '103',
'name': '张校长',
'label': '103-张校长'
}
]
}
],
jigouTreeData: [
{
'id': '1',
'code': '100',
'name': '山西省',
'label': '100-山西省',
'children': [
{
'id': '11',
'code': '101',
'name': '太原',
'label': '101-太原'
},
{
'id': '12',
'code': '102',
'name': '大同',
'label': '102-大同'
},
{
'id': '13',
'code': '103',
'name': '运城',
'label': '103-运城'
}
]
}
]
}
},
methods: {
asideChange(val) {
this.$message({
showClose: true,
message: val,
type: 'success'
});
},
changeInputTop(val) {
this.filterTextTop = val
},
// 点击树节点
onNodeClickTop({ node, treeData }, $event, treeContext) {
this.$message({
showClose: true,
message: node.label,
type: 'success'
})
console.log(node, treeData, $event, treeContext)
},
changeInputBottom(val) {
this.filterTextBottom = val
},
// 点击树节点
onNodeClickBottom({ node, treeData }, $event, treeContext) {
this.$message({
showClose: true,
message: node.label,
type: 'success'
})
console.log(node, treeData, $event, treeContext)
}
}
}
</script>
<style>
.tree-set-api__wrap {
width: 360px;
}
</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
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
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
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
Expand Copy Copy