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
| import { h } from 'vue';
|
| import { setupVbenVxeTable, useVbenVxeGrid } from '@vben/plugins/vxe-table';
|
| import { ElButton, ElImage } from 'element-plus';
|
| import { useVbenForm } from './form';
|
| setupVbenVxeTable({
| configVxeTable: (vxeUI) => {
| vxeUI.setConfig({
| grid: {
| align: 'center',
| border: false,
| columnConfig: {
| resizable: true,
| },
| minHeight: 180,
| formConfig: {
| // 全局禁用vxe-table的表单配置，使用formOptions
| enabled: false,
| },
| proxyConfig: {
| autoLoad: true,
| response: {
| result: 'items',
| total: 'total',
| list: 'items',
| },
| showActiveMsg: true,
| showResponseMsg: false,
| },
| round: true,
| showOverflow: true,
| size: 'small',
| },
| });
|
| // 表格配置项可以用 cellRender: { name: 'CellImage' },
| vxeUI.renderer.add('CellImage', {
| renderTableDefault(_renderOpts, params) {
| const { column, row } = params;
| const src = row[column.field];
| return h(ElImage, { src, previewSrcList: [src] });
| },
| });
|
| // 表格配置项可以用 cellRender: { name: 'CellLink' },
| vxeUI.renderer.add('CellLink', {
| renderTableDefault(renderOpts) {
| const { props } = renderOpts;
| return h(
| ElButton,
| { size: 'small', link: true },
| { default: () => props?.text },
| );
| },
| });
|
| // 这里可以自行扩展 vxe-table 的全局配置，比如自定义格式化
| // vxeUI.formats.add
| },
| useVbenForm,
| });
|
| export { useVbenVxeGrid };
|
| export type * from '@vben/plugins/vxe-table';
|
|
