# BsTable 表格
用于展示多条结构类似的数据，可对数据进行排序、筛选、其他自定义操作
# 基础表格
基础的表格展示用法，表格上无工具栏和分页
基础的表格展示用法
<template>
<BsTable
:table-config="tableConfig"
:table-global-config="tableGlobalConfig"
:toolbar-config="toolbarConfig"
:height="420"
:pager-config="false"
:edit-config="{ enabled: false }"
:tree-config="treeConfig"
:footer-config="footerConfig"
:table-columns-config="tableColumnsConfig"
:table-data="tableData"
/>
</template>
<script>
export default {
data() {
return {
tableConfig: {
globalConfig: { // 全局默认渲染列配置
// 全局配置
checkType: false,
seq: true
}
},
tableGlobalConfig: {
showOverflow: false,
},
footerConfig: {
showFooter: false
},
toolbarConfig: {
moneyConversion: false, // 是否有金额转换
search: false, // 是否有search
import: false, // 导入
export: false, // 导出
print: false, // 打印
refresh: false, // 刷新
zoom: false, // 缩放
custom: false, // 选配展示列
},
treeConfig: {
expandAll: true,
indent: 10,
accordion: false
},
tableColumnsConfig: [
{
title: '姓名',
field: 'name',
align: 'center',
width: '180'
},
{
title: '性别',
field: 'sex',
align: 'center',
width: '150'
},
{
title: '年龄',
field: 'age',
align: 'center',
width: '150'
},
{
title: '地址',
field: 'address',
align: 'center'
}
],
tableData: [
{
name: 'test1',
sex: '男',
age: '22',
address: 'beijing'
},
{
name: 'test2',
sex: '女',
age: '19',
address: 'shanghai'
},
{
name: 'test3',
sex: '男',
age: '25',
address: 'neimeng'
},
{
name: 'test4',
sex: '女',
age: '32',
address: 'xiamen'
},
{
name: 'test5',
sex: '男',
age: '34',
address: 'fujian'
},
{
name: 'test6',
sex: '男',
age: '52',
address: 'shenzhen'
},
{
name: 'test7',
sex: '女',
age: '25',
address: 'gansu'
},
{
name: 'test8',
sex: '女',
age: '22',
address: 'shanghai'
}
]
}
}
}
</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
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
Expand Copy Copy
# 表格上有工具栏和自定义按钮
工具栏预设按钮根据配置toolbar-config看是否显示，除此也可以自定义按钮通过插槽toolbarTools渲染
工具栏预设按钮根据配置toolbar-config看是否显示，自定义按钮通过插槽toolbarTools渲染
<template>
<BsTable
:table-config="tableConfig"
:table-global-config="tableGlobalConfig"
:toolbar-config="toolbarConfig"
:height="420"
:pager-config="{}"
:edit-config="{ enabled: false }"
:tree-config="treeConfig"
:footer-config="footerConfig"
:table-columns-config="tableColumnsConfig"
:table-data="tableData"
>
<template v-slot:toolbarTools>
<vxe-button status="primary" content="新增"></vxe-button>
<vxe-button content="删除"></vxe-button>
<vxe-button content="编辑" style="margin-right: 10px;"></vxe-button>
</template>
</BsTable>
</template>
<script>
export default {
data() {
return {
tableConfig: {
globalConfig: { // 全局默认渲染列配置
// 全局配置
checkType: 'checkbox',
seq: true
}
},
tableGlobalConfig: {
showOverflow: false,
},
footerConfig: {
showFooter: false
},
toolbarConfig: {
moneyConversion: false, // 是否有金额转换
search: true, // 是否有search
import: false, // 导入
export: false, // 导出
print: false, // 打印
refresh: true, // 刷新
zoom: true, // 缩放
custom: true, // 选配展示列
slots: {
tools: 'toolbarTools',
buttons: 'toolbarSlots'
}
},
treeConfig: {
expandAll: true,
indent: 10,
accordion: false
},
tableColumnsConfig: [
{
title: '姓名',
field: 'name',
align: 'center',
width: '180'
},
{
title: '性别',
field: 'sex',
align: 'center',
width: '150'
},
{
title: '年龄',
field: 'age',
align: 'center',
width: '150'
},
{
title: '地址',
field: 'address',
align: 'center'
}
],
tableData: [
{
name: 'test1',
sex: '男',
age: '22',
address: 'beijing'
},
{
name: 'test2',
sex: '女',
age: '19',
address: 'shanghai'
},
{
name: 'test3',
sex: '男',
age: '25',
address: 'neimeng'
},
{
name: 'test4',
sex: '女',
age: '32',
address: 'xiamen'
},
{
name: 'test5',
sex: '男',
age: '34',
address: 'fujian'
},
{
name: 'test6',
sex: '男',
age: '52',
address: 'shenzhen'
},
{
name: 'test7',
sex: '女',
age: '25',
address: 'gansu'
},
{
name: 'test8',
sex: '女',
age: '22',
address: 'shanghai'
}
]
}
}
}
</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
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
Expand Copy Copy
# 固定列和表头
横纵内容过多时，可选择固定列fixed: left | right和表头。
<template>
<BsTable
:table-config="tableConfig"
:table-global-config="tableGlobalConfig"
:toolbar-config="toolbarConfig"
:height="420"
:pager-config="false"
:edit-config="{ enabled: false }"
:tree-config="treeConfig"
:footer-config="footerConfig"
:table-columns-config="tableColumnsConfig"
:table-data="tableData"
/>
</template>
<script>
export default {
data() {
return {
tableConfig: {
globalConfig: { // 全局默认渲染列配置
// 全局配置
checkType: false,
seq: true
}
},
tableGlobalConfig: {
showOverflow: false,
},
footerConfig: {
showFooter: false
},
toolbarConfig: {
moneyConversion: false, // 是否有金额转换
search: true, // 是否有search
import: false, // 导入
export: false, // 导出
print: false, // 打印
refresh: true, // 刷新
zoom: true, // 缩放
custom: true, // 选配展示列
},
treeConfig: {
expandAll: true,
indent: 10,
accordion: false
},
tableColumnsConfig: [
{
title: '姓名',
field: 'name',
align: 'center',
width: '180',
fixed: 'left'
},
{
title: '性别',
field: 'sex',
align: 'center',
width: '150'
},
{
title: '年龄',
field: 'age',
align: 'center',
width: '150'
},
{
title: '地址',
field: 'address',
align: 'center',
width: '180'
},
{
title: '电话',
field: 'tel',
align: 'center',
width: '180'
},
{
title: '邮箱',
field: 'mail',
align: 'center',
width: '180'
},
{
title: '微信',
field: 'weichat',
align: 'center',
width: '180',
fixed: 'right'
}
],
tableData: [
{
name: 'test1',
sex: '男',
age: '22',
address: 'beijing',
tel: '',
mail: '',
weichat: ''
},
{
name: 'test2',
sex: '女',
age: '19',
address: 'shanghai',
tel: '',
mail: '',
weichat: ''
},
{
name: 'test3',
sex: '男',
age: '25',
address: 'neimeng',
tel: '',
mail: '',
weichat: ''
},
{
name: 'test4',
sex: '女',
age: '32',
address: 'xiamen',
tel: '',
mail: '',
weichat: ''
},
{
name: 'test5',
sex: '男',
age: '34',
address: 'fujian',
tel: '',
mail: '',
weichat: ''
},
{
name: 'test6',
sex: '男',
age: '52',
address: 'shenzhen',
tel: '',
mail: '',
weichat: ''
},
{
name: 'test7',
sex: '女',
age: '25',
address: 'gansu',
tel: '',
mail: '',
weichat: ''
},
{
name: 'test8',
sex: '女',
age: '22',
address: 'shanghai',
tel: '',
mail: '',
weichat: ''
},
{
name: 'test1',
sex: '男',
age: '22',
address: 'beijing',
tel: '',
mail: '',
weichat: ''
},
{
name: 'test2',
sex: '女',
age: '19',
address: 'shanghai',
tel: '',
mail: '',
weichat: ''
},
{
name: 'test3',
sex: '男',
age: '25',
address: 'neimeng',
tel: '',
mail: '',
weichat: ''
},
{
name: 'test4',
sex: '女',
age: '32',
address: 'xiamen',
tel: '',
mail: '',
weichat: ''
},
{
name: 'test5',
sex: '男',
age: '34',
address: 'fujian',
tel: '',
mail: '',
weichat: ''
},
{
name: 'test6',
sex: '男',
age: '52',
address: 'shenzhen',
tel: '',
mail: '',
weichat: ''
},
{
name: 'test7',
sex: '女',
age: '25',
address: 'gansu',
tel: '',
mail: '',
weichat: ''
},
{
name: 'test8',
sex: '女',
age: '22',
address: 'shanghai',
tel: '',
mail: '',
weichat: ''
},
{
name: 'test1',
sex: '男',
age: '22',
address: 'beijing',
tel: '',
mail: '',
weichat: ''
},
{
name: 'test2',
sex: '女',
age: '19',
address: 'shanghai',
tel: '',
mail: '',
weichat: ''
},
{
name: 'test3',
sex: '男',
age: '25',
address: 'neimeng',
tel: '',
mail: '',
weichat: ''
},
{
name: 'test4',
sex: '女',
age: '32',
address: 'xiamen',
tel: '',
mail: '',
weichat: ''
},
{
name: 'test5',
sex: '男',
age: '34',
address: 'fujian',
tel: '',
mail: '',
weichat: ''
},
{
name: 'test6',
sex: '男',
age: '52',
address: 'shenzhen',
tel: '',
mail: '',
weichat: ''
},
{
name: 'test7',
sex: '女',
age: '25',
address: 'gansu',
tel: '',
mail: '',
weichat: ''
},
{
name: 'test8',
sex: '女',
age: '22',
address: 'shanghai',
tel: '',
mail: '',
weichat: ''
}
]
}
}
}
</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
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
Expand Copy Copy
# 排序和筛选
通过配置tableColumnsConfig项里的sortable和filters
通过配置tableColumnsConfig项里的sortable和filters
<template>
<BsTable
:table-config="tableConfig"
:table-global-config="tableGlobalConfig"
:toolbar-config="toolbarConfig"
:height="420"
:pager-config="false"
:edit-config="{ enabled: false }"
:tree-config="treeConfig"
:footer-config="footerConfig"
:table-columns-config="tableColumnsConfig"
:table-data="tableData"
/>
</template>
<script>
export default {
data() {
return {
tableConfig: {
globalConfig: { // 全局默认渲染列配置
// 全局配置
checkType: false,
seq: true
}
},
tableGlobalConfig: {
showOverflow: false,
},
footerConfig: {
showFooter: false
},
toolbarConfig: {
moneyConversion: false, // 是否有金额转换
search: true, // 是否有search
import: false, // 导入
export: false, // 导出
print: false, // 打印
refresh: true, // 刷新
zoom: true, // 缩放
custom: true, // 选配展示列
},
treeConfig: {
expandAll: true,
indent: 10,
accordion: false
},
tableColumnsConfig: [
{
title: '姓名',
field: 'name',
align: 'center',
width: '180',
sortable: true
},
{
title: '性别',
field: 'sex',
align: 'center',
width: '150',
filters: [{ data: '' }],
filterRender: {
name: 'FilterInput'
}
},
{
title: '年龄',
field: 'age',
align: 'center',
width: '150'
},
{
title: '地址',
field: 'address',
align: 'center'
}
],
tableData: [
{
name: 'test1',
sex: '男',
age: '22',
address: 'beijing'
},
{
name: 'test2',
sex: '女',
age: '19',
address: 'shanghai'
},
{
name: 'test3',
sex: '男',
age: '25',
address: 'neimeng'
},
{
name: 'test4',
sex: '女',
age: '32',
address: 'xiamen'
},
{
name: 'test5',
sex: '男',
age: '34',
address: 'fujian'
},
{
name: 'test6',
sex: '男',
age: '52',
address: 'shenzhen'
},
{
name: 'test7',
sex: '女',
age: '25',
address: 'gansu'
},
{
name: 'test8',
sex: '女',
age: '22',
address: 'shanghai'
}
]
}
}
}
</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
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
Expand Copy Copy
# 操作列配置（一）
行按钮根据某个field的值变化而变化
行按钮根据某个field的值变化而变化
<template>
<BsTable
:table-config="tableConfig"
:table-global-config="tableGlobalConfig"
:toolbar-config="toolbarConfig"
:height="420"
:pager-config="false"
:edit-config="{ enabled: false }"
:tree-config="treeConfig"
:footer-config="footerConfig"
:table-columns-config="tableColumnsConfig"
:table-data="tableData"
@onOptionRowClick="onOptionRowClick"
/>
</template>
<script>
export default {
data() {
return {
tableConfig: {
globalConfig: { // 全局默认渲染列配置
// 全局配置
checkType: false,
seq: true
},
methods: {
onOptionRowClick({ row, optionType }, context) { // 操作按钮点击事件回调方式一
switch (optionType) {
case 'delete':
console.log('操作按钮点击事件回调方式一', 'delete', row)
break
case 'edit':
console.log('操作按钮点击事件回调方式一', 'edit', row)
break
case 'detail':
console.log('操作按钮点击事件回调方式一', 'detail', row)
break
default:
}
}
}
},
tableGlobalConfig: {
showOverflow: false,
},
footerConfig: {
showFooter: false
},
toolbarConfig: {
moneyConversion: false, // 是否有金额转换
search: true, // 是否有search
import: false, // 导入
export: false, // 导出
print: false, // 打印
refresh: true, // 刷新
zoom: true, // 缩放
custom: true, // 选配展示列
},
treeConfig: {
expandAll: true,
indent: 10,
accordion: false
},
tableColumnsConfig: [
{
title: '姓名',
field: 'name',
align: 'center',
width: '180'
},
{
title: '性别',
field: 'sex',
align: 'center',
width: '150'
},
{
title: '年龄',
field: 'age',
align: 'center',
width: '150'
},
{
title: '地址',
field: 'address',
align: 'center'
},
{
title: '操作',
className: 'gloableOptionRow',
align: 'center',
fixed: 'right',
sortable: false,
filters: false,
width: 200,
cellRender: {
name: '$vxeTableOptionRow',
props: {
statusField: 'sex',
options: {
'男': [
{
label: '编辑',
code: 'edit',
class: 'edit',
btnStatus: '',
type: 'text' // text||button
},
{
label: '删除',
code: 'delete',
class: 'delete',
btnStatus: '',
type: 'text' // text||button
},
{
label: '详情',
code: 'detail',
class: 'detail',
btnStatus: '',
type: 'text' // text||button
}
],
'女': [
{
label: '删除',
code: 'delete',
class: 'delete',
btnStatus: '',
type: 'text' // text||button
},
{
label: '详情',
code: 'detail',
class: 'detail',
btnStatus: '',
type: 'text' // text||button
}
],
default: [
{
label: '详情',
code: 'detail',
class: 'detail',
btnStatus: '',
type: 'text' // text||button
}
]
}
}
}
}
],
tableData: [
{
name: 'test1',
sex: '男',
age: '22',
address: 'beijing'
},
{
name: 'test2',
sex: '女',
age: '19',
address: 'shanghai'
},
{
name: 'test3',
sex: '男',
age: '25',
address: 'neimeng'
},
{
name: 'test4',
sex: '女',
age: '32',
address: 'xiamen'
},
{
name: 'test5',
sex: '男',
age: '34',
address: 'fujian'
},
{
name: 'test6',
sex: '男',
age: '52',
address: 'shenzhen'
},
{
name: 'test7',
sex: '女',
age: '25',
address: 'gansu'
},
{
name: 'test8',
sex: '女',
age: '22',
address: 'shanghai'
}
]
}
},
methods: {
// 操作按钮点击事件回调方式二
onOptionRowClick( { row, optionType }, context) {
switch (optionType) {
case 'delete':
console.log('操作按钮点击事件回调方式二', 'delete', row)
break
case 'edit':
console.log('操作按钮点击事件回调方式二', 'edit', row)
break
case 'detail':
console.log('操作按钮点击事件回调方式二', 'detail', row)
break
default:
}
}
}
}
</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
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
Expand Copy Copy
# 操作列配置（二）
行按钮不变，且行按钮类型是按钮
行按钮不变，且行按钮类型是按钮
<template>
<BsTable
:table-config="tableConfig"
:table-global-config="tableGlobalConfig"
:toolbar-config="toolbarConfig"
:height="420"
:pager-config="false"
:edit-config="{ enabled: false }"
:tree-config="treeConfig"
:footer-config="footerConfig"
:table-columns-config="tableColumnsConfig"
:table-data="tableData"
@onOptionRowClick="onOptionRowClick"
/>
</template>
<script>
export default {
data() {
return {
tableConfig: {
globalConfig: { // 全局默认渲染列配置
// 全局配置
checkType: false,
seq: true
}
},
tableGlobalConfig: {
showOverflow: false,
},
footerConfig: {
showFooter: false
},
toolbarConfig: {
moneyConversion: false, // 是否有金额转换
search: true, // 是否有search
import: false, // 导入
export: false, // 导出
print: false, // 打印
refresh: true, // 刷新
zoom: true, // 缩放
custom: true, // 选配展示列
},
treeConfig: {
expandAll: true,
indent: 10,
accordion: false
},
tableColumnsConfig: [
{
title: '姓名',
field: 'name',
align: 'center',
width: '180'
},
{
title: '性别',
field: 'sex',
align: 'center',
width: '150'
},
{
title: '年龄',
field: 'age',
align: 'center',
width: '150'
},
{
title: '地址',
field: 'address',
align: 'center'
},
{
title: '操作',
className: 'gloableOptionRow',
align: 'center',
fixed: 'right',
sortable: false,
filters: false,
width: 200,
cellRender: {
name: '$vxeTableOptionRow',
props: {
// statusField: '',
options: {
default: [
{
label: '删除',
code: 'delete',
class: 'delete',
btnStatus: '',
type: 'button' // text||button
},
{
label: '详情',
code: 'detail',
class: 'detail',
btnStatus: '',
type: 'button' // text||button
}
]
}
}
}
}
],
tableData: [
{
name: 'test1',
sex: '男',
age: '22',
address: 'beijing'
},
{
name: 'test2',
sex: '女',
age: '19',
address: 'shanghai'
},
{
name: 'test3',
sex: '男',
age: '25',
address: 'neimeng'
},
{
name: 'test4',
sex: '女',
age: '32',
address: 'xiamen'
},
{
name: 'test5',
sex: '男',
age: '34',
address: 'fujian'
},
{
name: 'test6',
sex: '男',
age: '52',
address: 'shenzhen'
},
{
name: 'test7',
sex: '女',
age: '25',
address: 'gansu'
},
{
name: 'test8',
sex: '女',
age: '22',
address: 'shanghai'
}
]
}
},
methods: {
// 操作按钮点击事件回调方式二
onOptionRowClick( { row, optionType }, context) {
switch (optionType) {
case 'delete':
console.log('操作按钮点击事件回调方式二', 'delete', row)
break
case 'edit':
console.log('操作按钮点击事件回调方式二', 'edit', row)
break
case 'detail':
console.log('操作按钮点击事件回调方式二', 'detail', row)
break
default:
}
}
}
}
</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
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
Expand Copy Copy
# 操作列配置（三）
行按钮不变，且行按钮类型是图标
行按钮不变，且行按钮类型是图标
<template>
<BsTable
:table-config="tableConfig"
:table-global-config="tableGlobalConfig"
:toolbar-config="toolbarConfig"
:height="420"
:pager-config="false"
:edit-config="{ enabled: false }"
:tree-config="treeConfig"
:footer-config="footerConfig"
:table-columns-config="tableColumnsConfig"
:table-data="tableData"
@onOptionRowClick="onOptionRowClick"
/>
</template>
<script>
export default {
data() {
return {
tableConfig: {
globalConfig: { // 全局默认渲染列配置
// 全局配置
checkType: false,
seq: true
},
renderers: {
// 编辑 附件 操作日志
$bsTableApiDemolOperateBtns: {
renderDefault(h, cellRender, params, context) {
let self = context.$grid.$parent
let { row, column } = params
return [
<el-tooltip content="编辑" placement="top" effect="light">
<a class="gloable-option-row-edit gloable-option-row fn-inline" onClick={() => self.onOptionRowClick({ row, column, optionType: 'edit' })}>编辑</ a>,
</el-tooltip>,
<el-tooltip content="附件" placement="top" effect="light">
<a class="gloable-option-row-attachment gloable-option-row fn-inline" onClick={() => self.onOptionRowClick({ row, column, optionType: 'attachment' })}>附件</a>,
</el-tooltip>,
<el-tooltip content="操作日志" placement="top" effect="light">
<a class="gloable-option-row-optionlog gloable-option-row fn-inline" onClick={() => self.onOptionRowClick({ row, column, optionType: 'report' })}>操作日志</a>
</el-tooltip>
]
}
}
},
methods: {
onOptionRowClick({ row, optionType }, context) { // 操作按钮点击事件回调方式一
switch (optionType) {
case 'attachment':
console.log('操作按钮点击事件回调方式一', 'attachment', row)
break
case 'edit':
console.log('操作按钮点击事件回调方式一', 'edit', row)
break
case 'report':
console.log('操作按钮点击事件回调方式一', 'report', row)
break
default:
}
}
}
},
tableGlobalConfig: {
showOverflow: false,
},
footerConfig: {
showFooter: false
},
toolbarConfig: {
moneyConversion: false, // 是否有金额转换
search: true, // 是否有search
import: false, // 导入
export: false, // 导出
print: false, // 打印
refresh: true, // 刷新
zoom: true, // 缩放
custom: true, // 选配展示列
},
treeConfig: {
expandAll: true,
indent: 10,
accordion: false
},
tableColumnsConfig: [
{
title: '姓名',
field: 'name',
align: 'center',
width: '180'
},
{
title: '性别',
field: 'sex',
align: 'center',
width: '150'
},
{
title: '年龄',
field: 'age',
align: 'center',
width: '150'
},
{
title: '地址',
field: 'address',
align: 'center'
},
{
title: '操作',
className: 'gloableOptionRow',
align: 'center',
fixed: 'right',
sortable: false,
filters: false,
width: 200,
cellRender: {
// 自定义渲染器【不推荐使用，如果要用因为重名覆盖原因，切记全局渲染器名称要唯一，建议起名时 模块名+OperateBtns 比如：AccountOperateBtns】
name: '$bsTableApiDemolOperateBtns'
}
}
],
tableData: [
{
name: 'test1',
sex: '男',
age: '22',
address: 'beijing'
},
{
name: 'test2',
sex: '女',
age: '19',
address: 'shanghai'
},
{
name: 'test3',
sex: '男',
age: '25',
address: 'neimeng'
},
{
name: 'test4',
sex: '女',
age: '32',
address: 'xiamen'
},
{
name: 'test5',
sex: '男',
age: '34',
address: 'fujian'
},
{
name: 'test6',
sex: '男',
age: '52',
address: 'shenzhen'
},
{
name: 'test7',
sex: '女',
age: '25',
address: 'gansu'
},
{
name: 'test8',
sex: '女',
age: '22',
address: 'shanghai'
}
]
}
},
methods: {
// 操作按钮点击事件回调方式二
onOptionRowClick( { row, optionType }, context) {
switch (optionType) {
case 'attachment':
console.log('操作按钮点击事件回调方式二', 'attachment', row)
break
case 'edit':
console.log('操作按钮点击事件回调方式二', 'edit', row)
break
case 'report':
console.log('操作按钮点击事件回调方式二', 'report', row)
break
default:
}
}
}
}
</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
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
Expand Copy Copy