# BsTreeTable 文档
l
<template>
<DocTable
:table-data="tableData"
/>
</template>
<script>
export default {
data() {
return {
tableData: [
{
keyName: 'Props',
desc: '参数',
type: '',
enum: '',
defVal: '',
emc: '',
children: [
{
keyName: 'isEditor',
desc: '如果有金额汇总且可编辑时，需要设置为true,',
type: 'boolean',
enum: '',
defVal: 'false',
emc: ''
},
{
keyName: 'showLevel',
desc: '初始化根据showLevel展开至哪一层级',
type: 'String | Number',
enum: '',
defVal: '1',
emc: ''
},
{
keyName: 'tableColumnsConfig',
desc: '其它表头配置: 具体配置请查阅各个渲染器配置 并 结合vxe-grid查阅Props.columns',
type: '[{}]',
enum: '',
defVal: '',
emc: '',
children: [
{
keyName: 'treeNode',
desc: '若需某列展示“＋ ➖”号，则设置treeNode为true',
type: 'boolean',
enum: '',
defVal: 'false',
emc: ''
},
{
keyName: 'treeTotal',
desc: '若需某列冒泡汇总，则设置treeTotal为true',
type: 'boolean',
enum: '',
defVal: 'false',
emc: ''
},
{
keyName: 'bsTreeTotal',
desc: '底部有合计行时且只统计顶级行金额, 则设置bsTreeTotal为true',
type: 'boolean',
enum: '',
defVal: 'false',
emc: ''
}
]
},
{
keyName: 'tableConfig',
desc: '表格渲染配置',
type: 'Object',
enum: '',
defVal: '',
emc: '',
children: [
{
keyName: 'renderers',
desc: '自定义渲染器【不推荐使用，如果要用因为重名覆盖原因，切记全局渲染器名称要唯一，建议起名时 模块名+OperateBtns 比如：AccountOperateBtns】',
type: 'Object',
enum: '',
defVal: '{渲染器名: 渲染器内容}',
emc: ''
}
]
},
{
keyName: 'globalConfig',
desc: '全局默认渲染列配置',
type: 'Object',
enum: '',
defVal: '',
emc: '',
children: [
{
keyName: 'checkType',
desc: '是否显示checkbox列 | radio列',
type: 'string',
enum: 'checkbox | radio | false',
defVal: 'checkbox',
emc: ''
},
{
keyName: 'seq',
desc: '是否显示序号列',
type: 'boolean',
enum: '',
defVal: 'true',
emc: ''
},
{
keyName: 'rowDrop',
desc: '行拖动',
type: 'boolean',
enum: '',
defVal: 'false',
emc: ''
},
{
keyName: 'cellClickCheck',
desc: '行点击选中【只对checkType=radio有效】',
type: 'boolean',
enum: '',
defVal: 'false',
emc: ''
},
{
keyName: 'optionSort',
desc: '可对表格行上移下移置顶等',
type: 'boolean',
enum: '',
defVal: 'false',
emc: ''
}
]
},
{
keyName: 'importConfig',
desc: '导入配置项: 具体配置请移步vxe-grid查阅Props.import-config',
type: 'Boolean | Object',
enum: '',
defVal: '{}',
emc: ''
},
{
keyName: 'loading',
desc: '表格是否显示加载中',
type: 'boolean',
enum: '',
defVal: 'false',
emc: ''
},
{
keyName: 'tableData',
desc: '表格数据（与 loadData 行为一致，更新数据是不会重置状态）',
type: 'Array',
enum: '',
defVal: '[]',
emc: ''
},
{
keyName: 'interval',
desc: '展开时间(ms)',
type: 'number',
enum: '',
defVal: '300',
emc: ''
},
{
keyName: '...',
desc: '其它Props参数: 参考BsTable的Props, 其Props在这里也可以用, 这里用了`v-bind="$attrs"`进行了传递',
type: '',
enum: '',
defVal: '',
emc: ''
}
]
},
{
keyName: 'Slots',
desc: '插槽',
type: '',
enum: '',
defVal: '',
emc: '',
children: [
{
keyName: 'toolbarSlots',
desc: `工具栏内容区域, 注意：如果要用这个插槽，需要在toolbarConfig里添加 slots: { buttons: 'toolbarSlots' }, 否则不显示`,
type: '',
enum: '',
defVal: '',
emc: ''
},
{
keyName: 'toolbar-custom-slot',
desc: '工具栏内容区域',
type: '',
enum: '',
defVal: '',
emc: ''
}
]
},
{
keyName: 'Events',
desc: '事件',
type: '',
enum: '',
defVal: '',
emc: '',
children: [
{
keyName: 'checkboxChangeTree',
desc: '对checkboxChange拦截处理: 只对 type=checkbox 有效，当手动勾选并且值发生改变时触发的事件',
type: '',
enum: '',
defVal: ' { records, checked, row }',
emc: ''
},
{
keyName: 'checkboxAllTree',
desc: '对checkboxAll拦截处理: 只对 type=checkbox 有效，当手动勾选全选时触发的事件',
type: '',
enum: '',
defVal: '{ records, checked }',
emc: ''
},
{
keyName: 'editClosedTree',
desc: '对editClosed拦截处理: 只对 edit-config 配置时有效，单元格编辑状态下被关闭时会触发该事件',
type: '',
enum: '',
defVal: '{ row, column }',
emc: ''
},
{
keyName: '...',
desc: '其余事件: 参考BsTable的Event, 其$emit的事件在这里也可以用, 这里用了`v-on="$listeners"`进行了传递',
type: '',
enum: '',
defVal: '',
emc: ''
}
]
},
{
keyName: 'Methods',
desc: '方法',
type: '',
enum: '',
defVal: '',
emc: '',
children: [
{
keyName: 'clearTreeExpand',
desc: '折叠收起',
type: '',
enum: '',
defVal: '',
emc: ''
},
{
keyName: 'setAllTreeExpand',
desc: '逐级展开: expandToBottom, 是否直接展开至底级,默认为false; timeout展开时间',
type: '',
enum: '',
defVal: '(expandToBottom = false, timeout = 4)',
emc: ''
},
{
keyName: 'expand2Level',
desc: '展开至指定层级',
type: 'number',
enum: '',
defVal: '0',
emc: ''
},
{
keyName: 'treeTotal',
desc: '若需在业务组件编辑后对某几列的某几行数据进行冒泡汇总，则需要调用treeTotal方法。 参数为fieldArr，默认为列配置treeTotal为true的列,；参数data，默认为fullData，可传入selection，即当前选择的数据',
type: '',
enum: '',
defVal: '( fieldArr = [], selection = [] )',
emc: ''
},
{
keyName: 'insertData',
desc: '插入数据, list: 必填 要插入的数据, row: 可选 要插入的层级 如果不传则插入顶级',
type: '',
enum: '',
defVal: '(list, row = null)',
emc: ''
},
{
keyName: 'updateFooter',
desc: '更新表尾',
type: '',
enum: '',
defVal: '',
emc: ''
},
{
keyName: 'reloadData',
desc: '重新加载数据',
type: '',
enum: '',
defVal: 'data',
emc: ''
},
{
keyName: 'getTableData',
desc: '获取表格数据',
type: '',
enum: '',
defVal: '返回 { fullData, tableData } ',
emc: ''
},
{
keyName: 'deepCopy',
desc: '深拷贝通用方法',
type: 'Object',
enum: '',
defVal: '',
emc: ''
},
{
keyName: 'gridOptionFn',
desc: '返回xgrid实例',
type: '',
enum: '',
defVal: '返回：gridContext',
emc: ''
},
{
keyName: 'tableOptionFn',
desc: '返回BsTable实例',
type: '',
enum: '',
defVal: '返回：bsTableContext',
emc: ''
},
{
keyName: '...',
desc: '其它方法: 参考BsTable的Methods, 可以通过tableOptionFn获取BsTable实例后，直接使用BsTable上的Methods方法',
type: '',
enum: '',
defVal: '',
emc: ''
}
]
}
]
}
}
}
</script>
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
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
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
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
Expand Copy Copy