vxe-table 4.7.4 → 4.7.5
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/es/style.css +1 -1
- package/es/style.min.css +1 -1
- package/es/table/module/custom/hook.js +18 -2
- package/es/table/module/custom/panel.js +263 -159
- package/es/table/src/columnInfo.js +2 -0
- package/es/table/src/table.js +8 -2
- package/es/table/style.css +69 -9
- package/es/table/style.min.css +1 -1
- package/es/toolbar/src/toolbar.js +1 -1
- package/es/ui/index.js +4 -2
- package/es/vxe-table/style.css +69 -9
- package/es/vxe-table/style.min.css +1 -1
- package/lib/index.umd.js +214 -87
- package/lib/index.umd.min.js +1 -1
- package/lib/style.css +1 -1
- package/lib/style.min.css +1 -1
- package/lib/table/module/custom/hook.js +23 -2
- package/lib/table/module/custom/hook.min.js +1 -1
- package/lib/table/module/custom/panel.js +174 -80
- package/lib/table/module/custom/panel.min.js +1 -1
- package/lib/table/src/columnInfo.js +2 -0
- package/lib/table/src/columnInfo.min.js +1 -1
- package/lib/table/src/table.js +11 -2
- package/lib/table/src/table.min.js +1 -1
- package/lib/table/style/style.css +69 -9
- package/lib/table/style/style.min.css +1 -1
- package/lib/toolbar/src/toolbar.js +1 -1
- package/lib/toolbar/src/toolbar.min.js +1 -1
- package/lib/ui/index.js +4 -2
- package/lib/ui/index.min.js +1 -1
- package/lib/vxe-table/style/style.css +69 -9
- package/lib/vxe-table/style/style.min.css +1 -1
- package/package.json +2 -2
- package/packages/table/module/custom/hook.ts +19 -3
- package/packages/table/module/custom/panel.ts +272 -165
- package/packages/table/src/columnInfo.ts +4 -0
- package/packages/table/src/table.ts +8 -2
- package/packages/toolbar/src/toolbar.ts +1 -1
- package/packages/ui/index.ts +2 -0
- package/styles/components/table-module/custom.scss +78 -4
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { defineComponent, h, inject, ref, resolveComponent, TransitionGroup } from 'vue';
|
|
1
|
+
import { defineComponent, h, inject, ref, resolveComponent, TransitionGroup, createCommentVNode } from 'vue';
|
|
2
2
|
import { VxeUI } from '../../../ui';
|
|
3
3
|
import { formatText } from '../../../ui/src/utils';
|
|
4
4
|
import { addClass, removeClass } from '../../../ui/src/dom';
|
|
@@ -14,7 +14,7 @@ export default defineComponent({
|
|
|
14
14
|
},
|
|
15
15
|
setup(props) {
|
|
16
16
|
const $xeTable = inject('$xeTable', {});
|
|
17
|
-
const { reactData } = $xeTable;
|
|
17
|
+
const { props: tableProps, reactData } = $xeTable;
|
|
18
18
|
const { computeCustomOpts, computeColumnOpts, computeIsMaxFixedColumn } = $xeTable.getComputeMaps();
|
|
19
19
|
const refElem = ref();
|
|
20
20
|
const bodyElemRef = ref();
|
|
@@ -31,25 +31,61 @@ export default defineComponent({
|
|
|
31
31
|
customStore.activeWrapper = false;
|
|
32
32
|
setTimeout(() => {
|
|
33
33
|
if (!customStore.activeBtn && !customStore.activeWrapper) {
|
|
34
|
-
$xeTable.
|
|
34
|
+
$xeTable.customCloseEvent(evnt);
|
|
35
35
|
}
|
|
36
36
|
}, 300);
|
|
37
37
|
};
|
|
38
|
+
const getStoreData = () => {
|
|
39
|
+
return {};
|
|
40
|
+
};
|
|
41
|
+
const handleSaveStore = (type) => {
|
|
42
|
+
const { id } = tableProps;
|
|
43
|
+
const customOpts = computeCustomOpts.value;
|
|
44
|
+
const { storage, updateStore } = customOpts;
|
|
45
|
+
if (storage && id && updateStore) {
|
|
46
|
+
updateStore({
|
|
47
|
+
id,
|
|
48
|
+
type,
|
|
49
|
+
storeData: getStoreData()
|
|
50
|
+
});
|
|
51
|
+
}
|
|
52
|
+
};
|
|
38
53
|
const confirmCustomEvent = (evnt) => {
|
|
39
|
-
|
|
54
|
+
const { customColumnList } = reactData;
|
|
55
|
+
customColumnList.forEach((column, index) => {
|
|
56
|
+
const sortIndex = index + 1;
|
|
57
|
+
column.renderSortNumber = sortIndex;
|
|
58
|
+
column.fixed = column.renderFixed;
|
|
59
|
+
column.visible = column.renderVisible;
|
|
60
|
+
});
|
|
40
61
|
$xeTable.closeCustom();
|
|
41
62
|
$xeTable.emitCustomEvent('confirm', evnt);
|
|
63
|
+
handleSaveStore('confirm');
|
|
42
64
|
};
|
|
43
65
|
const cancelCustomEvent = (evnt) => {
|
|
66
|
+
const { customStore } = props;
|
|
67
|
+
const { customColumnList } = reactData;
|
|
68
|
+
const { oldSortMaps, oldFixedMaps, oldVisibleMaps } = customStore;
|
|
69
|
+
XEUtils.eachTree(customColumnList, column => {
|
|
70
|
+
const colid = column.getKey();
|
|
71
|
+
const visible = !!oldVisibleMaps[colid];
|
|
72
|
+
const fixed = oldFixedMaps[colid] || '';
|
|
73
|
+
column.renderVisible = visible;
|
|
74
|
+
column.visible = visible;
|
|
75
|
+
column.renderFixed = fixed;
|
|
76
|
+
column.fixed = fixed;
|
|
77
|
+
column.renderSortNumber = oldSortMaps[colid] || 0;
|
|
78
|
+
}, { children: 'children' });
|
|
44
79
|
$xeTable.closeCustom();
|
|
45
80
|
$xeTable.emitCustomEvent('cancel', evnt);
|
|
46
81
|
};
|
|
47
|
-
const
|
|
82
|
+
const handleResetCustomEvent = (evnt) => {
|
|
48
83
|
$xeTable.resetColumn(true);
|
|
49
84
|
$xeTable.closeCustom();
|
|
50
85
|
$xeTable.emitCustomEvent('reset', evnt);
|
|
86
|
+
handleSaveStore('confirm');
|
|
51
87
|
};
|
|
52
|
-
const
|
|
88
|
+
const resetCustomEvent = (evnt) => {
|
|
53
89
|
if (VxeUI.modal) {
|
|
54
90
|
VxeUI.modal.confirm({
|
|
55
91
|
content: getI18n('vxe.custom.cstmConfirmRestore'),
|
|
@@ -57,12 +93,12 @@ export default defineComponent({
|
|
|
57
93
|
escClosable: true
|
|
58
94
|
}).then(type => {
|
|
59
95
|
if (type === 'confirm') {
|
|
60
|
-
|
|
96
|
+
handleResetCustomEvent(evnt);
|
|
61
97
|
}
|
|
62
98
|
});
|
|
63
99
|
}
|
|
64
100
|
else {
|
|
65
|
-
|
|
101
|
+
handleResetCustomEvent(evnt);
|
|
66
102
|
}
|
|
67
103
|
};
|
|
68
104
|
const handleOptionCheck = (column) => {
|
|
@@ -71,17 +107,17 @@ export default defineComponent({
|
|
|
71
107
|
if (matchObj && matchObj.parent) {
|
|
72
108
|
const { parent } = matchObj;
|
|
73
109
|
if (parent.children && parent.children.length) {
|
|
74
|
-
parent.
|
|
75
|
-
parent.halfVisible = !parent.
|
|
110
|
+
parent.renderVisible = parent.children.every((column) => column.renderVisible);
|
|
111
|
+
parent.halfVisible = !parent.renderVisible && parent.children.some((column) => column.renderVisible || column.halfVisible);
|
|
76
112
|
handleOptionCheck(parent);
|
|
77
113
|
}
|
|
78
114
|
}
|
|
79
115
|
};
|
|
80
116
|
const changeCheckboxOption = (column) => {
|
|
81
|
-
const isChecked = !column.
|
|
117
|
+
const isChecked = !column.renderVisible;
|
|
82
118
|
const customOpts = computeCustomOpts.value;
|
|
83
119
|
XEUtils.eachTree([column], (item) => {
|
|
84
|
-
item.
|
|
120
|
+
item.renderVisible = isChecked;
|
|
85
121
|
item.halfVisible = false;
|
|
86
122
|
});
|
|
87
123
|
handleOptionCheck(column);
|
|
@@ -92,21 +128,23 @@ export default defineComponent({
|
|
|
92
128
|
};
|
|
93
129
|
const changeFixedOption = (column, colFixed) => {
|
|
94
130
|
const isMaxFixedColumn = computeIsMaxFixedColumn.value;
|
|
95
|
-
if (column.
|
|
96
|
-
|
|
131
|
+
if (column.renderFixed === colFixed) {
|
|
132
|
+
column.renderFixed = '';
|
|
133
|
+
// $xeTable.clearColumnFixed(column)
|
|
97
134
|
}
|
|
98
135
|
else {
|
|
99
|
-
if (!isMaxFixedColumn || column.
|
|
100
|
-
|
|
136
|
+
if (!isMaxFixedColumn || column.renderFixed) {
|
|
137
|
+
column.renderFixed = colFixed;
|
|
138
|
+
// $xeTable.setColumnFixed(column, colFixed)
|
|
101
139
|
}
|
|
102
140
|
}
|
|
103
141
|
};
|
|
104
|
-
const changePopupFixedOption = (
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
}
|
|
142
|
+
// const changePopupFixedOption = () => {
|
|
143
|
+
// const isMaxFixedColumn = computeIsMaxFixedColumn.value
|
|
144
|
+
// if (!isMaxFixedColumn) {
|
|
145
|
+
// // $xeTable.setColumnFixed(column, column.fixed)
|
|
146
|
+
// }
|
|
147
|
+
// }
|
|
110
148
|
const allCustomEvent = () => {
|
|
111
149
|
const { customStore } = props;
|
|
112
150
|
const { customColumnList } = reactData;
|
|
@@ -115,7 +153,7 @@ export default defineComponent({
|
|
|
115
153
|
const isAll = !customStore.isAll;
|
|
116
154
|
XEUtils.eachTree(customColumnList, (column) => {
|
|
117
155
|
if (!checkMethod || checkMethod({ column })) {
|
|
118
|
-
column.
|
|
156
|
+
column.renderVisible = isAll;
|
|
119
157
|
column.halfVisible = false;
|
|
120
158
|
}
|
|
121
159
|
});
|
|
@@ -150,14 +188,6 @@ export default defineComponent({
|
|
|
150
188
|
evnt.dataTransfer.setDragImage(img, 0, 0);
|
|
151
189
|
}
|
|
152
190
|
};
|
|
153
|
-
const updateColumnSort = () => {
|
|
154
|
-
const { customColumnList } = reactData;
|
|
155
|
-
// 更新顺序
|
|
156
|
-
customColumnList.forEach((column, index) => {
|
|
157
|
-
const sortIndex = index + 1;
|
|
158
|
-
column.renderSortNumber = sortIndex;
|
|
159
|
-
});
|
|
160
|
-
};
|
|
161
191
|
const sortDragendEvent = (evnt) => {
|
|
162
192
|
const { customColumnList } = reactData;
|
|
163
193
|
const trEl = evnt.currentTarget;
|
|
@@ -195,8 +225,6 @@ export default defineComponent({
|
|
|
195
225
|
}
|
|
196
226
|
removeClass(trEl, 'active--drag-target');
|
|
197
227
|
removeClass(trEl, 'active--drag-origin');
|
|
198
|
-
// 更新顺序
|
|
199
|
-
updateColumnSort();
|
|
200
228
|
};
|
|
201
229
|
const sortDragoverEvent = (evnt) => {
|
|
202
230
|
const trEl = evnt.currentTarget;
|
|
@@ -235,7 +263,7 @@ export default defineComponent({
|
|
|
235
263
|
const { customColumnList } = reactData;
|
|
236
264
|
const customOpts = computeCustomOpts.value;
|
|
237
265
|
const { maxHeight } = customStore;
|
|
238
|
-
const { checkMethod, visibleMethod, trigger } = customOpts;
|
|
266
|
+
const { checkMethod, visibleMethod, allowSort, allowFixed, trigger } = customOpts;
|
|
239
267
|
const isMaxFixedColumn = computeIsMaxFixedColumn.value;
|
|
240
268
|
const colVNs = [];
|
|
241
269
|
const customWrapperOns = {};
|
|
@@ -247,24 +275,28 @@ export default defineComponent({
|
|
|
247
275
|
XEUtils.eachTree(customColumnList, (column, index, items, path, parent) => {
|
|
248
276
|
const isVisible = visibleMethod ? visibleMethod({ column }) : true;
|
|
249
277
|
if (isVisible) {
|
|
250
|
-
const isChecked = column.
|
|
278
|
+
const isChecked = column.renderVisible;
|
|
251
279
|
const isIndeterminate = column.halfVisible;
|
|
252
280
|
const isColGroup = column.children && column.children.length;
|
|
253
281
|
const colTitle = formatText(column.getTitle(), 1);
|
|
254
282
|
const isDisabled = checkMethod ? !checkMethod({ column }) : false;
|
|
255
283
|
colVNs.push(h('li', {
|
|
256
284
|
key: column.id,
|
|
285
|
+
colid: column.id,
|
|
257
286
|
class: ['vxe-table-custom--option', `level--${column.level}`, {
|
|
258
287
|
'is--group': isColGroup
|
|
259
|
-
}]
|
|
288
|
+
}],
|
|
289
|
+
onDragstart: sortDragstartEvent,
|
|
290
|
+
onDragend: sortDragendEvent,
|
|
291
|
+
onDragover: sortDragoverEvent
|
|
260
292
|
}, [
|
|
261
293
|
h('div', {
|
|
262
|
-
title: colTitle,
|
|
263
294
|
class: ['vxe-table-custom--checkbox-option', {
|
|
264
295
|
'is--checked': isChecked,
|
|
265
296
|
'is--indeterminate': isIndeterminate,
|
|
266
297
|
'is--disabled': isDisabled
|
|
267
298
|
}],
|
|
299
|
+
title: getI18n('vxe.custom.setting.colVisible'),
|
|
268
300
|
onClick: () => {
|
|
269
301
|
if (!isDisabled) {
|
|
270
302
|
changeCheckboxOption(column);
|
|
@@ -273,37 +305,54 @@ export default defineComponent({
|
|
|
273
305
|
}, [
|
|
274
306
|
h('span', {
|
|
275
307
|
class: ['vxe-checkbox--icon', isIndeterminate ? getIcon().TABLE_CHECKBOX_INDETERMINATE : (isChecked ? getIcon().TABLE_CHECKBOX_CHECKED : getIcon().TABLE_CHECKBOX_UNCHECKED)]
|
|
276
|
-
})
|
|
277
|
-
h('span', {
|
|
278
|
-
class: 'vxe-checkbox--label'
|
|
279
|
-
}, colTitle)
|
|
308
|
+
})
|
|
280
309
|
]),
|
|
281
|
-
|
|
310
|
+
allowSort && column.level === 1
|
|
311
|
+
? h('div', {
|
|
312
|
+
class: 'vxe-table-custom--sort-option'
|
|
313
|
+
}, [
|
|
314
|
+
h('span', {
|
|
315
|
+
class: 'vxe-table-custom--sort-btn',
|
|
316
|
+
title: getI18n('vxe.custom.setting.sortHelpTip'),
|
|
317
|
+
onMousedown: sortMousedownEvent,
|
|
318
|
+
onMouseup: sortMouseupEvent
|
|
319
|
+
}, [
|
|
320
|
+
h('i', {
|
|
321
|
+
class: getIcon().TABLE_CUSTOM_SORT
|
|
322
|
+
})
|
|
323
|
+
])
|
|
324
|
+
])
|
|
325
|
+
: createCommentVNode(),
|
|
326
|
+
h('div', {
|
|
327
|
+
class: 'vxe-table-custom--checkbox-label',
|
|
328
|
+
title: colTitle
|
|
329
|
+
}, colTitle),
|
|
330
|
+
!parent && allowFixed
|
|
282
331
|
? h('div', {
|
|
283
332
|
class: 'vxe-table-custom--fixed-option'
|
|
284
333
|
}, [
|
|
285
334
|
h('span', {
|
|
286
|
-
class: ['vxe-table-custom--fixed-left-option', column.
|
|
287
|
-
'is--checked': column.
|
|
288
|
-
'is--disabled': isMaxFixedColumn && !column.
|
|
335
|
+
class: ['vxe-table-custom--fixed-left-option', column.renderFixed === 'left' ? getIcon().TOOLBAR_TOOLS_FIXED_LEFT_ACTIVE : getIcon().TOOLBAR_TOOLS_FIXED_LEFT, {
|
|
336
|
+
'is--checked': column.renderFixed === 'left',
|
|
337
|
+
'is--disabled': isMaxFixedColumn && !column.renderFixed
|
|
289
338
|
}],
|
|
290
|
-
title: getI18n(column.
|
|
339
|
+
title: getI18n(column.renderFixed === 'left' ? 'vxe.toolbar.cancelFixed' : 'vxe.toolbar.fixedLeft'),
|
|
291
340
|
onClick: () => {
|
|
292
341
|
changeFixedOption(column, 'left');
|
|
293
342
|
}
|
|
294
343
|
}),
|
|
295
344
|
h('span', {
|
|
296
|
-
class: ['vxe-table-custom--fixed-right-option', column.
|
|
297
|
-
'is--checked': column.
|
|
298
|
-
'is--disabled': isMaxFixedColumn && !column.
|
|
345
|
+
class: ['vxe-table-custom--fixed-right-option', column.renderFixed === 'right' ? getIcon().TOOLBAR_TOOLS_FIXED_RIGHT_ACTIVE : getIcon().TOOLBAR_TOOLS_FIXED_RIGHT, {
|
|
346
|
+
'is--checked': column.renderFixed === 'right',
|
|
347
|
+
'is--disabled': isMaxFixedColumn && !column.renderFixed
|
|
299
348
|
}],
|
|
300
|
-
title: getI18n(column.
|
|
349
|
+
title: getI18n(column.renderFixed === 'right' ? 'vxe.toolbar.cancelFixed' : 'vxe.toolbar.fixedRight'),
|
|
301
350
|
onClick: () => {
|
|
302
351
|
changeFixedOption(column, 'right');
|
|
303
352
|
}
|
|
304
353
|
})
|
|
305
354
|
])
|
|
306
|
-
:
|
|
355
|
+
: createCommentVNode()
|
|
307
356
|
]));
|
|
308
357
|
}
|
|
309
358
|
});
|
|
@@ -315,63 +364,82 @@ export default defineComponent({
|
|
|
315
364
|
class: ['vxe-table-custom-wrapper', {
|
|
316
365
|
'is--active': customStore.visible
|
|
317
366
|
}]
|
|
318
|
-
},
|
|
319
|
-
|
|
320
|
-
|
|
321
|
-
|
|
322
|
-
h('li', {
|
|
323
|
-
class: 'vxe-table-custom--option'
|
|
367
|
+
}, customStore.visible
|
|
368
|
+
? [
|
|
369
|
+
h('ul', {
|
|
370
|
+
class: 'vxe-table-custom--header'
|
|
324
371
|
}, [
|
|
325
|
-
h('
|
|
326
|
-
class:
|
|
327
|
-
'is--checked': isAllChecked,
|
|
328
|
-
'is--indeterminate': isAllIndeterminate
|
|
329
|
-
}],
|
|
330
|
-
title: getI18n('vxe.table.allTitle'),
|
|
331
|
-
onClick: allCustomEvent
|
|
372
|
+
h('li', {
|
|
373
|
+
class: 'vxe-table-custom--option'
|
|
332
374
|
}, [
|
|
333
|
-
h('
|
|
334
|
-
class: ['vxe-checkbox
|
|
335
|
-
|
|
336
|
-
|
|
337
|
-
|
|
338
|
-
|
|
375
|
+
h('div', {
|
|
376
|
+
class: ['vxe-table-custom--checkbox-option', {
|
|
377
|
+
'is--checked': isAllChecked,
|
|
378
|
+
'is--indeterminate': isAllIndeterminate
|
|
379
|
+
}],
|
|
380
|
+
title: getI18n('vxe.table.allTitle'),
|
|
381
|
+
onClick: allCustomEvent
|
|
382
|
+
}, [
|
|
383
|
+
h('span', {
|
|
384
|
+
class: ['vxe-checkbox--icon', isAllIndeterminate ? getIcon().TABLE_CHECKBOX_INDETERMINATE : (isAllChecked ? getIcon().TABLE_CHECKBOX_CHECKED : getIcon().TABLE_CHECKBOX_UNCHECKED)]
|
|
385
|
+
}),
|
|
386
|
+
h('span', {
|
|
387
|
+
class: 'vxe-checkbox--label'
|
|
388
|
+
}, getI18n('vxe.toolbar.customAll'))
|
|
389
|
+
])
|
|
339
390
|
])
|
|
340
|
-
])
|
|
341
|
-
|
|
342
|
-
|
|
343
|
-
|
|
344
|
-
maxHeight: `${maxHeight}px`
|
|
345
|
-
}
|
|
346
|
-
: {} }, customWrapperOns), colVNs),
|
|
347
|
-
customOpts.showFooter
|
|
348
|
-
? h('div', {
|
|
349
|
-
class: 'vxe-table-custom--footer'
|
|
391
|
+
]),
|
|
392
|
+
h('div', {
|
|
393
|
+
ref: bodyElemRef,
|
|
394
|
+
class: 'vxe-table-custom--list-wrapper'
|
|
350
395
|
}, [
|
|
351
|
-
h('
|
|
352
|
-
|
|
353
|
-
|
|
354
|
-
|
|
355
|
-
|
|
356
|
-
|
|
357
|
-
|
|
358
|
-
|
|
359
|
-
|
|
360
|
-
|
|
361
|
-
|
|
396
|
+
h(TransitionGroup, Object.assign({ class: 'vxe-table-custom--body', name: 'vxe-table-custom--list', tag: 'ul', style: maxHeight
|
|
397
|
+
? {
|
|
398
|
+
maxHeight: `${maxHeight}px`
|
|
399
|
+
}
|
|
400
|
+
: {} }, customWrapperOns), {
|
|
401
|
+
default: () => colVNs
|
|
402
|
+
}),
|
|
403
|
+
h('div', {
|
|
404
|
+
ref: dragHintElemRef,
|
|
405
|
+
class: 'vxe-table-custom-popup--drag-hint'
|
|
406
|
+
}, getI18n('vxe.custom.cstmDragTarget', [dragColumn.value ? dragColumn.value.getTitle() : '']))
|
|
407
|
+
]),
|
|
408
|
+
customOpts.showFooter
|
|
409
|
+
? h('div', {
|
|
410
|
+
class: 'vxe-table-custom--footer'
|
|
411
|
+
}, [
|
|
412
|
+
h('button', {
|
|
413
|
+
class: 'btn--reset',
|
|
414
|
+
onClick: resetCustomEvent
|
|
415
|
+
}, customOpts.resetButtonText || getI18n('vxe.table.customRestore')),
|
|
416
|
+
customOpts.immediate
|
|
417
|
+
? createCommentVNode()
|
|
418
|
+
: h('button', {
|
|
419
|
+
class: 'btn--cancel',
|
|
420
|
+
onClick: cancelCustomEvent
|
|
421
|
+
}, customOpts.resetButtonText || getI18n('vxe.table.customCancel')),
|
|
422
|
+
h('button', {
|
|
423
|
+
class: 'btn--confirm',
|
|
424
|
+
onClick: confirmCustomEvent
|
|
425
|
+
}, customOpts.confirmButtonText || getI18n('vxe.table.customConfirm'))
|
|
426
|
+
])
|
|
427
|
+
: null
|
|
428
|
+
]
|
|
429
|
+
: []);
|
|
362
430
|
};
|
|
363
431
|
const renderPopupPanel = () => {
|
|
364
432
|
const { customStore } = props;
|
|
365
433
|
const { customColumnList } = reactData;
|
|
366
434
|
const customOpts = computeCustomOpts.value;
|
|
367
|
-
const { checkMethod, visibleMethod } = customOpts;
|
|
435
|
+
const { allowSort, allowFixed, checkMethod, visibleMethod } = customOpts;
|
|
368
436
|
const columnOpts = computeColumnOpts.value;
|
|
369
437
|
const isMaxFixedColumn = computeIsMaxFixedColumn.value;
|
|
370
438
|
const trVNs = [];
|
|
371
439
|
XEUtils.eachTree(customColumnList, (column, index, items, path, parent) => {
|
|
372
440
|
const isVisible = visibleMethod ? visibleMethod({ column }) : true;
|
|
373
441
|
if (isVisible) {
|
|
374
|
-
const isChecked = column.
|
|
442
|
+
const isChecked = column.renderVisible;
|
|
375
443
|
const isIndeterminate = column.halfVisible;
|
|
376
444
|
const colTitle = formatText(column.getTitle(), 1);
|
|
377
445
|
const isColGroup = column.children && column.children.length;
|
|
@@ -386,29 +454,6 @@ export default defineComponent({
|
|
|
386
454
|
onDragend: sortDragendEvent,
|
|
387
455
|
onDragover: sortDragoverEvent
|
|
388
456
|
}, [
|
|
389
|
-
h('td', {
|
|
390
|
-
class: 'vxe-table-custom-popup--column-item col--sort'
|
|
391
|
-
}, [
|
|
392
|
-
column.level === 1
|
|
393
|
-
? h('span', {
|
|
394
|
-
class: 'vxe-table-custom-popup--column-sort-btn',
|
|
395
|
-
onMousedown: sortMousedownEvent,
|
|
396
|
-
onMouseup: sortMouseupEvent
|
|
397
|
-
}, [
|
|
398
|
-
h('i', {
|
|
399
|
-
class: 'vxe-icon-sort'
|
|
400
|
-
})
|
|
401
|
-
])
|
|
402
|
-
: null
|
|
403
|
-
]),
|
|
404
|
-
h('td', {
|
|
405
|
-
class: 'vxe-table-custom-popup--column-item col--name'
|
|
406
|
-
}, [
|
|
407
|
-
h('div', {
|
|
408
|
-
class: 'vxe-table-custom-popup--name',
|
|
409
|
-
title: colTitle
|
|
410
|
-
}, colTitle)
|
|
411
|
-
]),
|
|
412
457
|
h('td', {
|
|
413
458
|
class: 'vxe-table-custom-popup--column-item col--visible'
|
|
414
459
|
}, [
|
|
@@ -418,6 +463,7 @@ export default defineComponent({
|
|
|
418
463
|
'is--indeterminate': isIndeterminate,
|
|
419
464
|
'is--disabled': isDisabled
|
|
420
465
|
}],
|
|
466
|
+
title: getI18n('vxe.custom.setting.colVisible'),
|
|
421
467
|
onClick: () => {
|
|
422
468
|
if (!isDisabled) {
|
|
423
469
|
changeCheckboxOption(column);
|
|
@@ -429,31 +475,61 @@ export default defineComponent({
|
|
|
429
475
|
})
|
|
430
476
|
])
|
|
431
477
|
]),
|
|
478
|
+
allowSort
|
|
479
|
+
? h('td', {
|
|
480
|
+
class: 'vxe-table-custom-popup--column-item col--sort'
|
|
481
|
+
}, [
|
|
482
|
+
column.level === 1
|
|
483
|
+
? h('span', {
|
|
484
|
+
class: 'vxe-table-custom-popup--column-sort-btn',
|
|
485
|
+
title: getI18n('vxe.custom.setting.sortHelpTip'),
|
|
486
|
+
onMousedown: sortMousedownEvent,
|
|
487
|
+
onMouseup: sortMouseupEvent
|
|
488
|
+
}, [
|
|
489
|
+
h('i', {
|
|
490
|
+
class: getIcon().TABLE_CUSTOM_SORT
|
|
491
|
+
})
|
|
492
|
+
])
|
|
493
|
+
: null
|
|
494
|
+
])
|
|
495
|
+
: createCommentVNode(),
|
|
432
496
|
h('td', {
|
|
433
|
-
class: 'vxe-table-custom-popup--column-item col--
|
|
497
|
+
class: 'vxe-table-custom-popup--column-item col--name'
|
|
434
498
|
}, [
|
|
435
|
-
|
|
436
|
-
|
|
437
|
-
|
|
438
|
-
|
|
439
|
-
|
|
440
|
-
|
|
441
|
-
|
|
442
|
-
|
|
443
|
-
|
|
444
|
-
|
|
445
|
-
'
|
|
446
|
-
column.
|
|
447
|
-
|
|
448
|
-
|
|
449
|
-
|
|
450
|
-
|
|
451
|
-
|
|
452
|
-
|
|
453
|
-
|
|
499
|
+
h('div', {
|
|
500
|
+
class: 'vxe-table-custom-popup--name',
|
|
501
|
+
title: colTitle
|
|
502
|
+
}, colTitle)
|
|
503
|
+
]),
|
|
504
|
+
allowFixed
|
|
505
|
+
? h('td', {
|
|
506
|
+
class: 'vxe-table-custom-popup--column-item col--fixed'
|
|
507
|
+
}, [
|
|
508
|
+
!parent
|
|
509
|
+
? h(resolveComponent('vxe-radio-group'), {
|
|
510
|
+
modelValue: column.renderFixed || '',
|
|
511
|
+
type: 'button',
|
|
512
|
+
size: 'mini',
|
|
513
|
+
options: [
|
|
514
|
+
{ label: getI18n('vxe.custom.setting.fixedLeft'), value: 'left', disabled: isMaxFixedColumn },
|
|
515
|
+
{ label: getI18n('vxe.custom.setting.fixedUnset'), value: '' },
|
|
516
|
+
{ label: getI18n('vxe.custom.setting.fixedRight'), value: 'right', disabled: isMaxFixedColumn }
|
|
517
|
+
],
|
|
518
|
+
'onUpdate:modelValue'(value) {
|
|
519
|
+
column.renderFixed = value;
|
|
520
|
+
}
|
|
521
|
+
// onChange () {
|
|
522
|
+
// changePopupFixedOption(column)
|
|
523
|
+
// }
|
|
524
|
+
})
|
|
525
|
+
: null
|
|
526
|
+
])
|
|
527
|
+
: createCommentVNode()
|
|
454
528
|
]));
|
|
455
529
|
}
|
|
456
530
|
});
|
|
531
|
+
const isAllChecked = customStore.isAll;
|
|
532
|
+
const isAllIndeterminate = customStore.isIndeterminate;
|
|
457
533
|
return h(resolveComponent('vxe-modal'), {
|
|
458
534
|
key: 'popup',
|
|
459
535
|
className: 'vxe-table-custom-popup-wrapper vxe-table--ignore-clear',
|
|
@@ -488,38 +564,66 @@ export default defineComponent({
|
|
|
488
564
|
width: '80px'
|
|
489
565
|
}
|
|
490
566
|
}),
|
|
491
|
-
|
|
567
|
+
allowSort
|
|
568
|
+
? h('col', {
|
|
569
|
+
style: {
|
|
570
|
+
width: '80px'
|
|
571
|
+
}
|
|
572
|
+
})
|
|
573
|
+
: createCommentVNode(),
|
|
492
574
|
h('col', {
|
|
493
575
|
style: {
|
|
494
|
-
|
|
576
|
+
minWidth: '120px'
|
|
495
577
|
}
|
|
496
578
|
}),
|
|
497
|
-
|
|
498
|
-
|
|
499
|
-
|
|
500
|
-
|
|
501
|
-
|
|
579
|
+
allowFixed
|
|
580
|
+
? h('col', {
|
|
581
|
+
style: {
|
|
582
|
+
width: '200px'
|
|
583
|
+
}
|
|
584
|
+
})
|
|
585
|
+
: createCommentVNode()
|
|
502
586
|
]),
|
|
503
587
|
h('thead', {}, [
|
|
504
588
|
h('tr', {}, [
|
|
505
589
|
h('th', {}, [
|
|
506
|
-
h('
|
|
507
|
-
class: 'vxe-table-custom
|
|
508
|
-
|
|
509
|
-
|
|
510
|
-
|
|
511
|
-
|
|
512
|
-
|
|
513
|
-
|
|
514
|
-
|
|
515
|
-
|
|
516
|
-
|
|
517
|
-
|
|
518
|
-
|
|
590
|
+
h('div', {
|
|
591
|
+
class: ['vxe-table-custom--checkbox-option', {
|
|
592
|
+
'is--checked': isAllChecked,
|
|
593
|
+
'is--indeterminate': isAllIndeterminate
|
|
594
|
+
}],
|
|
595
|
+
title: getI18n('vxe.table.allTitle'),
|
|
596
|
+
onClick: allCustomEvent
|
|
597
|
+
}, [
|
|
598
|
+
h('span', {
|
|
599
|
+
class: ['vxe-checkbox--icon', isAllIndeterminate ? getIcon().TABLE_CHECKBOX_INDETERMINATE : (isAllChecked ? getIcon().TABLE_CHECKBOX_CHECKED : getIcon().TABLE_CHECKBOX_UNCHECKED)]
|
|
600
|
+
}),
|
|
601
|
+
h('span', {
|
|
602
|
+
class: 'vxe-checkbox--label'
|
|
603
|
+
}, getI18n('vxe.toolbar.customAll'))
|
|
604
|
+
])
|
|
519
605
|
]),
|
|
606
|
+
allowSort
|
|
607
|
+
? h('th', {}, [
|
|
608
|
+
h('span', {
|
|
609
|
+
class: 'vxe-table-custom-popup--table-sort-help-title'
|
|
610
|
+
}, getI18n('vxe.custom.setting.colSort')),
|
|
611
|
+
h(resolveComponent('vxe-tooltip'), {
|
|
612
|
+
enterable: true,
|
|
613
|
+
content: getI18n('vxe.custom.setting.sortHelpTip')
|
|
614
|
+
}, {
|
|
615
|
+
default: () => {
|
|
616
|
+
return h('i', {
|
|
617
|
+
class: 'vxe-table-custom-popup--table-sort-help-icon vxe-icon-question-circle-fill'
|
|
618
|
+
});
|
|
619
|
+
}
|
|
620
|
+
})
|
|
621
|
+
])
|
|
622
|
+
: createCommentVNode(),
|
|
520
623
|
h('th', {}, getI18n('vxe.custom.setting.colTitle')),
|
|
521
|
-
|
|
522
|
-
|
|
624
|
+
allowFixed
|
|
625
|
+
? h('th', {}, getI18n('vxe.custom.setting.colFixed', [columnOpts.maxFixedSize || 0]))
|
|
626
|
+
: createCommentVNode()
|
|
523
627
|
])
|
|
524
628
|
]),
|
|
525
629
|
h(TransitionGroup, {
|
|
@@ -543,7 +647,7 @@ export default defineComponent({
|
|
|
543
647
|
}, [
|
|
544
648
|
h(resolveComponent('vxe-button'), {
|
|
545
649
|
content: customOpts.resetButtonText || getI18n('vxe.custom.cstmRestore'),
|
|
546
|
-
onClick:
|
|
650
|
+
onClick: resetCustomEvent
|
|
547
651
|
}),
|
|
548
652
|
h(resolveComponent('vxe-button'), {
|
|
549
653
|
content: customOpts.resetButtonText || getI18n('vxe.custom.cstmCancel'),
|