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
| import { h, type Ref } from 'vue';
|
| import {
| setupVbenVxeTable,
| useVbenVxeGrid,
| type VxeGridDefines,
| } from '@vben/plugins/vxe-table';
|
| import { Button, Image } from 'ant-design-vue';
|
| import { useVbenForm } from './form';
|
| setupVbenVxeTable({
| configVxeTable: (vxeUI) => {
| vxeUI.setConfig({
| grid: {
| align: 'center',
| border: false,
| minHeight: 180,
| formConfig: {
| // 全局禁用vxe-table的表单配置，使用formOptions
| enabled: false,
| },
| proxyConfig: {
| autoLoad: true,
| response: {
| result: 'rows',
| total: 'total',
| list: 'rows',
| },
| showActiveMsg: true,
| showResponseMsg: false,
| },
| // 溢出展示形式
| showOverflow: true,
| pagerConfig: {
| // 默认条数
| pageSize: 10,
| // 分页可选条数
| pageSizes: [10, 20, 30, 40, 50],
| },
| rowConfig: {
| // 鼠标移入行显示 hover 样式
| isHover: true,
| // 点击行高亮
| isCurrent: true,
| },
| columnConfig: {
| // 可拖拽列宽
| resizable: true,
| },
| // 右上角工具栏
| toolbarConfig: {
| // 自定义列
| custom: {
| icon: 'vxe-icon-setting',
| },
| // 最大化
| zoom: true,
| // 刷新
| refresh: {
| // 默认为reload 修改为在当前页刷新
| code: 'query',
| },
| },
| // 圆角按钮
| round: true,
| // 表格尺寸
| size: 'medium',
| customConfig: {
| // 表格右上角自定义列配置 是否保存到localStorage
| // 必须存在id参数才能使用
| storage: true,
| },
| },
| });
|
| // 表格配置项可以用 cellRender: { name: 'CellImage' },
| vxeUI.renderer.add('CellImage', {
| renderTableDefault(_renderOpts, params) {
| const { column, row } = params;
| return h(Image, { src: row[column.field] });
| },
| });
|
| // 表格配置项可以用 cellRender: { name: 'CellLink' },
| vxeUI.renderer.add('CellLink', {
| renderTableDefault(renderOpts) {
| const { props } = renderOpts;
| return h(
| Button,
| { size: 'small', type: 'link' },
| { default: () => props?.text },
| );
| },
| });
|
| // 这里可以自行扩展 vxe-table 的全局配置，比如自定义格式化
| // vxeUI.formats.add
| },
| useVbenForm,
| });
|
| export { useVbenVxeGrid };
|
| export type * from '@vben/plugins/vxe-table';
|
| /**
| * 通用的表格复选框是否选中事件
| * @deprecated 使用vxeCheckboxChecked代替
| * @param checked 是否选中
| * @returns function
| */
| export function tableCheckboxEvent(checked: Ref<boolean>) {
| const event: (params: VxeGridDefines.CheckboxChangeEventParams) => void = (
| params,
| ) => {
| checked.value = params.$table.getCheckboxRecords().length > 0;
| };
| return event;
| }
|
| /**
| * 判断vxe-table的复选框是否选中
| * @param tableApi api
| * @returns boolean
| */
| export function vxeCheckboxChecked(
| tableApi: ReturnType<typeof useVbenVxeGrid>[1],
| ) {
| return tableApi?.grid?.getCheckboxRecords?.()?.length > 0;
| }
|
| /**
| * 通用的vxe-table排序事件 支持单/多字段排序
| * @param tableApi api
| * @param sortParams 排序参数
| */
| export function vxeSortEvent(
| tableApi: ReturnType<typeof useVbenVxeGrid>[1],
| sortParams: VxeGridDefines.SortChangeEventParams,
| ) {
| const { sortList } = sortParams;
| // 这里是排序取消 length为0 就不传参数了
| if (sortList.length === 0) {
| tableApi.query();
| return;
| }
| // 支持单/多字段排序
| const orderByColumn = sortList.map((item) => item.field).join(',');
| const isAsc = sortList.map((item) => item.order).join(',');
| tableApi.query({ orderByColumn, isAsc });
| }
|
|
