vxe-table 3.23.2 → 3.23.3
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/table/module/custom/mixin.js +6 -0
- package/es/table/module/export/export-panel.js +3 -2
- package/es/table/module/export/mixin.js +12 -6
- package/es/table/module/filter/mixin.js +102 -76
- package/es/table/src/methods.js +13 -3
- package/es/table/src/util.js +1 -0
- package/es/ui/index.js +1 -1
- package/es/ui/src/dom.js +1 -1
- package/es/ui/src/log.js +1 -1
- package/lib/index.umd.js +152 -100
- package/lib/index.umd.min.js +1 -1
- package/lib/style.css +1 -1
- package/lib/table/module/custom/mixin.js +8 -0
- package/lib/table/module/custom/mixin.min.js +1 -1
- package/lib/table/module/export/export-panel.js +3 -2
- package/lib/table/module/export/export-panel.min.js +1 -1
- package/lib/table/module/export/mixin.js +15 -6
- package/lib/table/module/export/mixin.min.js +1 -1
- package/lib/table/module/filter/mixin.js +116 -83
- package/lib/table/module/filter/mixin.min.js +1 -1
- package/lib/table/src/methods.js +2 -2
- package/lib/table/src/methods.min.js +1 -1
- package/lib/table/src/util.js +1 -0
- package/lib/table/src/util.min.js +1 -1
- package/lib/ui/index.js +1 -1
- package/lib/ui/index.min.js +1 -1
- package/lib/ui/src/dom.js +1 -1
- package/lib/ui/src/dom.min.js +1 -1
- package/lib/ui/src/log.js +1 -1
- package/lib/ui/src/log.min.js +1 -1
- package/package.json +2 -2
- package/packages/table/module/custom/mixin.ts +7 -0
- package/packages/table/module/export/export-panel.ts +3 -2
- package/packages/table/module/export/mixin.ts +11 -6
- package/packages/table/module/filter/mixin.ts +102 -72
- package/packages/table/src/methods.ts +13 -3
- package/packages/table/src/util.ts +1 -0
- package/packages/ui/src/dom.ts +1 -1
- /package/es/{iconfont.1787677388170.ttf → iconfont.1788176636871.ttf} +0 -0
- /package/es/{iconfont.1787677388170.woff → iconfont.1788176636871.woff} +0 -0
- /package/es/{iconfont.1787677388170.woff2 → iconfont.1788176636871.woff2} +0 -0
- /package/lib/{iconfont.1787677388170.ttf → iconfont.1788176636871.ttf} +0 -0
- /package/lib/{iconfont.1787677388170.woff → iconfont.1788176636871.woff} +0 -0
- /package/lib/{iconfont.1787677388170.woff2 → iconfont.1788176636871.woff2} +0 -0
|
@@ -497,6 +497,12 @@ export default {
|
|
|
497
497
|
},
|
|
498
498
|
handleCustomStyle() {
|
|
499
499
|
const $xeTable = this;
|
|
500
|
+
const reactData = $xeTable.reactData;
|
|
501
|
+
const { customStore } = reactData;
|
|
502
|
+
if (!customStore.visible) {
|
|
503
|
+
return $xeTable.$nextTick();
|
|
504
|
+
}
|
|
505
|
+
reactData.isCustomDragStatus = false;
|
|
500
506
|
return updatePopupStyle($xeTable);
|
|
501
507
|
}
|
|
502
508
|
}
|
|
@@ -163,9 +163,10 @@ export default {
|
|
|
163
163
|
const { hasMerge, columns } = storeData;
|
|
164
164
|
const checkedAll = $xeExportPanel.computeCheckedAll;
|
|
165
165
|
const supportMerge = $xeExportPanel.computeSupportMerge;
|
|
166
|
-
|
|
166
|
+
// 内部导出使用 _columns -> _children 为自定义子集
|
|
167
|
+
const expColumns = XEUtils.searchTree(columns, column => column.checked, { children: 'children', mapChildren: '_children', original: true });
|
|
167
168
|
return Object.assign({}, defaultOptions, {
|
|
168
|
-
|
|
169
|
+
_columns: expColumns,
|
|
169
170
|
isMerge: hasMerge && supportMerge && checkedAll ? defaultOptions.isMerge : false
|
|
170
171
|
});
|
|
171
172
|
},
|
|
@@ -1183,7 +1183,7 @@ function handleExportAndPrint($xeTable, options, isPrint) {
|
|
|
1183
1183
|
const exportOpts = $xeTable.computeExportOpts;
|
|
1184
1184
|
const hasTree = !!treeConfig;
|
|
1185
1185
|
const hasRowGroup = rowGroupList.length > 0;
|
|
1186
|
-
const
|
|
1186
|
+
const printOpts = $xeTable.computePrintOpts;
|
|
1187
1187
|
const selectRecords = $xeTable.getCheckboxRecords();
|
|
1188
1188
|
const proxyOpts = $xeGGWrapper ? $xeGGWrapper.computeProxyOpts : {};
|
|
1189
1189
|
const hasFooter = !!footerTableData.length;
|
|
@@ -1204,9 +1204,9 @@ function handleExportAndPrint($xeTable, options, isPrint) {
|
|
|
1204
1204
|
warnLog('vxe.error.delProp', ['isAllExpand', 'isTreeAllExpanded']);
|
|
1205
1205
|
defOpts.isTreeAllExpanded = defOpts.isAllExpand;
|
|
1206
1206
|
}
|
|
1207
|
-
const types = defOpts.types || XEUtils.keys(exportOpts._typeMaps);
|
|
1207
|
+
const types = isPrint ? [] : (defOpts.types || XEUtils.keys(exportOpts._typeMaps));
|
|
1208
1208
|
const modes = defOpts.modes || [];
|
|
1209
|
-
const checkMethod =
|
|
1209
|
+
const checkMethod = (isPrint ? printOpts : exportOpts).checkMethod;
|
|
1210
1210
|
const exportColumns = collectColumn.slice(0);
|
|
1211
1211
|
const { columns, excludeFields, includeFields, extraFields } = defOpts;
|
|
1212
1212
|
// 处理类型
|
|
@@ -1313,10 +1313,10 @@ function handleExportAndPrint($xeTable, options, isPrint) {
|
|
|
1313
1313
|
}
|
|
1314
1314
|
}
|
|
1315
1315
|
if (!modeList.some(item => item.value === mode)) {
|
|
1316
|
-
exportParams.mode = modeList[0].value;
|
|
1316
|
+
exportParams.mode = modeList.length ? modeList[0].value : '';
|
|
1317
1317
|
}
|
|
1318
1318
|
if (!typeList.some(item => item.value === type)) {
|
|
1319
|
-
exportParams.type = typeList[0].value;
|
|
1319
|
+
exportParams.type = typeList.length ? typeList[0].value : '';
|
|
1320
1320
|
}
|
|
1321
1321
|
if (!exportParams.widthMode) {
|
|
1322
1322
|
exportParams.widthMode = '';
|
|
@@ -1458,7 +1458,13 @@ export default {
|
|
|
1458
1458
|
}
|
|
1459
1459
|
let isCustomCol = false;
|
|
1460
1460
|
let customCols = [];
|
|
1461
|
-
|
|
1461
|
+
const _columns = opts._columns;
|
|
1462
|
+
if (_columns) {
|
|
1463
|
+
// 内部导出使用 _columns -> _children 为自定义子集
|
|
1464
|
+
isCustomCol = true;
|
|
1465
|
+
customCols = XEUtils.searchTree(_columns, () => true, { children: '_children', mapChildren: 'childNodes', original: true });
|
|
1466
|
+
}
|
|
1467
|
+
else if (columns) {
|
|
1462
1468
|
isCustomCol = true;
|
|
1463
1469
|
customCols = XEUtils.searchTree(columns, () => true, { children: 'children', mapChildren: 'childNodes', original: true });
|
|
1464
1470
|
}
|
|
@@ -5,6 +5,97 @@ import { toCssUnit, triggerEvent, getDomNode } from '../../../ui/src/dom';
|
|
|
5
5
|
import { isEnableConf } from '../../../ui/src/utils';
|
|
6
6
|
const { renderer } = VxeUI;
|
|
7
7
|
const sourceType = 'table';
|
|
8
|
+
function updatePopupStyle($xeTable) {
|
|
9
|
+
const $xeGrid = $xeTable.$xeGrid;
|
|
10
|
+
const $xeGantt = $xeTable.$xeGantt;
|
|
11
|
+
const reactData = $xeTable;
|
|
12
|
+
const internalData = $xeTable;
|
|
13
|
+
const $xeGGWrapper = $xeGrid || $xeGantt;
|
|
14
|
+
const { filterStore } = reactData;
|
|
15
|
+
const { elemStore } = internalData;
|
|
16
|
+
const { column, targetEl } = filterStore;
|
|
17
|
+
if (!column || !targetEl) {
|
|
18
|
+
return $xeTable.$nextTick();
|
|
19
|
+
}
|
|
20
|
+
const tableEl = $xeTable.$refs.refElem;
|
|
21
|
+
const { scrollTop, scrollLeft, visibleHeight, visibleWidth } = getDomNode();
|
|
22
|
+
const filterOpts = $xeTable.computeFilterOpts;
|
|
23
|
+
const { maxHeight: customMaxHeight, transfer, zIndex } = filterOpts;
|
|
24
|
+
const currEl = targetEl;
|
|
25
|
+
const tableRect = tableEl.getBoundingClientRect();
|
|
26
|
+
const filterRender = column ? column.filterRender : null;
|
|
27
|
+
const compConf = filterRender && isEnableConf(filterRender) ? renderer.get(filterRender.name) : null;
|
|
28
|
+
const headerScrollElem = getRefElem(elemStore['main-header-scroll']);
|
|
29
|
+
if (!headerScrollElem) {
|
|
30
|
+
return $xeTable.$nextTick();
|
|
31
|
+
}
|
|
32
|
+
const tableFilter = $xeTable.$refs.refTableFilter;
|
|
33
|
+
const filterWrapperElem = tableFilter ? tableFilter.$el : null;
|
|
34
|
+
if (!filterWrapperElem) {
|
|
35
|
+
return $xeTable.$nextTick();
|
|
36
|
+
}
|
|
37
|
+
const btnRect = currEl.getBoundingClientRect();
|
|
38
|
+
const filterHeadElem = filterWrapperElem.querySelector('.vxe-table--filter-header');
|
|
39
|
+
const filterFootElem = filterWrapperElem.querySelector('.vxe-table--filter-footer');
|
|
40
|
+
const filterWidth = filterWrapperElem.offsetWidth;
|
|
41
|
+
const centerWidth = currEl ? filterWidth / 2 : ((filterWidth - column.renderWidth) / 2);
|
|
42
|
+
let left = 0;
|
|
43
|
+
let top = 0;
|
|
44
|
+
let maxHeight = 0;
|
|
45
|
+
/**
|
|
46
|
+
* 是否显示筛选按钮图标
|
|
47
|
+
* 如果不存在图标,则相对单元格居中显示
|
|
48
|
+
*/
|
|
49
|
+
if (transfer) {
|
|
50
|
+
left = btnRect.left - centerWidth + scrollLeft;
|
|
51
|
+
top = btnRect.top + currEl.clientHeight + scrollTop;
|
|
52
|
+
maxHeight = Math.min(Math.max(tableRect.height, Math.floor(visibleHeight / 2)), Math.max(80, visibleHeight - top - (filterHeadElem ? filterHeadElem.clientHeight : 0) - (filterFootElem ? filterFootElem.clientHeight : 0) - 28));
|
|
53
|
+
if (left < 16) {
|
|
54
|
+
left = 16;
|
|
55
|
+
}
|
|
56
|
+
else if (left > (visibleWidth - filterWidth - 16)) {
|
|
57
|
+
left = visibleWidth - filterWidth - 16;
|
|
58
|
+
}
|
|
59
|
+
}
|
|
60
|
+
else {
|
|
61
|
+
left = btnRect.left - tableRect.left - centerWidth;
|
|
62
|
+
top = btnRect.top - tableRect.top + currEl.clientHeight;
|
|
63
|
+
maxHeight = Math.max(40, tableEl.clientHeight - top - (filterHeadElem ? filterHeadElem.clientHeight : 0) - (filterFootElem ? filterFootElem.clientHeight : 0) - 14);
|
|
64
|
+
if (left < 1) {
|
|
65
|
+
left = 1;
|
|
66
|
+
}
|
|
67
|
+
else if (left > (tableEl.clientWidth - filterWidth - 1)) {
|
|
68
|
+
left = tableEl.clientWidth - filterWidth - 1;
|
|
69
|
+
}
|
|
70
|
+
if ($xeGGWrapper) {
|
|
71
|
+
const wrapperEl = $xeGGWrapper.$refs.refElem;
|
|
72
|
+
if (wrapperEl) {
|
|
73
|
+
const wrapperRect = wrapperEl.getBoundingClientRect();
|
|
74
|
+
top += tableRect.top - wrapperRect.top;
|
|
75
|
+
}
|
|
76
|
+
}
|
|
77
|
+
}
|
|
78
|
+
const fStys = {
|
|
79
|
+
top: toCssUnit(top),
|
|
80
|
+
left: toCssUnit(left)
|
|
81
|
+
};
|
|
82
|
+
if (zIndex) {
|
|
83
|
+
fStys.zIndex = zIndex;
|
|
84
|
+
}
|
|
85
|
+
filterStore.style = fStys;
|
|
86
|
+
// 筛选面板是自适应表格高度
|
|
87
|
+
if (compConf ? !compConf.tableFilterAutoHeight : false) {
|
|
88
|
+
maxHeight = 0;
|
|
89
|
+
}
|
|
90
|
+
else {
|
|
91
|
+
if (customMaxHeight) {
|
|
92
|
+
maxHeight = customMaxHeight > maxHeight ? maxHeight : customMaxHeight;
|
|
93
|
+
}
|
|
94
|
+
}
|
|
95
|
+
// 判断面板不能大于表格高度
|
|
96
|
+
filterStore.maxHeight = maxHeight;
|
|
97
|
+
return $xeTable.$nextTick();
|
|
98
|
+
}
|
|
8
99
|
export default {
|
|
9
100
|
methods: {
|
|
10
101
|
/**
|
|
@@ -93,96 +184,22 @@ export default {
|
|
|
93
184
|
},
|
|
94
185
|
handleOpenFilterColumn(evnt, btnEl, colEl, column, params) {
|
|
95
186
|
const $xeTable = this;
|
|
96
|
-
const $xeGrid = $xeTable.$xeGrid;
|
|
97
|
-
const $xeGantt = $xeTable.$xeGantt;
|
|
98
187
|
const reactData = $xeTable;
|
|
99
188
|
const internalData = $xeTable;
|
|
100
|
-
const $xeGGWrapper = $xeGrid || $xeGantt;
|
|
101
189
|
const { initStore, filterStore } = reactData;
|
|
102
|
-
const { elemStore } = internalData;
|
|
103
190
|
if (filterStore.column === column && filterStore.visible) {
|
|
104
191
|
filterStore.visible = false;
|
|
105
192
|
}
|
|
106
193
|
else {
|
|
107
|
-
const tableEl = $xeTable.$refs.refElem;
|
|
108
|
-
const { scrollTop, scrollLeft, visibleHeight, visibleWidth } = getDomNode();
|
|
109
|
-
const filterOpts = $xeTable.computeFilterOpts;
|
|
110
|
-
const { maxHeight: customMaxHeight, transfer, zIndex } = filterOpts;
|
|
111
194
|
const currEl = btnEl || colEl;
|
|
112
|
-
const tableRect = tableEl.getBoundingClientRect();
|
|
113
|
-
const filterRender = column ? column.filterRender : null;
|
|
114
|
-
const compConf = filterRender && isEnableConf(filterRender) ? renderer.get(filterRender.name) : null;
|
|
115
195
|
$xeTable.handleFilterOptions(column);
|
|
116
196
|
internalData._currFilterParams = params;
|
|
197
|
+
filterStore.targetEl = currEl;
|
|
117
198
|
filterStore.style = null;
|
|
118
199
|
filterStore.visible = true;
|
|
119
200
|
initStore.filter = true;
|
|
120
201
|
$xeTable.$nextTick(() => {
|
|
121
|
-
|
|
122
|
-
if (!headerScrollElem) {
|
|
123
|
-
return;
|
|
124
|
-
}
|
|
125
|
-
const tableFilter = $xeTable.$refs.refTableFilter;
|
|
126
|
-
const filterWrapperElem = tableFilter ? tableFilter.$el : null;
|
|
127
|
-
if (!filterWrapperElem) {
|
|
128
|
-
return;
|
|
129
|
-
}
|
|
130
|
-
const btnRect = currEl.getBoundingClientRect();
|
|
131
|
-
const filterHeadElem = filterWrapperElem.querySelector('.vxe-table--filter-header');
|
|
132
|
-
const filterFootElem = filterWrapperElem.querySelector('.vxe-table--filter-footer');
|
|
133
|
-
const filterWidth = filterWrapperElem.offsetWidth;
|
|
134
|
-
const centerWidth = filterWidth / 2;
|
|
135
|
-
let left = 0;
|
|
136
|
-
let top = 0;
|
|
137
|
-
let maxHeight = 0;
|
|
138
|
-
if (transfer) {
|
|
139
|
-
left = btnRect.left - centerWidth + scrollLeft;
|
|
140
|
-
top = btnRect.top + currEl.clientHeight + scrollTop;
|
|
141
|
-
maxHeight = Math.min(Math.max(tableRect.height, Math.floor(visibleHeight / 2)), Math.max(80, visibleHeight - top - (filterHeadElem ? filterHeadElem.clientHeight : 0) - (filterFootElem ? filterFootElem.clientHeight : 0) - 28));
|
|
142
|
-
if (left < 16) {
|
|
143
|
-
left = 16;
|
|
144
|
-
}
|
|
145
|
-
else if (left > (visibleWidth - filterWidth - 16)) {
|
|
146
|
-
left = visibleWidth - filterWidth - 16;
|
|
147
|
-
}
|
|
148
|
-
}
|
|
149
|
-
else {
|
|
150
|
-
left = btnRect.left - tableRect.left - centerWidth;
|
|
151
|
-
top = btnRect.top - tableRect.top + currEl.clientHeight;
|
|
152
|
-
maxHeight = Math.max(40, tableEl.clientHeight - top - (filterHeadElem ? filterHeadElem.clientHeight : 0) - (filterFootElem ? filterFootElem.clientHeight : 0) - 14);
|
|
153
|
-
if (left < 1) {
|
|
154
|
-
left = 1;
|
|
155
|
-
}
|
|
156
|
-
else if (left > (tableEl.clientWidth - filterWidth - 1)) {
|
|
157
|
-
left = tableEl.clientWidth - filterWidth - 1;
|
|
158
|
-
}
|
|
159
|
-
if ($xeGGWrapper) {
|
|
160
|
-
const wrapperEl = $xeGGWrapper.$refs.refElem;
|
|
161
|
-
if (wrapperEl) {
|
|
162
|
-
const wrapperRect = wrapperEl.getBoundingClientRect();
|
|
163
|
-
top += tableRect.top - wrapperRect.top;
|
|
164
|
-
}
|
|
165
|
-
}
|
|
166
|
-
}
|
|
167
|
-
const fStys = {
|
|
168
|
-
top: toCssUnit(top),
|
|
169
|
-
left: toCssUnit(left)
|
|
170
|
-
};
|
|
171
|
-
if (zIndex) {
|
|
172
|
-
fStys.zIndex = zIndex;
|
|
173
|
-
}
|
|
174
|
-
filterStore.style = fStys;
|
|
175
|
-
// 筛选面板是自适应表格高度
|
|
176
|
-
if (compConf ? !compConf.tableFilterAutoHeight : false) {
|
|
177
|
-
maxHeight = 0;
|
|
178
|
-
}
|
|
179
|
-
else {
|
|
180
|
-
if (customMaxHeight) {
|
|
181
|
-
maxHeight = customMaxHeight > maxHeight ? maxHeight : customMaxHeight;
|
|
182
|
-
}
|
|
183
|
-
}
|
|
184
|
-
// 判断面板不能大于表格高度
|
|
185
|
-
filterStore.maxHeight = maxHeight;
|
|
202
|
+
updatePopupStyle($xeTable);
|
|
186
203
|
});
|
|
187
204
|
}
|
|
188
205
|
$xeTable.dispatchEvent('filter-visible', { column, field: column.field, property: column.field, filterList: $xeTable.getCheckedFilters(), visible: filterStore.visible }, evnt);
|
|
@@ -443,6 +460,15 @@ export default {
|
|
|
443
460
|
}
|
|
444
461
|
}
|
|
445
462
|
},
|
|
463
|
+
handleFilterStyle() {
|
|
464
|
+
const $xeTable = this;
|
|
465
|
+
const reactData = $xeTable;
|
|
466
|
+
const { filterStore } = reactData;
|
|
467
|
+
if (!filterStore.visible) {
|
|
468
|
+
return $xeTable.$nextTick();
|
|
469
|
+
}
|
|
470
|
+
return updatePopupStyle($xeTable);
|
|
471
|
+
},
|
|
446
472
|
/**
|
|
447
473
|
* 清空指定列的筛选条件
|
|
448
474
|
* 如果为空则清空所有列的筛选条件
|
package/es/table/src/methods.js
CHANGED
|
@@ -7618,6 +7618,12 @@ const tableMethods = {
|
|
|
7618
7618
|
},
|
|
7619
7619
|
handleGlobalScrollEvent(evnt) {
|
|
7620
7620
|
const $xeTable = this;
|
|
7621
|
+
const reactData = $xeTable;
|
|
7622
|
+
const { filterStore } = reactData;
|
|
7623
|
+
const filterOpts = $xeTable.computeFilterOpts;
|
|
7624
|
+
if (filterStore.visible && filterOpts.transfer) {
|
|
7625
|
+
$xeTable.handleFilterStyle();
|
|
7626
|
+
}
|
|
7621
7627
|
reUpdateCustomStyleEvent($xeTable, evnt);
|
|
7622
7628
|
},
|
|
7623
7629
|
/**
|
|
@@ -7635,10 +7641,14 @@ const tableMethods = {
|
|
|
7635
7641
|
*/
|
|
7636
7642
|
keydownEvent(evnt) {
|
|
7637
7643
|
const $xeTable = this;
|
|
7638
|
-
const
|
|
7644
|
+
const props = $xeTable;
|
|
7645
|
+
const reactData = $xeTable;
|
|
7646
|
+
const { mouseConfig, keyboardConfig } = props;
|
|
7647
|
+
const { filterStore, ctxMenuStore, editStore } = reactData;
|
|
7648
|
+
const mouseOpts = $xeTable.computeMouseOpts;
|
|
7649
|
+
const keyboardOpts = $xeTable.computeKeyboardOpts;
|
|
7639
7650
|
const { actived } = editStore;
|
|
7640
|
-
const
|
|
7641
|
-
const isEsc = keyCode === 27;
|
|
7651
|
+
const isEsc = globalEvents.hasKey(evnt, GLOBAL_EVENT_KEYS.ESCAPE);
|
|
7642
7652
|
if (isEsc) {
|
|
7643
7653
|
this.preventEvent(evnt, 'event.keydown', null, () => {
|
|
7644
7654
|
$xeTable.dispatchEvent('keydown-start', {}, evnt);
|
package/es/table/src/util.js
CHANGED
package/es/ui/index.js
CHANGED
package/es/ui/src/dom.js
CHANGED
|
@@ -15,7 +15,7 @@ export function getTpImg() {
|
|
|
15
15
|
return tpImgEl;
|
|
16
16
|
}
|
|
17
17
|
export function getPropClass(property, params) {
|
|
18
|
-
return property ? XEUtils.isFunction(property) ? property(params) : property : '';
|
|
18
|
+
return property ? (XEUtils.isFunction(property) ? property(params) : property) || '' : '';
|
|
19
19
|
}
|
|
20
20
|
function getClsRE(cls) {
|
|
21
21
|
if (!reClsMap[cls]) {
|
package/es/ui/src/log.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { VxeUI } from '@vxe-ui/core';
|
|
2
2
|
const { log } = VxeUI;
|
|
3
|
-
const tableVersion = `table v${"3.23.
|
|
3
|
+
const tableVersion = `table v${"3.23.3"}`;
|
|
4
4
|
export function createComponentLog(name) {
|
|
5
5
|
const uiVersion = VxeUI.uiVersion ? `ui v${VxeUI.uiVersion}` : '';
|
|
6
6
|
const ganttVersion = VxeUI.ganttVersion ? `gantt v${VxeUI.ganttVersion}` : '';
|