vxe-table 4.10.6-beta.9 → 4.10.7
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/grid/src/grid.js +1 -1
- package/es/index.css +1 -1
- package/es/index.min.css +1 -1
- package/es/locale/lang/ar-EG.js +2 -1
- package/es/locale/lang/de-DE.js +2 -1
- package/es/locale/lang/en-US.js +4 -3
- package/es/locale/lang/es-ES.js +2 -1
- package/es/locale/lang/fr-FR.js +2 -1
- package/es/locale/lang/hu-HU.js +2 -1
- package/es/locale/lang/hy-AM.js +2 -1
- package/es/locale/lang/it-IT.js +2 -1
- package/es/locale/lang/ja-JP.js +2 -1
- package/es/locale/lang/ko-KR.js +2 -1
- package/es/locale/lang/nb-NO.js +2 -1
- package/es/locale/lang/pt-BR.js +2 -1
- package/es/locale/lang/ru-RU.js +4 -3
- package/es/locale/lang/th-TH.js +2 -1
- package/es/locale/lang/ug-CN.js +2 -1
- package/es/locale/lang/uk-UA.js +518 -517
- package/es/locale/lang/vi-VN.js +2 -1
- package/es/locale/lang/zh-CHT.js +2 -1
- package/es/locale/lang/zh-CN.js +2 -1
- package/es/style.css +1 -1
- package/es/style.min.css +1 -1
- package/es/table/module/edit/hook.js +7 -7
- package/es/table/module/export/hook.js +97 -62
- package/es/table/module/keyboard/hook.js +63 -27
- package/es/table/src/body.js +107 -85
- package/es/table/src/cell.js +41 -55
- package/es/table/src/column.js +13 -1
- package/es/table/src/columnInfo.js +3 -0
- package/es/table/src/emits.js +2 -0
- package/es/table/src/footer.js +45 -7
- package/es/table/src/header.js +67 -165
- package/es/table/src/props.js +14 -4
- package/es/table/src/table.js +858 -398
- package/es/table/src/util.js +77 -62
- package/es/table/style.css +246 -191
- package/es/table/style.min.css +1 -1
- package/es/ui/index.js +20 -7
- package/es/ui/src/log.js +1 -1
- package/es/vxe-table/style.css +246 -191
- package/es/vxe-table/style.min.css +1 -1
- package/lib/grid/src/grid.js +1 -1
- package/lib/grid/src/grid.min.js +1 -1
- package/lib/index.css +1 -1
- package/lib/index.min.css +1 -1
- package/lib/index.umd.js +1479 -875
- package/lib/index.umd.min.js +1 -1
- package/lib/locale/lang/ar-EG.js +2 -1
- package/lib/locale/lang/ar-EG.min.js +1 -1
- package/lib/locale/lang/de-DE.js +2 -1
- package/lib/locale/lang/de-DE.min.js +1 -1
- package/lib/locale/lang/en-US.js +4 -3
- package/lib/locale/lang/en-US.min.js +1 -1
- package/lib/locale/lang/en-US.umd.js +4 -3
- package/lib/locale/lang/es-ES.js +2 -1
- package/lib/locale/lang/es-ES.min.js +1 -1
- package/lib/locale/lang/es-ES.umd.js +2 -1
- package/lib/locale/lang/fr-FR.js +2 -1
- package/lib/locale/lang/fr-FR.min.js +1 -1
- package/lib/locale/lang/hu-HU.js +2 -1
- package/lib/locale/lang/hu-HU.min.js +1 -1
- package/lib/locale/lang/hu-HU.umd.js +2 -1
- package/lib/locale/lang/hy-AM.js +2 -1
- package/lib/locale/lang/hy-AM.min.js +1 -1
- package/lib/locale/lang/it-IT.js +2 -1
- package/lib/locale/lang/it-IT.min.js +1 -1
- package/lib/locale/lang/ja-JP.js +2 -1
- package/lib/locale/lang/ja-JP.min.js +1 -1
- package/lib/locale/lang/ja-JP.umd.js +2 -1
- package/lib/locale/lang/ko-KR.js +2 -1
- package/lib/locale/lang/ko-KR.min.js +1 -1
- package/lib/locale/lang/ko-KR.umd.js +2 -1
- package/lib/locale/lang/nb-NO.js +2 -1
- package/lib/locale/lang/nb-NO.min.js +1 -1
- package/lib/locale/lang/pt-BR.js +2 -1
- package/lib/locale/lang/pt-BR.min.js +1 -1
- package/lib/locale/lang/pt-BR.umd.js +2 -1
- package/lib/locale/lang/ru-RU.js +4 -3
- package/lib/locale/lang/ru-RU.min.js +1 -1
- package/lib/locale/lang/ru-RU.umd.js +4 -3
- package/lib/locale/lang/th-TH.js +2 -1
- package/lib/locale/lang/th-TH.min.js +1 -1
- package/lib/locale/lang/ug-CN.js +2 -1
- package/lib/locale/lang/ug-CN.min.js +1 -1
- package/lib/locale/lang/uk-UA.js +518 -517
- package/lib/locale/lang/uk-UA.min.js +1 -1
- package/lib/locale/lang/uk-UA.umd.js +518 -517
- package/lib/locale/lang/vi-VN.js +2 -1
- package/lib/locale/lang/vi-VN.min.js +1 -1
- package/lib/locale/lang/zh-CHT.js +2 -1
- package/lib/locale/lang/zh-CHT.min.js +1 -1
- package/lib/locale/lang/zh-CN.js +2 -1
- package/lib/locale/lang/zh-CN.min.js +1 -1
- package/lib/locale/lang/zh-CN.umd.js +2 -1
- package/lib/style.css +1 -1
- package/lib/style.min.css +1 -1
- package/lib/table/module/edit/hook.js +7 -2
- package/lib/table/module/edit/hook.min.js +1 -1
- package/lib/table/module/export/hook.js +97 -57
- package/lib/table/module/export/hook.min.js +1 -1
- package/lib/table/module/keyboard/hook.js +71 -28
- package/lib/table/module/keyboard/hook.min.js +1 -1
- package/lib/table/src/body.js +111 -81
- package/lib/table/src/body.min.js +1 -1
- package/lib/table/src/cell.js +32 -42
- package/lib/table/src/cell.min.js +1 -1
- package/lib/table/src/column.js +13 -1
- package/lib/table/src/column.min.js +1 -1
- package/lib/table/src/columnInfo.js +3 -0
- package/lib/table/src/columnInfo.min.js +1 -1
- package/lib/table/src/emits.js +1 -1
- package/lib/table/src/emits.min.js +1 -1
- package/lib/table/src/footer.js +45 -5
- package/lib/table/src/footer.min.js +1 -1
- package/lib/table/src/header.js +51 -178
- package/lib/table/src/header.min.js +1 -1
- package/lib/table/src/props.js +14 -4
- package/lib/table/src/props.min.js +1 -1
- package/lib/table/src/table.js +911 -384
- package/lib/table/src/table.min.js +1 -1
- package/lib/table/src/util.js +100 -82
- package/lib/table/src/util.min.js +1 -1
- package/lib/table/style/style.css +246 -191
- package/lib/table/style/style.min.css +1 -1
- package/lib/ui/index.js +20 -7
- package/lib/ui/index.min.js +1 -1
- package/lib/ui/src/log.js +1 -1
- package/lib/ui/src/log.min.js +1 -1
- package/lib/vxe-table/style/style.css +246 -191
- package/lib/vxe-table/style/style.min.css +1 -1
- package/package.json +2 -2
- package/packages/grid/src/grid.ts +1 -1
- package/packages/locale/lang/ar-EG.ts +2 -1
- package/packages/locale/lang/de-DE.ts +2 -1
- package/packages/locale/lang/en-US.ts +4 -3
- package/packages/locale/lang/es-ES.ts +2 -1
- package/packages/locale/lang/fr-FR.ts +2 -1
- package/packages/locale/lang/hu-HU.ts +2 -1
- package/packages/locale/lang/hy-AM.ts +2 -1
- package/packages/locale/lang/it-IT.ts +2 -1
- package/packages/locale/lang/ja-JP.ts +2 -1
- package/packages/locale/lang/ko-KR.ts +2 -1
- package/packages/locale/lang/nb-NO.ts +2 -1
- package/packages/locale/lang/pt-BR.ts +2 -1
- package/packages/locale/lang/ru-RU.ts +4 -3
- package/packages/locale/lang/th-TH.ts +2 -1
- package/packages/locale/lang/ug-CN.ts +2 -1
- package/packages/locale/lang/uk-UA.ts +518 -517
- package/packages/locale/lang/vi-VN.ts +2 -1
- package/packages/locale/lang/zh-CHT.ts +2 -1
- package/packages/locale/lang/zh-CN.ts +2 -1
- package/packages/table/module/edit/hook.ts +7 -7
- package/packages/table/module/export/hook.ts +118 -65
- package/packages/table/module/keyboard/hook.ts +59 -25
- package/packages/table/src/body.ts +126 -95
- package/packages/table/src/cell.ts +41 -63
- package/packages/table/src/column.ts +13 -1
- package/packages/table/src/columnInfo.ts +3 -0
- package/packages/table/src/emits.ts +5 -1
- package/packages/table/src/footer.ts +48 -8
- package/packages/table/src/header.ts +67 -165
- package/packages/table/src/props.ts +14 -5
- package/packages/table/src/table.ts +862 -398
- package/packages/table/src/util.ts +81 -62
- package/packages/ui/index.ts +19 -6
- package/styles/components/table.scss +313 -274
- package/styles/theme/base.scss +4 -6
- package/styles/theme/dark.scss +1 -0
- package/styles/theme/light.scss +1 -0
- package/styles/variable.scss +1 -1
- /package/es/{iconfont.1736854674495.ttf → iconfont.1739008158505.ttf} +0 -0
- /package/es/{iconfont.1736854674495.woff → iconfont.1739008158505.woff} +0 -0
- /package/es/{iconfont.1736854674495.woff2 → iconfont.1739008158505.woff2} +0 -0
- /package/lib/{iconfont.1736854674495.ttf → iconfont.1739008158505.ttf} +0 -0
- /package/lib/{iconfont.1736854674495.woff → iconfont.1739008158505.woff} +0 -0
- /package/lib/{iconfont.1736854674495.woff2 → iconfont.1739008158505.woff2} +0 -0
package/es/table/src/table.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { defineComponent, h, reactive, ref, provide, inject, nextTick, onActivated, onDeactivated, onBeforeUnmount, onUnmounted, watch, computed, onMounted } from 'vue';
|
|
2
2
|
import XEUtils from 'xe-utils';
|
|
3
|
-
import { browse, initTpImg, getTpImg, isPx, isScale, hasClass, addClass, removeClass, getEventTargetNode, getPaddingTopBottomSize, setScrollTop, setScrollLeft } from '../../ui/src/dom';
|
|
3
|
+
import { browse, initTpImg, getTpImg, isPx, isScale, hasClass, addClass, removeClass, getEventTargetNode, getPaddingTopBottomSize, getOffsetPos, setScrollTop, setScrollLeft } from '../../ui/src/dom';
|
|
4
4
|
import { getLastZIndex, nextZIndex, hasChildrenList, getFuncText, isEnableConf, formatText, eqEmptyValue } from '../../ui/src/utils';
|
|
5
5
|
import { VxeUI } from '../../ui';
|
|
6
6
|
import Cell from './cell';
|
|
@@ -32,7 +32,6 @@ export default defineComponent({
|
|
|
32
32
|
const $xeTabs = inject('$xeTabs', null);
|
|
33
33
|
const { computeSize } = useFns.useSize(props);
|
|
34
34
|
const reactData = reactive({
|
|
35
|
-
isCalcColumn: false,
|
|
36
35
|
// 低性能的静态列
|
|
37
36
|
staticColumns: [],
|
|
38
37
|
// 渲染的列分组
|
|
@@ -245,15 +244,17 @@ export default defineComponent({
|
|
|
245
244
|
isFooter: false
|
|
246
245
|
},
|
|
247
246
|
scrollVMLoading: false,
|
|
248
|
-
|
|
247
|
+
calcCellHeightFlag: 0,
|
|
248
|
+
resizeHeightFlag: 0,
|
|
249
249
|
isCustomStatus: false,
|
|
250
250
|
isDragRowMove: false,
|
|
251
251
|
dragRow: null,
|
|
252
252
|
isDragColMove: false,
|
|
253
253
|
dragCol: null,
|
|
254
254
|
dragTipText: '',
|
|
255
|
-
|
|
256
|
-
|
|
255
|
+
isDragResize: false,
|
|
256
|
+
isRowLoading: false,
|
|
257
|
+
isColLoading: false
|
|
257
258
|
});
|
|
258
259
|
const internalData = {
|
|
259
260
|
tZindex: 0,
|
|
@@ -327,10 +328,6 @@ export default defineComponent({
|
|
|
327
328
|
fullDataRowIdData: {},
|
|
328
329
|
fullColumnIdData: {},
|
|
329
330
|
fullColumnFieldData: {},
|
|
330
|
-
// 列选取状态
|
|
331
|
-
columnStatusMaps: {},
|
|
332
|
-
// 行选取状态
|
|
333
|
-
rowStatusMaps: {},
|
|
334
331
|
// prevDragRow: null,
|
|
335
332
|
inited: false,
|
|
336
333
|
tooltipTimeout: null,
|
|
@@ -358,8 +355,8 @@ export default defineComponent({
|
|
|
358
355
|
const refTableRightFooter = ref();
|
|
359
356
|
const refLeftContainer = ref();
|
|
360
357
|
const refRightContainer = ref();
|
|
361
|
-
const
|
|
362
|
-
const
|
|
358
|
+
const refColResizeBar = ref();
|
|
359
|
+
const refRowResizeBar = ref();
|
|
363
360
|
const refEmptyPlaceholder = ref();
|
|
364
361
|
const refDragTipElem = ref();
|
|
365
362
|
const refDragRowLineElem = ref();
|
|
@@ -449,7 +446,7 @@ export default defineComponent({
|
|
|
449
446
|
const computeDefaultRowHeight = computed(() => {
|
|
450
447
|
const vSize = computeSize.value;
|
|
451
448
|
const rowHeightMaps = computeRowHeightMaps.value;
|
|
452
|
-
return rowHeightMaps[vSize || 'default'];
|
|
449
|
+
return rowHeightMaps[vSize || 'default'] || 18;
|
|
453
450
|
});
|
|
454
451
|
const computeColumnOpts = computed(() => {
|
|
455
452
|
return Object.assign({}, getConfig().table.columnConfig, props.columnConfig);
|
|
@@ -457,6 +454,12 @@ export default defineComponent({
|
|
|
457
454
|
const computeCellOpts = computed(() => {
|
|
458
455
|
return Object.assign({}, getConfig().table.cellConfig, props.cellConfig);
|
|
459
456
|
});
|
|
457
|
+
const computeHeaderCellOpts = computed(() => {
|
|
458
|
+
return Object.assign({}, getConfig().table.headerCellConfig, props.headerCellConfig);
|
|
459
|
+
});
|
|
460
|
+
const computeFooterCellOpts = computed(() => {
|
|
461
|
+
return Object.assign({}, getConfig().table.footerCellConfig, props.footerCellConfig);
|
|
462
|
+
});
|
|
460
463
|
const computeRowOpts = computed(() => {
|
|
461
464
|
return Object.assign({}, getConfig().table.rowConfig, props.rowConfig);
|
|
462
465
|
});
|
|
@@ -484,6 +487,15 @@ export default defineComponent({
|
|
|
484
487
|
const computeTooltipOpts = computed(() => {
|
|
485
488
|
return Object.assign({}, getConfig().tooltip, getConfig().table.tooltipConfig, props.tooltipConfig);
|
|
486
489
|
});
|
|
490
|
+
const computeTableTipConfig = computed(() => {
|
|
491
|
+
const { tooltipStore } = reactData;
|
|
492
|
+
const tooltipOpts = computeTooltipOpts.value;
|
|
493
|
+
return Object.assign({}, tooltipOpts, tooltipStore.currOpts);
|
|
494
|
+
});
|
|
495
|
+
const computeValidTipConfig = computed(() => {
|
|
496
|
+
const tooltipOpts = computeTooltipOpts.value;
|
|
497
|
+
return Object.assign({}, tooltipOpts);
|
|
498
|
+
});
|
|
487
499
|
const computeEditOpts = computed(() => {
|
|
488
500
|
return Object.assign({}, getConfig().table.editConfig, props.editConfig);
|
|
489
501
|
});
|
|
@@ -674,8 +686,8 @@ export default defineComponent({
|
|
|
674
686
|
refTableRightFooter,
|
|
675
687
|
refLeftContainer,
|
|
676
688
|
refRightContainer,
|
|
677
|
-
|
|
678
|
-
|
|
689
|
+
refColResizeBar,
|
|
690
|
+
refRowResizeBar,
|
|
679
691
|
refScrollXVirtualElem,
|
|
680
692
|
refScrollYVirtualElem,
|
|
681
693
|
refScrollXHandleElem,
|
|
@@ -697,6 +709,8 @@ export default defineComponent({
|
|
|
697
709
|
computeScrollYThreshold,
|
|
698
710
|
computeDefaultRowHeight,
|
|
699
711
|
computeCellOpts,
|
|
712
|
+
computeHeaderCellOpts,
|
|
713
|
+
computeFooterCellOpts,
|
|
700
714
|
computeRowOpts,
|
|
701
715
|
computeRowDragOpts,
|
|
702
716
|
computeColumnDragOpts,
|
|
@@ -827,13 +841,13 @@ export default defineComponent({
|
|
|
827
841
|
return { toVisibleIndex: 0, visibleSize: 6 };
|
|
828
842
|
};
|
|
829
843
|
const computeRowHeight = () => {
|
|
830
|
-
const {
|
|
844
|
+
const { isAllOverflow } = reactData;
|
|
831
845
|
const tableHeader = refTableHeader.value;
|
|
832
846
|
const tableBody = refTableBody.value;
|
|
833
847
|
const tableBodyElem = tableBody ? tableBody.$el : null;
|
|
834
848
|
const defaultRowHeight = computeDefaultRowHeight.value;
|
|
835
849
|
let rowHeight = 0;
|
|
836
|
-
if (
|
|
850
|
+
if (isAllOverflow) {
|
|
837
851
|
if (tableBodyElem) {
|
|
838
852
|
const tableHeaderElem = tableHeader ? tableHeader.$el : null;
|
|
839
853
|
let firstTrElem;
|
|
@@ -856,9 +870,11 @@ export default defineComponent({
|
|
|
856
870
|
return Math.max(18, rowHeight);
|
|
857
871
|
};
|
|
858
872
|
const handleVirtualYVisible = (currScrollTop) => {
|
|
859
|
-
const {
|
|
860
|
-
const {
|
|
861
|
-
const
|
|
873
|
+
const { isAllOverflow } = reactData;
|
|
874
|
+
const { elemStore, isResizeCellHeight, afterFullData, fullAllDataRowIdData } = internalData;
|
|
875
|
+
const rowOpts = computeRowOpts.value;
|
|
876
|
+
const cellOpts = computeCellOpts.value;
|
|
877
|
+
const defaultRowHeight = computeDefaultRowHeight.value;
|
|
862
878
|
const bodyScrollElem = getRefElem(elemStore['main-body-scroll']);
|
|
863
879
|
if (bodyScrollElem) {
|
|
864
880
|
const clientHeight = bodyScrollElem.clientHeight;
|
|
@@ -867,16 +883,17 @@ export default defineComponent({
|
|
|
867
883
|
let toVisibleIndex = -1;
|
|
868
884
|
let offsetTop = 0;
|
|
869
885
|
let visibleSize = 0;
|
|
870
|
-
|
|
871
|
-
|
|
872
|
-
|
|
886
|
+
const isCustomCellHeight = isResizeCellHeight || cellOpts.height || rowOpts.height;
|
|
887
|
+
if (!isCustomCellHeight && isAllOverflow) {
|
|
888
|
+
toVisibleIndex = Math.floor(scrollTop / defaultRowHeight);
|
|
889
|
+
visibleSize = Math.ceil(clientHeight / defaultRowHeight) + 1;
|
|
873
890
|
}
|
|
874
891
|
else {
|
|
875
892
|
for (let rIndex = 0, rLen = afterFullData.length; rIndex < rLen; rIndex++) {
|
|
876
893
|
const row = afterFullData[rIndex];
|
|
877
894
|
const rowid = getRowid($xeTable, row);
|
|
878
|
-
const rowRest = fullAllDataRowIdData[rowid];
|
|
879
|
-
offsetTop += rowRest
|
|
895
|
+
const rowRest = fullAllDataRowIdData[rowid] || {};
|
|
896
|
+
offsetTop += rowRest.resizeHeight || cellOpts.height || rowOpts.height || rowRest.height || defaultRowHeight;
|
|
880
897
|
if (toVisibleIndex === -1 && scrollTop < offsetTop) {
|
|
881
898
|
toVisibleIndex = rIndex;
|
|
882
899
|
}
|
|
@@ -1208,55 +1225,38 @@ export default defineComponent({
|
|
|
1208
1225
|
internalData.customMaxHeight = calcTableHeight('maxHeight');
|
|
1209
1226
|
};
|
|
1210
1227
|
const calcColumnAutoWidth = (column, wrapperEl) => {
|
|
1211
|
-
const
|
|
1212
|
-
|
|
1213
|
-
|
|
1214
|
-
if (firstCellEl) {
|
|
1215
|
-
const cellStyle = getComputedStyle(firstCellEl);
|
|
1216
|
-
|
|
1217
|
-
}
|
|
1218
|
-
let colWidth = column.renderAutoWidth -
|
|
1219
|
-
|
|
1220
|
-
const
|
|
1221
|
-
|
|
1222
|
-
|
|
1223
|
-
|
|
1224
|
-
XEUtils.arrayEach(cellEl.children, (btnEl) => {
|
|
1225
|
-
titleWidth += btnEl.offsetWidth + 1;
|
|
1226
|
-
});
|
|
1227
|
-
}
|
|
1228
|
-
else {
|
|
1229
|
-
const labelEl = cellEl.firstElementChild;
|
|
1230
|
-
if (labelEl) {
|
|
1231
|
-
titleWidth = labelEl.offsetWidth;
|
|
1232
|
-
}
|
|
1233
|
-
}
|
|
1234
|
-
if (titleWidth) {
|
|
1235
|
-
colWidth = Math.max(colWidth, Math.ceil(titleWidth) + 4);
|
|
1236
|
-
}
|
|
1237
|
-
});
|
|
1238
|
-
return colWidth + paddingSize;
|
|
1228
|
+
const cellElemList = wrapperEl.querySelectorAll(`.vxe-cell--wrapper[colid="${column.id}"]`);
|
|
1229
|
+
let leftRightPadding = 0;
|
|
1230
|
+
const firstCellEl = cellElemList[0];
|
|
1231
|
+
if (firstCellEl && firstCellEl.parentElement) {
|
|
1232
|
+
const cellStyle = getComputedStyle(firstCellEl.parentElement);
|
|
1233
|
+
leftRightPadding = Math.ceil(XEUtils.toNumber(cellStyle.paddingLeft) + XEUtils.toNumber(cellStyle.paddingRight));
|
|
1234
|
+
}
|
|
1235
|
+
let colWidth = column.renderAutoWidth - leftRightPadding;
|
|
1236
|
+
for (let i = 0; i < cellElemList.length; i++) {
|
|
1237
|
+
const celEl = cellElemList[i];
|
|
1238
|
+
colWidth = Math.max(colWidth, celEl ? Math.ceil(celEl.scrollWidth) + 4 : 0);
|
|
1239
|
+
}
|
|
1240
|
+
return colWidth + leftRightPadding;
|
|
1239
1241
|
};
|
|
1240
1242
|
const calcCellWidth = () => {
|
|
1241
1243
|
const autoWidthColumnList = computeAutoWidthColumnList.value;
|
|
1242
|
-
|
|
1243
|
-
|
|
1244
|
-
|
|
1245
|
-
|
|
1246
|
-
|
|
1247
|
-
|
|
1248
|
-
|
|
1249
|
-
|
|
1250
|
-
|
|
1251
|
-
|
|
1252
|
-
|
|
1253
|
-
|
|
1254
|
-
|
|
1255
|
-
|
|
1256
|
-
|
|
1257
|
-
|
|
1258
|
-
reactData.isCalcColumn = false;
|
|
1259
|
-
});
|
|
1244
|
+
const { fullColumnIdData } = internalData;
|
|
1245
|
+
const el = refElem.value;
|
|
1246
|
+
if (el) {
|
|
1247
|
+
el.setAttribute('data-calc-col', 'Y');
|
|
1248
|
+
autoWidthColumnList.forEach(column => {
|
|
1249
|
+
const colid = column.id;
|
|
1250
|
+
const colRest = fullColumnIdData[colid];
|
|
1251
|
+
const colWidth = calcColumnAutoWidth(column, el);
|
|
1252
|
+
if (colRest) {
|
|
1253
|
+
colRest.width = Math.max(colWidth, colRest.width);
|
|
1254
|
+
}
|
|
1255
|
+
column.renderAutoWidth = colWidth;
|
|
1256
|
+
});
|
|
1257
|
+
$xeTable.analyColumnWidth();
|
|
1258
|
+
el.removeAttribute('data-calc-col');
|
|
1259
|
+
}
|
|
1260
1260
|
};
|
|
1261
1261
|
/**
|
|
1262
1262
|
* 列宽算法,计算单元格列宽,动态分配可用剩余空间
|
|
@@ -1297,39 +1297,39 @@ export default defineComponent({
|
|
|
1297
1297
|
});
|
|
1298
1298
|
// 最小自适应
|
|
1299
1299
|
autoMinList.forEach((column) => {
|
|
1300
|
-
const
|
|
1301
|
-
tableWidth +=
|
|
1302
|
-
column.renderWidth =
|
|
1300
|
+
const caWidth = Math.max(60, XEUtils.toInteger(column.renderAutoWidth));
|
|
1301
|
+
tableWidth += caWidth;
|
|
1302
|
+
column.renderWidth = caWidth;
|
|
1303
1303
|
});
|
|
1304
1304
|
// 最小百分比
|
|
1305
1305
|
scaleMinList.forEach((column) => {
|
|
1306
|
-
const
|
|
1307
|
-
tableWidth +=
|
|
1308
|
-
column.renderWidth =
|
|
1306
|
+
const smWidth = Math.floor(XEUtils.toInteger(column.minWidth) * meanWidth);
|
|
1307
|
+
tableWidth += smWidth;
|
|
1308
|
+
column.renderWidth = smWidth;
|
|
1309
1309
|
});
|
|
1310
1310
|
// 固定百分比
|
|
1311
1311
|
scaleList.forEach((column) => {
|
|
1312
|
-
const
|
|
1313
|
-
tableWidth +=
|
|
1314
|
-
column.renderWidth =
|
|
1312
|
+
const sfWidth = Math.floor(XEUtils.toInteger(column.width) * meanWidth);
|
|
1313
|
+
tableWidth += sfWidth;
|
|
1314
|
+
column.renderWidth = sfWidth;
|
|
1315
1315
|
});
|
|
1316
1316
|
// 固定宽
|
|
1317
1317
|
pxList.forEach((column) => {
|
|
1318
|
-
const
|
|
1319
|
-
tableWidth +=
|
|
1320
|
-
column.renderWidth =
|
|
1318
|
+
const pWidth = XEUtils.toInteger(column.width);
|
|
1319
|
+
tableWidth += pWidth;
|
|
1320
|
+
column.renderWidth = pWidth;
|
|
1321
1321
|
});
|
|
1322
1322
|
// 自适应宽
|
|
1323
1323
|
autoList.forEach((column) => {
|
|
1324
|
-
const
|
|
1325
|
-
tableWidth +=
|
|
1326
|
-
column.renderWidth =
|
|
1324
|
+
const aWidth = Math.max(60, XEUtils.toInteger(column.renderAutoWidth));
|
|
1325
|
+
tableWidth += aWidth;
|
|
1326
|
+
column.renderWidth = aWidth;
|
|
1327
1327
|
});
|
|
1328
1328
|
// 调整了列宽
|
|
1329
1329
|
resizeList.forEach((column) => {
|
|
1330
|
-
const
|
|
1331
|
-
tableWidth +=
|
|
1332
|
-
column.renderWidth =
|
|
1330
|
+
const reWidth = XEUtils.toInteger(column.resizeWidth);
|
|
1331
|
+
tableWidth += reWidth;
|
|
1332
|
+
column.renderWidth = reWidth;
|
|
1333
1333
|
});
|
|
1334
1334
|
remainWidth -= tableWidth;
|
|
1335
1335
|
meanWidth = remainWidth > 0 ? Math.floor(remainWidth / (scaleMinList.length + pxMinList.length + autoMinList.length + remainList.length)) : 0;
|
|
@@ -1370,7 +1370,7 @@ export default defineComponent({
|
|
|
1370
1370
|
}
|
|
1371
1371
|
const tableHeight = bodyElem.offsetHeight;
|
|
1372
1372
|
const overflowY = yHandleEl.scrollHeight > yHandleEl.clientHeight;
|
|
1373
|
-
reactData.scrollbarWidth =
|
|
1373
|
+
reactData.scrollbarWidth = Math.max(scrollbarOpts.width || 0, yHandleEl.offsetWidth - yHandleEl.clientWidth);
|
|
1374
1374
|
reactData.overflowY = overflowY;
|
|
1375
1375
|
internalData.tableWidth = tableWidth;
|
|
1376
1376
|
internalData.tableHeight = tableHeight;
|
|
@@ -1379,7 +1379,7 @@ export default defineComponent({
|
|
|
1379
1379
|
const headerHeight = headerTableElem ? headerTableElem.clientHeight : 0;
|
|
1380
1380
|
const overflowX = tableWidth > bodyWidth;
|
|
1381
1381
|
const footerHeight = footerTableElem ? footerTableElem.clientHeight : 0;
|
|
1382
|
-
reactData.scrollbarHeight =
|
|
1382
|
+
reactData.scrollbarHeight = Math.max(scrollbarOpts.height || 0, xHandleEl.offsetHeight - xHandleEl.clientHeight);
|
|
1383
1383
|
internalData.headerHeight = headerHeight;
|
|
1384
1384
|
internalData.footerHeight = footerHeight;
|
|
1385
1385
|
reactData.overflowX = overflowX;
|
|
@@ -1389,57 +1389,36 @@ export default defineComponent({
|
|
|
1389
1389
|
$xeTable.checkScrolling();
|
|
1390
1390
|
}
|
|
1391
1391
|
};
|
|
1392
|
-
|
|
1393
|
-
|
|
1394
|
-
|
|
1395
|
-
|
|
1396
|
-
|
|
1397
|
-
|
|
1398
|
-
|
|
1399
|
-
|
|
1400
|
-
|
|
1401
|
-
|
|
1402
|
-
|
|
1403
|
-
|
|
1404
|
-
// }
|
|
1392
|
+
const calcCellAutoHeight = (rowRest, wrapperEl) => {
|
|
1393
|
+
const cellElemList = wrapperEl.querySelectorAll(`.vxe-cell--wrapper[rowid="${rowRest.rowid}"]`);
|
|
1394
|
+
let colHeight = rowRest.height;
|
|
1395
|
+
for (let i = 0; i < cellElemList.length; i++) {
|
|
1396
|
+
const cellElem = cellElemList[i];
|
|
1397
|
+
const tdEl = cellElem.parentElement;
|
|
1398
|
+
const topBottomPadding = Math.ceil(XEUtils.toNumber(tdEl.style.paddingTop) + XEUtils.toNumber(tdEl.style.paddingBottom));
|
|
1399
|
+
const cellHeight = cellElem ? cellElem.clientHeight : 0;
|
|
1400
|
+
colHeight = Math.max(colHeight - topBottomPadding, Math.ceil(cellHeight));
|
|
1401
|
+
}
|
|
1402
|
+
return colHeight;
|
|
1403
|
+
};
|
|
1405
1404
|
const calcCellHeight = () => {
|
|
1406
|
-
const {
|
|
1407
|
-
const { tableData, scrollXLoad } = reactData;
|
|
1405
|
+
const { tableData, isAllOverflow, scrollYLoad, scrollXLoad } = reactData;
|
|
1408
1406
|
const { fullAllDataRowIdData } = internalData;
|
|
1407
|
+
const defaultRowHeight = computeDefaultRowHeight.value;
|
|
1409
1408
|
const el = refElem.value;
|
|
1410
|
-
if (!
|
|
1411
|
-
|
|
1412
|
-
let paddingBottom = 0;
|
|
1413
|
-
let calcPadding = false;
|
|
1409
|
+
if (!isAllOverflow && scrollYLoad && el) {
|
|
1410
|
+
el.setAttribute('data-calc-row', 'Y');
|
|
1414
1411
|
tableData.forEach(row => {
|
|
1415
1412
|
const rowid = getRowid($xeTable, row);
|
|
1416
1413
|
const rowRest = fullAllDataRowIdData[rowid];
|
|
1417
|
-
|
|
1418
|
-
|
|
1419
|
-
|
|
1420
|
-
for (let i = 0; i < cellList.length; i++) {
|
|
1421
|
-
const cellElem = cellList[i];
|
|
1422
|
-
const tdEl = cellElem.parentElement;
|
|
1423
|
-
if (!tdEl || !tdEl.clientWidth) {
|
|
1424
|
-
break;
|
|
1425
|
-
}
|
|
1426
|
-
if (!calcPadding) {
|
|
1427
|
-
paddingTop = XEUtils.toNumber(getComputedStyle(tdEl).paddingTop);
|
|
1428
|
-
paddingBottom = XEUtils.toNumber(getComputedStyle(tdEl).paddingBottom);
|
|
1429
|
-
calcPadding = true;
|
|
1430
|
-
}
|
|
1431
|
-
let cellHeight = paddingTop + paddingBottom;
|
|
1432
|
-
if (cellElem) {
|
|
1433
|
-
cellHeight += cellElem.clientHeight;
|
|
1434
|
-
}
|
|
1435
|
-
height = Math.max(height, cellHeight);
|
|
1436
|
-
}
|
|
1437
|
-
rowRest.height = scrollXLoad ? Math.max(rowRest.height, height) : height;
|
|
1414
|
+
if (rowRest) {
|
|
1415
|
+
const reHeight = calcCellAutoHeight(rowRest, el);
|
|
1416
|
+
rowRest.height = Math.max(defaultRowHeight, scrollXLoad ? Math.max(rowRest.height, reHeight) : reHeight);
|
|
1438
1417
|
}
|
|
1418
|
+
el.removeAttribute('data-calc-row');
|
|
1439
1419
|
});
|
|
1440
|
-
reactData.
|
|
1420
|
+
reactData.calcCellHeightFlag++;
|
|
1441
1421
|
}
|
|
1442
|
-
// updateCellOffset()
|
|
1443
1422
|
};
|
|
1444
1423
|
const getOrderField = (column) => {
|
|
1445
1424
|
const { sortBy, sortType } = column;
|
|
@@ -1475,7 +1454,7 @@ export default defineComponent({
|
|
|
1475
1454
|
rowRest._index = index;
|
|
1476
1455
|
}
|
|
1477
1456
|
else {
|
|
1478
|
-
const rest = { row, rowid, seq, index: -1, $index: -1, _index: index, treeIndex: -1, items: [], parent: null, level: 0, height: 0, oTop: 0 };
|
|
1457
|
+
const rest = { row, rowid, seq, index: -1, $index: -1, _index: index, treeIndex: -1, items: [], parent: null, level: 0, height: 0, resizeHeight: 0, oTop: 0 };
|
|
1479
1458
|
fullAllDataRowIdData[rowid] = rest;
|
|
1480
1459
|
fullDataRowIdData[rowid] = rest;
|
|
1481
1460
|
}
|
|
@@ -1504,7 +1483,7 @@ export default defineComponent({
|
|
|
1504
1483
|
rowRest.treeIndex = index;
|
|
1505
1484
|
}
|
|
1506
1485
|
else {
|
|
1507
|
-
const rest = { row, rowid, seq, index: -1, $index: -1, _index: -1, treeIndex: -1, items: [], parent: null, level: 0, height: 0, oTop: 0 };
|
|
1486
|
+
const rest = { row, rowid, seq, index: -1, $index: -1, _index: -1, treeIndex: -1, items: [], parent: null, level: 0, height: 0, resizeHeight: 0, oTop: 0 };
|
|
1508
1487
|
fullAllDataRowIdData[rowid] = rest;
|
|
1509
1488
|
fullDataRowIdData[rowid] = rest;
|
|
1510
1489
|
}
|
|
@@ -1693,14 +1672,16 @@ export default defineComponent({
|
|
|
1693
1672
|
updateAfterDataIndex();
|
|
1694
1673
|
};
|
|
1695
1674
|
const updateStyle = () => {
|
|
1696
|
-
const { border,
|
|
1697
|
-
const { isGroup, currentRow, tableColumn, scrollXLoad, scrollYLoad, scrollbarWidth, scrollbarHeight, columnStore, editStore, isAllOverflow, expandColumn } = reactData;
|
|
1675
|
+
const { border, showHeaderOverflow: allColumnHeaderOverflow, showFooterOverflow: allColumnFooterOverflow, mouseConfig, spanMethod, footerSpanMethod } = props;
|
|
1676
|
+
const { isGroup, currentRow, tableColumn, scrollXLoad, scrollYLoad, overflowX, scrollbarWidth, overflowY, scrollbarHeight, columnStore, editStore, isAllOverflow, expandColumn } = reactData;
|
|
1698
1677
|
const { visibleColumn, fullColumnIdData, tableHeight, tableWidth, headerHeight, footerHeight, elemStore, customHeight, customMinHeight, customMaxHeight } = internalData;
|
|
1699
1678
|
const el = refElem.value;
|
|
1700
1679
|
if (!el) {
|
|
1701
1680
|
return;
|
|
1702
1681
|
}
|
|
1703
1682
|
const containerList = ['main', 'left', 'right'];
|
|
1683
|
+
const osbWidth = overflowY ? scrollbarWidth : 0;
|
|
1684
|
+
const osbHeight = overflowX ? scrollbarHeight : 0;
|
|
1704
1685
|
const emptyPlaceholderElem = refEmptyPlaceholder.value;
|
|
1705
1686
|
const cellOffsetWidth = computeCellOffsetWidth.value;
|
|
1706
1687
|
const mouseOpts = computeMouseOpts.value;
|
|
@@ -1708,16 +1689,16 @@ export default defineComponent({
|
|
|
1708
1689
|
const bodyTableElem = getRefElem(elemStore['main-body-table']);
|
|
1709
1690
|
if (emptyPlaceholderElem) {
|
|
1710
1691
|
emptyPlaceholderElem.style.top = `${headerHeight}px`;
|
|
1711
|
-
emptyPlaceholderElem.style.height = bodyWrapperElem ? `${bodyWrapperElem.offsetHeight -
|
|
1692
|
+
emptyPlaceholderElem.style.height = bodyWrapperElem ? `${bodyWrapperElem.offsetHeight - osbHeight}px` : '';
|
|
1712
1693
|
}
|
|
1713
1694
|
let bodyHeight = 0;
|
|
1714
1695
|
let bodyMaxHeight = 0;
|
|
1715
|
-
const bodyMinHeight = customMinHeight - headerHeight - footerHeight -
|
|
1696
|
+
const bodyMinHeight = customMinHeight - headerHeight - footerHeight - osbHeight;
|
|
1716
1697
|
if (customMaxHeight) {
|
|
1717
|
-
bodyMaxHeight = Math.max(bodyMinHeight, customMaxHeight - headerHeight - footerHeight -
|
|
1698
|
+
bodyMaxHeight = Math.max(bodyMinHeight, customMaxHeight - headerHeight - footerHeight - osbHeight);
|
|
1718
1699
|
}
|
|
1719
1700
|
if (customHeight) {
|
|
1720
|
-
bodyHeight = customHeight - headerHeight - footerHeight -
|
|
1701
|
+
bodyHeight = customHeight - headerHeight - footerHeight - osbHeight;
|
|
1721
1702
|
}
|
|
1722
1703
|
if (!bodyHeight) {
|
|
1723
1704
|
if (bodyTableElem) {
|
|
@@ -1735,27 +1716,27 @@ export default defineComponent({
|
|
|
1735
1716
|
const scrollbarXToTop = computeScrollbarXToTop.value;
|
|
1736
1717
|
const scrollXVirtualEl = refScrollXVirtualElem.value;
|
|
1737
1718
|
if (scrollXVirtualEl) {
|
|
1738
|
-
scrollXVirtualEl.style.height = `${
|
|
1739
|
-
scrollXVirtualEl.style.visibility =
|
|
1719
|
+
scrollXVirtualEl.style.height = `${osbHeight}px`;
|
|
1720
|
+
scrollXVirtualEl.style.visibility = overflowX ? 'visible' : 'hidden';
|
|
1740
1721
|
}
|
|
1741
1722
|
const xWrapperEl = refScrollXWrapperElem.value;
|
|
1742
1723
|
if (xWrapperEl) {
|
|
1743
|
-
xWrapperEl.style.left = scrollbarXToTop ? `${
|
|
1744
|
-
xWrapperEl.style.width = `${el.clientWidth -
|
|
1724
|
+
xWrapperEl.style.left = scrollbarXToTop ? `${osbWidth}px` : '';
|
|
1725
|
+
xWrapperEl.style.width = `${el.clientWidth - osbWidth}px`;
|
|
1745
1726
|
}
|
|
1746
1727
|
if (xLeftCornerEl) {
|
|
1747
|
-
xLeftCornerEl.style.width = scrollbarXToTop ? `${
|
|
1748
|
-
xLeftCornerEl.style.display = scrollbarXToTop ? (
|
|
1728
|
+
xLeftCornerEl.style.width = scrollbarXToTop ? `${osbWidth}px` : '';
|
|
1729
|
+
xLeftCornerEl.style.display = scrollbarXToTop ? (osbWidth && osbHeight ? 'block' : '') : '';
|
|
1749
1730
|
}
|
|
1750
1731
|
if (xRightCornerEl) {
|
|
1751
|
-
xRightCornerEl.style.width = scrollbarXToTop ? '' : `${
|
|
1752
|
-
xRightCornerEl.style.display = scrollbarXToTop ? '' : (
|
|
1732
|
+
xRightCornerEl.style.width = scrollbarXToTop ? '' : `${osbWidth}px`;
|
|
1733
|
+
xRightCornerEl.style.display = scrollbarXToTop ? '' : (osbWidth && osbHeight ? 'block' : '');
|
|
1753
1734
|
}
|
|
1754
1735
|
const scrollYVirtualEl = refScrollYVirtualElem.value;
|
|
1755
1736
|
if (scrollYVirtualEl) {
|
|
1756
|
-
scrollYVirtualEl.style.width = `${
|
|
1737
|
+
scrollYVirtualEl.style.width = `${osbWidth}px`;
|
|
1757
1738
|
scrollYVirtualEl.style.height = `${bodyHeight + headerHeight + footerHeight}px`;
|
|
1758
|
-
scrollYVirtualEl.style.visibility =
|
|
1739
|
+
scrollYVirtualEl.style.visibility = overflowY ? 'visible' : 'hidden';
|
|
1759
1740
|
}
|
|
1760
1741
|
const yTopCornerEl = refScrollYTopCornerElem.value;
|
|
1761
1742
|
if (yTopCornerEl) {
|
|
@@ -1873,14 +1854,14 @@ export default defineComponent({
|
|
|
1873
1854
|
if (wrapperElem) {
|
|
1874
1855
|
wrapperElem.style.top = `${headerHeight}px`;
|
|
1875
1856
|
}
|
|
1876
|
-
fixedWrapperElem.style.height = `${customHeight > 0 ? customHeight : (tableHeight + headerHeight + footerHeight +
|
|
1857
|
+
fixedWrapperElem.style.height = `${customHeight > 0 ? customHeight : (tableHeight + headerHeight + footerHeight + osbHeight)}px`;
|
|
1877
1858
|
fixedWrapperElem.style.width = `${fixedColumn.reduce((previous, column) => previous + column.renderWidth, 0)}px`;
|
|
1878
1859
|
}
|
|
1879
1860
|
let tWidth = tableWidth;
|
|
1880
1861
|
let renderColumnList = tableColumn;
|
|
1881
1862
|
let isOptimizeMode = false;
|
|
1882
1863
|
// 如果是使用优化模式
|
|
1883
|
-
if (scrollXLoad || scrollYLoad ||
|
|
1864
|
+
if (scrollXLoad || scrollYLoad || isAllOverflow) {
|
|
1884
1865
|
if (expandColumn || spanMethod || footerSpanMethod) {
|
|
1885
1866
|
// 如果不支持优化模式
|
|
1886
1867
|
}
|
|
@@ -1903,7 +1884,7 @@ export default defineComponent({
|
|
|
1903
1884
|
if (tableElem) {
|
|
1904
1885
|
tableElem.style.width = tWidth ? `${tWidth}px` : '';
|
|
1905
1886
|
// 兼容性处理
|
|
1906
|
-
tableElem.style.paddingRight =
|
|
1887
|
+
tableElem.style.paddingRight = osbWidth && fixedType && (browse['-moz'] || browse.safari) ? `${osbWidth}px` : '';
|
|
1907
1888
|
}
|
|
1908
1889
|
const emptyBlockElem = getRefElem(elemStore[`${name}-${layout}-emptyBlock`]);
|
|
1909
1890
|
if (emptyBlockElem) {
|
|
@@ -1940,7 +1921,7 @@ export default defineComponent({
|
|
|
1940
1921
|
// 如果是固定列
|
|
1941
1922
|
if (fixedWrapperElem) {
|
|
1942
1923
|
if (wrapperElem) {
|
|
1943
|
-
wrapperElem.style.top = `${customHeight > 0 ? customHeight - footerHeight -
|
|
1924
|
+
wrapperElem.style.top = `${customHeight > 0 ? customHeight - footerHeight - osbHeight : tableHeight + headerHeight}px`;
|
|
1944
1925
|
}
|
|
1945
1926
|
}
|
|
1946
1927
|
}
|
|
@@ -1965,7 +1946,7 @@ export default defineComponent({
|
|
|
1965
1946
|
cellOverflow = XEUtils.isUndefined(showFooterOverflow) || XEUtils.isNull(showFooterOverflow) ? allColumnFooterOverflow : showFooterOverflow;
|
|
1966
1947
|
}
|
|
1967
1948
|
else {
|
|
1968
|
-
cellOverflow = XEUtils.isUndefined(showOverflow) || XEUtils.isNull(showOverflow) ?
|
|
1949
|
+
cellOverflow = XEUtils.isUndefined(showOverflow) || XEUtils.isNull(showOverflow) ? isAllOverflow : showOverflow;
|
|
1969
1950
|
}
|
|
1970
1951
|
const showEllipsis = cellOverflow === 'ellipsis';
|
|
1971
1952
|
const showTitle = cellOverflow === 'title';
|
|
@@ -2550,12 +2531,11 @@ export default defineComponent({
|
|
|
2550
2531
|
* 加载表格数据
|
|
2551
2532
|
* @param {Array} datas 数据
|
|
2552
2533
|
*/
|
|
2553
|
-
const loadTableData = (datas) => {
|
|
2554
|
-
const { keepSource, treeConfig
|
|
2534
|
+
const loadTableData = (datas, isReset) => {
|
|
2535
|
+
const { keepSource, treeConfig } = props;
|
|
2555
2536
|
const { editStore, scrollYLoad: oldScrollYLoad } = reactData;
|
|
2556
2537
|
const { scrollYStore, scrollXStore, lastScrollLeft, lastScrollTop } = internalData;
|
|
2557
2538
|
const treeOpts = computeTreeOpts.value;
|
|
2558
|
-
const rowOpts = computeRowOpts.value;
|
|
2559
2539
|
const { transform } = treeOpts;
|
|
2560
2540
|
const childrenField = treeOpts.children || treeOpts.childrenField;
|
|
2561
2541
|
let treeData = [];
|
|
@@ -2601,42 +2581,30 @@ export default defineComponent({
|
|
|
2601
2581
|
scrollYStore.endIndex = 1;
|
|
2602
2582
|
scrollXStore.startIndex = 0;
|
|
2603
2583
|
scrollXStore.endIndex = 1;
|
|
2584
|
+
reactData.isRowLoading = true;
|
|
2604
2585
|
reactData.scrollVMLoading = false;
|
|
2605
2586
|
editStore.insertMaps = {};
|
|
2606
2587
|
editStore.removeMaps = {};
|
|
2607
2588
|
const sYLoad = updateScrollYStatus(fullData);
|
|
2589
|
+
reactData.isDragColMove = false;
|
|
2608
2590
|
reactData.isDragRowMove = false;
|
|
2609
2591
|
// 全量数据
|
|
2610
2592
|
internalData.tableFullData = fullData;
|
|
2611
2593
|
internalData.tableFullTreeData = treeData;
|
|
2612
2594
|
// 缓存数据
|
|
2613
|
-
|
|
2595
|
+
$xeTable.cacheRowMap(true, isReset);
|
|
2614
2596
|
// 原始数据
|
|
2615
2597
|
internalData.tableSynchData = datas;
|
|
2598
|
+
if (isReset) {
|
|
2599
|
+
internalData.isResizeCellHeight = false;
|
|
2600
|
+
reactData.rowExpandedMaps = {};
|
|
2601
|
+
reactData.rowExpandLazyLoadedMaps = {};
|
|
2602
|
+
reactData.treeExpandedMaps = {};
|
|
2603
|
+
reactData.treeExpandLazyLoadedMaps = {};
|
|
2604
|
+
}
|
|
2616
2605
|
// 克隆原数据,用于显示编辑状态,与编辑值做对比
|
|
2617
2606
|
if (keepSource) {
|
|
2618
|
-
|
|
2619
|
-
}
|
|
2620
|
-
if (sYLoad) {
|
|
2621
|
-
if (showOverflow) {
|
|
2622
|
-
if (!rowOpts.height) {
|
|
2623
|
-
const errColumn = internalData.tableFullColumn.find(column => column.showOverflow === false);
|
|
2624
|
-
if (errColumn) {
|
|
2625
|
-
errLog('vxe.error.errProp', [`column[field="${errColumn.field}"].show-overflow=false`, 'show-overflow=true']);
|
|
2626
|
-
}
|
|
2627
|
-
}
|
|
2628
|
-
}
|
|
2629
|
-
if (process.env.NODE_ENV === 'development') {
|
|
2630
|
-
if (!(props.height || props.maxHeight)) {
|
|
2631
|
-
errLog('vxe.error.reqProp', ['table.height | table.max-height | table.scroll-y={enabled: false}']);
|
|
2632
|
-
}
|
|
2633
|
-
// if (!props.showOverflow) {
|
|
2634
|
-
// warnLog('vxe.error.reqProp', ['table.show-overflow'])
|
|
2635
|
-
// }
|
|
2636
|
-
if (props.spanMethod) {
|
|
2637
|
-
warnLog('vxe.error.scrollErrProp', ['table.span-method']);
|
|
2638
|
-
}
|
|
2639
|
-
}
|
|
2607
|
+
$xeTable.cacheSourceMap(fullData);
|
|
2640
2608
|
}
|
|
2641
2609
|
if ($xeTable.clearCellAreas && props.mouseConfig) {
|
|
2642
2610
|
$xeTable.clearCellAreas();
|
|
@@ -2656,6 +2624,27 @@ export default defineComponent({
|
|
|
2656
2624
|
if (sYLoad) {
|
|
2657
2625
|
scrollYStore.endIndex = scrollYStore.visibleSize;
|
|
2658
2626
|
}
|
|
2627
|
+
if (sYLoad) {
|
|
2628
|
+
// if (showOverflow) {
|
|
2629
|
+
// if (!rowOpts.height) {
|
|
2630
|
+
// const errColumn = internalData.tableFullColumn.find(column => column.showOverflow === false)
|
|
2631
|
+
// if (errColumn) {
|
|
2632
|
+
// errLog('vxe.error.errProp', [`column[field="${errColumn.field}"].show-overflow=false`, 'show-overflow=true'])
|
|
2633
|
+
// }
|
|
2634
|
+
// }
|
|
2635
|
+
// }
|
|
2636
|
+
if (process.env.NODE_ENV === 'development') {
|
|
2637
|
+
if (!(props.height || props.maxHeight)) {
|
|
2638
|
+
errLog('vxe.error.reqProp', ['table.height | table.max-height | table.scroll-y={enabled: false}']);
|
|
2639
|
+
}
|
|
2640
|
+
// if (!props.showOverflow) {
|
|
2641
|
+
// warnLog('vxe.error.reqProp', ['table.show-overflow'])
|
|
2642
|
+
// }
|
|
2643
|
+
if (props.spanMethod) {
|
|
2644
|
+
warnLog('vxe.error.scrollErrProp', ['table.span-method']);
|
|
2645
|
+
}
|
|
2646
|
+
}
|
|
2647
|
+
}
|
|
2659
2648
|
handleReserveStatus();
|
|
2660
2649
|
tablePrivateMethods.checkSelectionStatus();
|
|
2661
2650
|
return new Promise(resolve => {
|
|
@@ -2673,6 +2662,7 @@ export default defineComponent({
|
|
|
2673
2662
|
if (sYOpts.scrollToTopOnChange) {
|
|
2674
2663
|
targetScrollTop = 0;
|
|
2675
2664
|
}
|
|
2665
|
+
reactData.isRowLoading = false;
|
|
2676
2666
|
calcCellHeight();
|
|
2677
2667
|
// 是否变更虚拟滚动
|
|
2678
2668
|
if (oldScrollYLoad === sYLoad) {
|
|
@@ -2907,11 +2897,10 @@ export default defineComponent({
|
|
|
2907
2897
|
internalData.collectColumn = collectColumn;
|
|
2908
2898
|
const tableFullColumn = getColumnList(collectColumn);
|
|
2909
2899
|
internalData.tableFullColumn = tableFullColumn;
|
|
2910
|
-
reactData.
|
|
2900
|
+
reactData.isColLoading = true;
|
|
2911
2901
|
reactData.isDragColMove = false;
|
|
2912
2902
|
initColumnSort();
|
|
2913
2903
|
return Promise.resolve(restoreCustomStorage()).then(() => {
|
|
2914
|
-
reactData.isLoading = false;
|
|
2915
2904
|
cacheColumnMap();
|
|
2916
2905
|
parseColumns(true).then(() => {
|
|
2917
2906
|
if (reactData.scrollXLoad) {
|
|
@@ -2936,6 +2925,7 @@ export default defineComponent({
|
|
|
2936
2925
|
if ($xeTable.handleUpdateCustomColumn) {
|
|
2937
2926
|
$xeTable.handleUpdateCustomColumn();
|
|
2938
2927
|
}
|
|
2928
|
+
reactData.isColLoading = false;
|
|
2939
2929
|
return $xeTable.recalculate();
|
|
2940
2930
|
});
|
|
2941
2931
|
});
|
|
@@ -3053,11 +3043,10 @@ export default defineComponent({
|
|
|
3053
3043
|
* 纵向 Y 可视渲染处理
|
|
3054
3044
|
*/
|
|
3055
3045
|
const loadScrollYData = (scrollTop) => {
|
|
3056
|
-
const {
|
|
3057
|
-
const { mergeList } = reactData;
|
|
3046
|
+
const { mergeList, isAllOverflow } = reactData;
|
|
3058
3047
|
const { scrollYStore } = internalData;
|
|
3059
3048
|
const { preloadSize, startIndex, endIndex, offsetSize } = scrollYStore;
|
|
3060
|
-
const autoOffsetYSize =
|
|
3049
|
+
const autoOffsetYSize = isAllOverflow ? offsetSize : offsetSize + 1;
|
|
3061
3050
|
const { toVisibleIndex, visibleSize } = handleVirtualYVisible(scrollTop);
|
|
3062
3051
|
const offsetItem = {
|
|
3063
3052
|
startIndex: Math.max(0, toVisibleIndex - 1 - offsetSize - preloadSize),
|
|
@@ -3103,7 +3092,7 @@ export default defineComponent({
|
|
|
3103
3092
|
const lazyScrollXData = () => {
|
|
3104
3093
|
const { lxTimeout, lxRunTime, scrollXStore } = internalData;
|
|
3105
3094
|
const { visibleSize } = scrollXStore;
|
|
3106
|
-
const fpsTime = Math.max(5, Math.min(
|
|
3095
|
+
const fpsTime = Math.max(5, Math.min(10, Math.floor(visibleSize / 3)));
|
|
3107
3096
|
if (lxTimeout) {
|
|
3108
3097
|
clearTimeout(lxTimeout);
|
|
3109
3098
|
}
|
|
@@ -3118,8 +3107,9 @@ export default defineComponent({
|
|
|
3118
3107
|
}, fpsTime);
|
|
3119
3108
|
};
|
|
3120
3109
|
const lazyScrollYData = () => {
|
|
3121
|
-
const { lyTimeout, lyRunTime } = internalData;
|
|
3122
|
-
const
|
|
3110
|
+
const { lyTimeout, lyRunTime, scrollYStore } = internalData;
|
|
3111
|
+
const { visibleSize } = scrollYStore;
|
|
3112
|
+
const fpsTime = Math.floor(Math.max(4, Math.min(10, visibleSize / 3)));
|
|
3123
3113
|
if (lyTimeout) {
|
|
3124
3114
|
clearTimeout(lyTimeout);
|
|
3125
3115
|
}
|
|
@@ -3142,6 +3132,7 @@ export default defineComponent({
|
|
|
3142
3132
|
internalData.lcsTimeout = setTimeout(() => {
|
|
3143
3133
|
internalData.lcsRunTime = Date.now();
|
|
3144
3134
|
internalData.lcsTimeout = undefined;
|
|
3135
|
+
internalData.intoRunScroll = false;
|
|
3145
3136
|
internalData.inVirtualScroll = false;
|
|
3146
3137
|
internalData.inWheelScroll = false;
|
|
3147
3138
|
internalData.inHeaderScroll = false;
|
|
@@ -3161,6 +3152,48 @@ export default defineComponent({
|
|
|
3161
3152
|
$xeTable.updateCellAreas();
|
|
3162
3153
|
}, 200);
|
|
3163
3154
|
};
|
|
3155
|
+
const getWheelSpeed = (lastScrollTime) => {
|
|
3156
|
+
let multiple = 1;
|
|
3157
|
+
const currTime = Date.now();
|
|
3158
|
+
if (lastScrollTime + 25 > currTime) {
|
|
3159
|
+
multiple = 1.18;
|
|
3160
|
+
}
|
|
3161
|
+
else if (lastScrollTime + 30 > currTime) {
|
|
3162
|
+
multiple = 1.15;
|
|
3163
|
+
}
|
|
3164
|
+
else if (lastScrollTime + 40 > currTime) {
|
|
3165
|
+
multiple = 1.12;
|
|
3166
|
+
}
|
|
3167
|
+
else if (lastScrollTime + 55 > currTime) {
|
|
3168
|
+
multiple = 1.09;
|
|
3169
|
+
}
|
|
3170
|
+
else if (lastScrollTime + 75 > currTime) {
|
|
3171
|
+
multiple = 1.06;
|
|
3172
|
+
}
|
|
3173
|
+
else if (lastScrollTime + 100 > currTime) {
|
|
3174
|
+
multiple = 1.03;
|
|
3175
|
+
}
|
|
3176
|
+
return multiple;
|
|
3177
|
+
};
|
|
3178
|
+
const wheelScrollTo = (diffNum, cb) => {
|
|
3179
|
+
const duration = Math.abs(diffNum);
|
|
3180
|
+
const startTime = performance.now();
|
|
3181
|
+
let countTop = 0;
|
|
3182
|
+
const step = (timestamp) => {
|
|
3183
|
+
let progress = (timestamp - startTime) / duration;
|
|
3184
|
+
if (progress > 1) {
|
|
3185
|
+
progress = 1;
|
|
3186
|
+
}
|
|
3187
|
+
const easedProgress = Math.pow(progress, 2);
|
|
3188
|
+
const offsetTop = Math.floor((diffNum * easedProgress)) - countTop;
|
|
3189
|
+
countTop += offsetTop;
|
|
3190
|
+
cb(offsetTop);
|
|
3191
|
+
if (progress < 1) {
|
|
3192
|
+
requestAnimationFrame(step);
|
|
3193
|
+
}
|
|
3194
|
+
};
|
|
3195
|
+
requestAnimationFrame(step);
|
|
3196
|
+
};
|
|
3164
3197
|
const dispatchEvent = (type, params, evnt) => {
|
|
3165
3198
|
emit(type, createEvent(evnt, { $table: $xeTable, $grid: $xeGrid }, params));
|
|
3166
3199
|
};
|
|
@@ -3172,12 +3205,31 @@ export default defineComponent({
|
|
|
3172
3205
|
}
|
|
3173
3206
|
return nextTick();
|
|
3174
3207
|
};
|
|
3175
|
-
|
|
3208
|
+
const handleUpdateResize = () => {
|
|
3176
3209
|
const el = refElem.value;
|
|
3177
3210
|
if (el && el.clientWidth && el.clientHeight) {
|
|
3178
3211
|
tableMethods.recalculate();
|
|
3179
3212
|
}
|
|
3180
|
-
}
|
|
3213
|
+
};
|
|
3214
|
+
const handleUpdateColResize = (evnt, params) => {
|
|
3215
|
+
$xeTable.analyColumnWidth();
|
|
3216
|
+
$xeTable.recalculate(true).then(() => {
|
|
3217
|
+
$xeTable.saveCustomStore('update:width');
|
|
3218
|
+
$xeTable.updateCellAreas();
|
|
3219
|
+
$xeTable.dispatchEvent('column-resizable-change', params, evnt);
|
|
3220
|
+
// 已废弃 resizable-change
|
|
3221
|
+
$xeTable.dispatchEvent('resizable-change', params, evnt);
|
|
3222
|
+
setTimeout(() => $xeTable.recalculate(true), 300);
|
|
3223
|
+
});
|
|
3224
|
+
};
|
|
3225
|
+
const handleUpdateRowResize = (evnt, params) => {
|
|
3226
|
+
reactData.resizeHeightFlag++;
|
|
3227
|
+
$xeTable.recalculate(true).then(() => {
|
|
3228
|
+
$xeTable.updateCellAreas();
|
|
3229
|
+
$xeTable.dispatchEvent('row-resizable-change', params, evnt);
|
|
3230
|
+
setTimeout(() => $xeTable.recalculate(true), 300);
|
|
3231
|
+
});
|
|
3232
|
+
};
|
|
3181
3233
|
tableMethods = {
|
|
3182
3234
|
dispatchEvent,
|
|
3183
3235
|
/**
|
|
@@ -3230,7 +3282,7 @@ export default defineComponent({
|
|
|
3230
3282
|
*/
|
|
3231
3283
|
loadData(datas) {
|
|
3232
3284
|
const { initStatus } = internalData;
|
|
3233
|
-
return loadTableData(datas).then(() => {
|
|
3285
|
+
return loadTableData(datas, false).then(() => {
|
|
3234
3286
|
internalData.inited = true;
|
|
3235
3287
|
internalData.initStatus = true;
|
|
3236
3288
|
if (!initStatus) {
|
|
@@ -3248,7 +3300,7 @@ export default defineComponent({
|
|
|
3248
3300
|
.then(() => {
|
|
3249
3301
|
internalData.inited = true;
|
|
3250
3302
|
internalData.initStatus = true;
|
|
3251
|
-
return loadTableData(datas);
|
|
3303
|
+
return loadTableData(datas, true);
|
|
3252
3304
|
}).then(() => {
|
|
3253
3305
|
handleLoadDefaults();
|
|
3254
3306
|
return tableMethods.recalculate();
|
|
@@ -3339,7 +3391,7 @@ export default defineComponent({
|
|
|
3339
3391
|
XEUtils.eachTree(rows, (childRow, index, items, path, parentItem, nodes) => {
|
|
3340
3392
|
const rowid = getRowid($xeTable, childRow);
|
|
3341
3393
|
const parentRow = parentItem || parentRest.row;
|
|
3342
|
-
const rest = { row: childRow, rowid, seq: -1, index, _index: -1, $index: -1, treeIndex: -1, items, parent: parentRow, level: parentLevel + nodes.length, height: 0, oTop: 0 };
|
|
3394
|
+
const rest = { row: childRow, rowid, seq: -1, index, _index: -1, $index: -1, treeIndex: -1, items, parent: parentRow, level: parentLevel + nodes.length, height: 0, resizeHeight: 0, oTop: 0 };
|
|
3343
3395
|
fullDataRowIdData[rowid] = rest;
|
|
3344
3396
|
fullAllDataRowIdData[rowid] = rest;
|
|
3345
3397
|
}, { children: childrenField });
|
|
@@ -3568,30 +3620,31 @@ export default defineComponent({
|
|
|
3568
3620
|
return nextTick();
|
|
3569
3621
|
},
|
|
3570
3622
|
getCellElement(row, fieldOrColumn) {
|
|
3623
|
+
const { elemStore } = internalData;
|
|
3571
3624
|
const column = handleFieldOrColumn($xeTable, fieldOrColumn);
|
|
3572
3625
|
if (!column) {
|
|
3573
3626
|
return null;
|
|
3574
3627
|
}
|
|
3575
3628
|
const rowid = getRowid($xeTable, row);
|
|
3576
|
-
const
|
|
3577
|
-
const
|
|
3578
|
-
const
|
|
3629
|
+
const bodyScrollElem = getRefElem(elemStore['main-body-scroll']);
|
|
3630
|
+
const leftScrollElem = getRefElem(elemStore['left-body-scroll']);
|
|
3631
|
+
const rightScrollElem = getRefElem(elemStore['right-body-scroll']);
|
|
3579
3632
|
let bodyElem;
|
|
3580
3633
|
if (column) {
|
|
3581
3634
|
if (column.fixed) {
|
|
3582
3635
|
if (column.fixed === 'left') {
|
|
3583
|
-
if (
|
|
3584
|
-
bodyElem =
|
|
3636
|
+
if (leftScrollElem) {
|
|
3637
|
+
bodyElem = leftScrollElem;
|
|
3585
3638
|
}
|
|
3586
3639
|
}
|
|
3587
3640
|
else {
|
|
3588
|
-
if (
|
|
3589
|
-
bodyElem =
|
|
3641
|
+
if (rightScrollElem) {
|
|
3642
|
+
bodyElem = rightScrollElem;
|
|
3590
3643
|
}
|
|
3591
3644
|
}
|
|
3592
3645
|
}
|
|
3593
3646
|
if (!bodyElem) {
|
|
3594
|
-
bodyElem =
|
|
3647
|
+
bodyElem = bodyScrollElem;
|
|
3595
3648
|
}
|
|
3596
3649
|
if (bodyElem) {
|
|
3597
3650
|
return bodyElem.querySelector(`.vxe-body--row[rowid="${rowid}"] .${column.id}`);
|
|
@@ -4000,29 +4053,34 @@ export default defineComponent({
|
|
|
4000
4053
|
return nextTick();
|
|
4001
4054
|
},
|
|
4002
4055
|
setColumnWidth(fieldOrColumn, width) {
|
|
4056
|
+
const { elemStore } = internalData;
|
|
4003
4057
|
let status = false;
|
|
4004
4058
|
const cols = XEUtils.isArray(fieldOrColumn) ? fieldOrColumn : [fieldOrColumn];
|
|
4005
|
-
|
|
4006
|
-
|
|
4007
|
-
|
|
4008
|
-
|
|
4009
|
-
|
|
4010
|
-
|
|
4011
|
-
|
|
4012
|
-
|
|
4013
|
-
|
|
4014
|
-
|
|
4015
|
-
|
|
4016
|
-
|
|
4017
|
-
|
|
4018
|
-
|
|
4059
|
+
let cWidth = XEUtils.toInteger(width);
|
|
4060
|
+
if (isScale(width)) {
|
|
4061
|
+
const bodyScrollElem = getRefElem(elemStore['main-body-scroll']);
|
|
4062
|
+
const bodyWidth = bodyScrollElem ? bodyScrollElem.clientWidth - 1 : 0;
|
|
4063
|
+
cWidth = Math.floor(cWidth * bodyWidth);
|
|
4064
|
+
}
|
|
4065
|
+
if (cWidth) {
|
|
4066
|
+
cols.forEach(item => {
|
|
4067
|
+
const column = handleFieldOrColumn($xeTable, item);
|
|
4068
|
+
if (column) {
|
|
4069
|
+
column.resizeWidth = cWidth;
|
|
4070
|
+
if (!status) {
|
|
4071
|
+
status = true;
|
|
4072
|
+
}
|
|
4019
4073
|
}
|
|
4074
|
+
});
|
|
4075
|
+
if (status) {
|
|
4076
|
+
return $xeTable.refreshColumn().then(() => {
|
|
4077
|
+
return { status };
|
|
4078
|
+
});
|
|
4020
4079
|
}
|
|
4021
|
-
});
|
|
4022
|
-
if (status) {
|
|
4023
|
-
return tableMethods.refreshColumn();
|
|
4024
4080
|
}
|
|
4025
|
-
return nextTick()
|
|
4081
|
+
return nextTick().then(() => {
|
|
4082
|
+
return { status };
|
|
4083
|
+
});
|
|
4026
4084
|
},
|
|
4027
4085
|
getColumnWidth(fieldOrColumn) {
|
|
4028
4086
|
const column = handleFieldOrColumn($xeTable, fieldOrColumn);
|
|
@@ -4055,6 +4113,93 @@ export default defineComponent({
|
|
|
4055
4113
|
return tableMethods.recalculate();
|
|
4056
4114
|
});
|
|
4057
4115
|
},
|
|
4116
|
+
setRowHeightConf(heightConf) {
|
|
4117
|
+
const { fullAllDataRowIdData } = internalData;
|
|
4118
|
+
let status = false;
|
|
4119
|
+
if (heightConf) {
|
|
4120
|
+
XEUtils.each(heightConf, (height, rowid) => {
|
|
4121
|
+
const rowRest = fullAllDataRowIdData[rowid];
|
|
4122
|
+
if (rowRest) {
|
|
4123
|
+
const rHeight = XEUtils.toInteger(height);
|
|
4124
|
+
if (rHeight) {
|
|
4125
|
+
rowRest.resizeHeight = rHeight;
|
|
4126
|
+
if (!status) {
|
|
4127
|
+
status = true;
|
|
4128
|
+
}
|
|
4129
|
+
}
|
|
4130
|
+
}
|
|
4131
|
+
});
|
|
4132
|
+
if (status) {
|
|
4133
|
+
internalData.isResizeCellHeight = true;
|
|
4134
|
+
reactData.resizeHeightFlag++;
|
|
4135
|
+
}
|
|
4136
|
+
}
|
|
4137
|
+
return nextTick().then(() => {
|
|
4138
|
+
return { status };
|
|
4139
|
+
});
|
|
4140
|
+
},
|
|
4141
|
+
getRowHeightConf(isFull) {
|
|
4142
|
+
const { fullAllDataRowIdData, afterFullData } = internalData;
|
|
4143
|
+
const rowOpts = computeRowOpts.value;
|
|
4144
|
+
const cellOpts = computeCellOpts.value;
|
|
4145
|
+
const defaultRowHeight = computeDefaultRowHeight.value;
|
|
4146
|
+
const rest = {};
|
|
4147
|
+
afterFullData.forEach(row => {
|
|
4148
|
+
const rowid = getRowid($xeTable, row);
|
|
4149
|
+
const rowRest = fullAllDataRowIdData[rowid];
|
|
4150
|
+
if (rowRest) {
|
|
4151
|
+
const resizeHeight = rowRest.resizeHeight;
|
|
4152
|
+
if (resizeHeight || isFull) {
|
|
4153
|
+
const currCellHeight = resizeHeight || cellOpts.height || rowOpts.height || rowRest.height || defaultRowHeight;
|
|
4154
|
+
rest[rowid] = currCellHeight;
|
|
4155
|
+
}
|
|
4156
|
+
}
|
|
4157
|
+
});
|
|
4158
|
+
return rest;
|
|
4159
|
+
},
|
|
4160
|
+
setRowHeight(rowOrId, height) {
|
|
4161
|
+
const { fullAllDataRowIdData } = internalData;
|
|
4162
|
+
let status = false;
|
|
4163
|
+
const rows = XEUtils.isArray(rowOrId) ? rowOrId : [rowOrId];
|
|
4164
|
+
let rHeight = XEUtils.toInteger(height);
|
|
4165
|
+
if (isScale(height)) {
|
|
4166
|
+
const tableBody = refTableBody.value;
|
|
4167
|
+
const bodyElem = tableBody ? tableBody.$el : null;
|
|
4168
|
+
const bodyHeight = bodyElem ? bodyElem.clientHeight - 1 : 0;
|
|
4169
|
+
rHeight = Math.floor(rHeight * bodyHeight);
|
|
4170
|
+
}
|
|
4171
|
+
if (rHeight) {
|
|
4172
|
+
rows.forEach(row => {
|
|
4173
|
+
const rowid = XEUtils.isString(row) || XEUtils.isNumber(row) ? row : getRowid($xeTable, row);
|
|
4174
|
+
const rowRest = fullAllDataRowIdData[rowid];
|
|
4175
|
+
if (rowRest) {
|
|
4176
|
+
rowRest.resizeHeight = rHeight;
|
|
4177
|
+
if (!status) {
|
|
4178
|
+
status = true;
|
|
4179
|
+
}
|
|
4180
|
+
}
|
|
4181
|
+
});
|
|
4182
|
+
if (status) {
|
|
4183
|
+
internalData.isResizeCellHeight = true;
|
|
4184
|
+
reactData.resizeHeightFlag++;
|
|
4185
|
+
}
|
|
4186
|
+
}
|
|
4187
|
+
return nextTick().then(() => {
|
|
4188
|
+
return { status };
|
|
4189
|
+
});
|
|
4190
|
+
},
|
|
4191
|
+
getRowHeight(rowOrId) {
|
|
4192
|
+
const { fullAllDataRowIdData } = internalData;
|
|
4193
|
+
const rowOpts = computeRowOpts.value;
|
|
4194
|
+
const cellOpts = computeCellOpts.value;
|
|
4195
|
+
const defaultRowHeight = computeDefaultRowHeight.value;
|
|
4196
|
+
const rowid = XEUtils.isString(rowOrId) || XEUtils.isNumber(rowOrId) ? rowOrId : getRowid($xeTable, rowOrId);
|
|
4197
|
+
const rowRest = fullAllDataRowIdData[rowid];
|
|
4198
|
+
if (rowRest) {
|
|
4199
|
+
return rowRest.resizeHeight || cellOpts.height || rowOpts.height || rowRest.height || defaultRowHeight;
|
|
4200
|
+
}
|
|
4201
|
+
return 0;
|
|
4202
|
+
},
|
|
4058
4203
|
/**
|
|
4059
4204
|
* 刷新滚动操作,手动同步滚动相关位置(对于某些特殊的操作,比如滚动条错位、固定列不同步)
|
|
4060
4205
|
*/
|
|
@@ -5085,13 +5230,13 @@ export default defineComponent({
|
|
|
5085
5230
|
*/
|
|
5086
5231
|
getScroll() {
|
|
5087
5232
|
const { scrollXLoad, scrollYLoad } = reactData;
|
|
5088
|
-
const
|
|
5089
|
-
const
|
|
5233
|
+
const { elemStore } = internalData;
|
|
5234
|
+
const bodyScrollElem = getRefElem(elemStore['main-body-scroll']);
|
|
5090
5235
|
return {
|
|
5091
5236
|
virtualX: scrollXLoad,
|
|
5092
5237
|
virtualY: scrollYLoad,
|
|
5093
|
-
scrollTop:
|
|
5094
|
-
scrollLeft:
|
|
5238
|
+
scrollTop: bodyScrollElem ? bodyScrollElem.scrollTop : 0,
|
|
5239
|
+
scrollLeft: bodyScrollElem ? bodyScrollElem.scrollLeft : 0
|
|
5095
5240
|
};
|
|
5096
5241
|
},
|
|
5097
5242
|
/**
|
|
@@ -5139,8 +5284,7 @@ export default defineComponent({
|
|
|
5139
5284
|
* @param {ColumnInfo} fieldOrColumn 列配置
|
|
5140
5285
|
*/
|
|
5141
5286
|
scrollToRow(row, fieldOrColumn) {
|
|
5142
|
-
const {
|
|
5143
|
-
const { scrollYLoad, scrollXLoad } = reactData;
|
|
5287
|
+
const { isAllOverflow, scrollYLoad, scrollXLoad } = reactData;
|
|
5144
5288
|
const rest = [];
|
|
5145
5289
|
if (row) {
|
|
5146
5290
|
if (props.treeConfig) {
|
|
@@ -5155,7 +5299,7 @@ export default defineComponent({
|
|
|
5155
5299
|
}
|
|
5156
5300
|
return Promise.all(rest).then(() => {
|
|
5157
5301
|
if (row) {
|
|
5158
|
-
if (!
|
|
5302
|
+
if (!isAllOverflow && (scrollYLoad || scrollXLoad)) {
|
|
5159
5303
|
calcCellHeight();
|
|
5160
5304
|
calcCellWidth();
|
|
5161
5305
|
}
|
|
@@ -6120,9 +6264,11 @@ export default defineComponent({
|
|
|
6120
6264
|
if (!el) {
|
|
6121
6265
|
return;
|
|
6122
6266
|
}
|
|
6123
|
-
const { scrollbarWidth, scrollbarHeight } = reactData;
|
|
6267
|
+
const { overflowX, scrollbarWidth, overflowY, scrollbarHeight } = reactData;
|
|
6124
6268
|
const { prevDragToChild } = internalData;
|
|
6125
6269
|
const wrapperRect = el.getBoundingClientRect();
|
|
6270
|
+
const osbWidth = overflowY ? scrollbarWidth : 0;
|
|
6271
|
+
const osbHeight = overflowX ? scrollbarHeight : 0;
|
|
6126
6272
|
const tableWidth = el.clientWidth;
|
|
6127
6273
|
const tableHeight = el.clientHeight;
|
|
6128
6274
|
if (trEl) {
|
|
@@ -6133,14 +6279,14 @@ export default defineComponent({
|
|
|
6133
6279
|
const trRect = trEl.getBoundingClientRect();
|
|
6134
6280
|
let trHeight = trEl.clientHeight;
|
|
6135
6281
|
const offsetTop = Math.max(1, trRect.y - wrapperRect.y);
|
|
6136
|
-
if (offsetTop + trHeight > tableHeight -
|
|
6137
|
-
trHeight = tableHeight - offsetTop -
|
|
6282
|
+
if (offsetTop + trHeight > tableHeight - osbHeight) {
|
|
6283
|
+
trHeight = tableHeight - offsetTop - osbHeight;
|
|
6138
6284
|
}
|
|
6139
6285
|
rdLineEl.style.display = 'block';
|
|
6140
|
-
rdLineEl.style.left = `${scrollbarYToLeft ?
|
|
6286
|
+
rdLineEl.style.left = `${scrollbarYToLeft ? osbWidth : 0}px`;
|
|
6141
6287
|
rdLineEl.style.top = `${offsetTop}px`;
|
|
6142
6288
|
rdLineEl.style.height = `${trHeight}px`;
|
|
6143
|
-
rdLineEl.style.width = `${tableWidth -
|
|
6289
|
+
rdLineEl.style.width = `${tableWidth - osbWidth}px`;
|
|
6144
6290
|
rdLineEl.setAttribute('drag-pos', dragPos);
|
|
6145
6291
|
rdLineEl.setAttribute('drag-to-child', prevDragToChild ? 'y' : 'n');
|
|
6146
6292
|
}
|
|
@@ -6167,7 +6313,7 @@ export default defineComponent({
|
|
|
6167
6313
|
thWidth -= startX - offsetLeft;
|
|
6168
6314
|
offsetLeft = startX;
|
|
6169
6315
|
}
|
|
6170
|
-
const endX = tableWidth - rightContainerWidth - (rightContainerWidth ? 0 :
|
|
6316
|
+
const endX = tableWidth - rightContainerWidth - (rightContainerWidth ? 0 : osbWidth);
|
|
6171
6317
|
if (offsetLeft + thWidth > endX) {
|
|
6172
6318
|
thWidth = endX - offsetLeft;
|
|
6173
6319
|
}
|
|
@@ -6179,7 +6325,7 @@ export default defineComponent({
|
|
|
6179
6325
|
cdLineEl.style.height = `${thRect.height}px`;
|
|
6180
6326
|
}
|
|
6181
6327
|
else {
|
|
6182
|
-
cdLineEl.style.height = `${tableHeight - offsetTop - (scrollbarXToTop ? 0 :
|
|
6328
|
+
cdLineEl.style.height = `${tableHeight - offsetTop - (scrollbarXToTop ? 0 : osbHeight)}px`;
|
|
6183
6329
|
}
|
|
6184
6330
|
cdLineEl.setAttribute('drag-pos', dragPos);
|
|
6185
6331
|
cdLineEl.setAttribute('drag-to-child', prevDragToChild ? 'y' : 'n');
|
|
@@ -6216,11 +6362,11 @@ export default defineComponent({
|
|
|
6216
6362
|
* @param {Event} evnt 事件
|
|
6217
6363
|
* @param {Row} row 行对象
|
|
6218
6364
|
*/
|
|
6219
|
-
const handleTooltip = (evnt,
|
|
6365
|
+
const handleTooltip = (evnt, tdEl, overflowElem, tipElem, params) => {
|
|
6220
6366
|
if (!overflowElem) {
|
|
6221
6367
|
return nextTick();
|
|
6222
6368
|
}
|
|
6223
|
-
params.cell =
|
|
6369
|
+
params.cell = tdEl;
|
|
6224
6370
|
const { tooltipStore } = reactData;
|
|
6225
6371
|
const tooltipOpts = computeTooltipOpts.value;
|
|
6226
6372
|
const { column, row } = params;
|
|
@@ -6369,9 +6515,8 @@ export default defineComponent({
|
|
|
6369
6515
|
},
|
|
6370
6516
|
/**
|
|
6371
6517
|
* 更新数据行的 Map
|
|
6372
|
-
* 牺牲数据组装的耗时,用来换取使用过程中的流畅
|
|
6373
6518
|
*/
|
|
6374
|
-
cacheRowMap(isSource) {
|
|
6519
|
+
cacheRowMap(isReset, isSource) {
|
|
6375
6520
|
const { treeConfig } = props;
|
|
6376
6521
|
const treeOpts = computeTreeOpts.value;
|
|
6377
6522
|
const { fullAllDataRowIdData, tableFullData, tableFullTreeData } = internalData;
|
|
@@ -6393,8 +6538,8 @@ export default defineComponent({
|
|
|
6393
6538
|
row[childrenField] = null;
|
|
6394
6539
|
}
|
|
6395
6540
|
let cacheItem = fullAllDataRowIdData[rowid];
|
|
6396
|
-
if (!cacheItem) {
|
|
6397
|
-
cacheItem = { row, rowid, seq, index: -1, _index: -1, $index: -1, treeIndex: index, items, parent: parentRow, level, height: 0, oTop: 0 };
|
|
6541
|
+
if (isReset || !cacheItem) {
|
|
6542
|
+
cacheItem = { row, rowid, seq, index: -1, _index: -1, $index: -1, treeIndex: index, items, parent: parentRow, level, height: 0, resizeHeight: 0, oTop: 0 };
|
|
6398
6543
|
}
|
|
6399
6544
|
cacheItem.row = row;
|
|
6400
6545
|
cacheItem.items = items;
|
|
@@ -6493,11 +6638,154 @@ export default defineComponent({
|
|
|
6493
6638
|
});
|
|
6494
6639
|
Object.assign(reactData.columnStore, { resizeList, pxList, pxMinList, autoMinList, scaleList, scaleMinList, autoList, remainList });
|
|
6495
6640
|
},
|
|
6496
|
-
|
|
6641
|
+
handleColResizeMousedownEvent(evnt, fixedType, params) {
|
|
6642
|
+
evnt.stopPropagation();
|
|
6643
|
+
evnt.preventDefault();
|
|
6644
|
+
const { column } = params;
|
|
6645
|
+
const { overflowX, scrollbarHeight } = reactData;
|
|
6646
|
+
const { elemStore, visibleColumn } = internalData;
|
|
6647
|
+
const resizableOpts = computeResizableOpts.value;
|
|
6648
|
+
const osbHeight = overflowX ? scrollbarHeight : 0;
|
|
6649
|
+
const tableEl = refElem.value;
|
|
6650
|
+
const leftContainerElem = refLeftContainer.value;
|
|
6651
|
+
const rightContainerElem = refRightContainer.value;
|
|
6652
|
+
const resizeBarElem = refColResizeBar.value;
|
|
6653
|
+
if (!resizeBarElem) {
|
|
6654
|
+
return;
|
|
6655
|
+
}
|
|
6656
|
+
const resizeTipElem = resizeBarElem.firstElementChild;
|
|
6657
|
+
const scrollbarXToTop = computeScrollbarXToTop.value;
|
|
6658
|
+
const { clientX: dragClientX } = evnt;
|
|
6659
|
+
const wrapperElem = refElem.value;
|
|
6660
|
+
const dragBtnElem = evnt.target;
|
|
6661
|
+
let resizeColumn = column;
|
|
6662
|
+
if (column.children && column.children.length) {
|
|
6663
|
+
XEUtils.eachTree(column.children, childColumn => {
|
|
6664
|
+
resizeColumn = childColumn;
|
|
6665
|
+
});
|
|
6666
|
+
}
|
|
6667
|
+
const cell = dragBtnElem.parentNode;
|
|
6668
|
+
const cellParams = Object.assign(params, { cell });
|
|
6669
|
+
let dragLeft = 0;
|
|
6670
|
+
const bodyScrollElem = getRefElem(elemStore['main-body-scroll']);
|
|
6671
|
+
if (!bodyScrollElem) {
|
|
6672
|
+
return;
|
|
6673
|
+
}
|
|
6674
|
+
const pos = getOffsetPos(dragBtnElem, wrapperElem);
|
|
6675
|
+
const dragBtnWidth = dragBtnElem.clientWidth;
|
|
6676
|
+
const dragBtnOffsetWidth = Math.floor(dragBtnWidth / 2);
|
|
6677
|
+
const minInterval = getColReMinWidth(cellParams) - dragBtnOffsetWidth; // 列之间的最小间距
|
|
6678
|
+
let dragMinLeft = pos.left - cell.clientWidth + dragBtnWidth + minInterval;
|
|
6679
|
+
let dragPosLeft = pos.left + dragBtnOffsetWidth;
|
|
6680
|
+
const isLeftFixed = fixedType === 'left';
|
|
6681
|
+
const isRightFixed = fixedType === 'right';
|
|
6682
|
+
// 计算左右侧固定列偏移量
|
|
6683
|
+
let fixedOffsetWidth = 0;
|
|
6684
|
+
if (isLeftFixed || isRightFixed) {
|
|
6685
|
+
const siblingProp = isLeftFixed ? 'nextElementSibling' : 'previousElementSibling';
|
|
6686
|
+
let tempCellElem = cell[siblingProp];
|
|
6687
|
+
while (tempCellElem) {
|
|
6688
|
+
if (hasClass(tempCellElem, 'fixed--hidden')) {
|
|
6689
|
+
break;
|
|
6690
|
+
}
|
|
6691
|
+
else if (!hasClass(tempCellElem, 'col--group')) {
|
|
6692
|
+
fixedOffsetWidth += tempCellElem.offsetWidth;
|
|
6693
|
+
}
|
|
6694
|
+
tempCellElem = tempCellElem[siblingProp];
|
|
6695
|
+
}
|
|
6696
|
+
if (isRightFixed && rightContainerElem) {
|
|
6697
|
+
dragPosLeft = rightContainerElem.offsetLeft + fixedOffsetWidth;
|
|
6698
|
+
}
|
|
6699
|
+
}
|
|
6700
|
+
// 处理拖动事件
|
|
6701
|
+
const updateEvent = (evnt) => {
|
|
6702
|
+
evnt.stopPropagation();
|
|
6703
|
+
evnt.preventDefault();
|
|
6704
|
+
const tableHeight = tableEl.clientHeight;
|
|
6705
|
+
const offsetX = evnt.clientX - dragClientX;
|
|
6706
|
+
let left = dragPosLeft + offsetX;
|
|
6707
|
+
const scrollLeft = fixedType ? 0 : bodyScrollElem.scrollLeft;
|
|
6708
|
+
if (isLeftFixed) {
|
|
6709
|
+
// 左固定列(不允许超过右侧固定列、不允许超过右边距)
|
|
6710
|
+
left = Math.min(left, (rightContainerElem ? rightContainerElem.offsetLeft : bodyScrollElem.clientWidth) - fixedOffsetWidth - minInterval);
|
|
6711
|
+
}
|
|
6712
|
+
else if (isRightFixed) {
|
|
6713
|
+
// 右侧固定列(不允许超过左侧固定列、不允许超过左边距)
|
|
6714
|
+
dragMinLeft = (leftContainerElem ? leftContainerElem.clientWidth : 0) + fixedOffsetWidth + minInterval;
|
|
6715
|
+
left = Math.min(left, dragPosLeft + cell.clientWidth - minInterval);
|
|
6716
|
+
}
|
|
6717
|
+
else {
|
|
6718
|
+
dragMinLeft = Math.max(bodyScrollElem.scrollLeft, dragMinLeft);
|
|
6719
|
+
// left = Math.min(left, bodyScrollElem.clientWidth + bodyScrollElem.scrollLeft - 40)
|
|
6720
|
+
}
|
|
6721
|
+
dragLeft = Math.max(left, dragMinLeft);
|
|
6722
|
+
const resizeBarLeft = Math.max(1, dragLeft - scrollLeft);
|
|
6723
|
+
resizeBarElem.style.left = `${resizeBarLeft}px`;
|
|
6724
|
+
resizeBarElem.style.top = `${scrollbarXToTop ? osbHeight : 0}px`;
|
|
6725
|
+
resizeBarElem.style.height = `${scrollbarXToTop ? tableHeight - osbHeight : tableHeight}px`;
|
|
6726
|
+
if (resizableOpts.showDragTip && resizeTipElem) {
|
|
6727
|
+
resizeTipElem.textContent = getI18n('vxe.table.resizeColTip', [resizeColumn.renderWidth + (isRightFixed ? dragPosLeft - dragLeft : dragLeft - dragPosLeft)]);
|
|
6728
|
+
const tableWidth = tableEl.clientWidth;
|
|
6729
|
+
const wrapperRect = wrapperElem.getBoundingClientRect();
|
|
6730
|
+
const resizeBarWidth = resizeBarElem.clientWidth;
|
|
6731
|
+
const resizeTipWidth = resizeTipElem.clientWidth;
|
|
6732
|
+
const resizeTipHeight = resizeTipElem.clientHeight;
|
|
6733
|
+
let resizeTipLeft = -resizeTipWidth;
|
|
6734
|
+
if (resizeBarLeft < resizeTipWidth + resizeBarWidth) {
|
|
6735
|
+
resizeTipLeft = 0;
|
|
6736
|
+
}
|
|
6737
|
+
else if (resizeBarLeft > tableWidth) {
|
|
6738
|
+
resizeTipLeft += tableWidth - resizeBarLeft;
|
|
6739
|
+
}
|
|
6740
|
+
resizeTipElem.style.left = `${resizeTipLeft}px`;
|
|
6741
|
+
resizeTipElem.style.top = `${Math.min(tableHeight - resizeTipHeight, Math.max(0, evnt.clientY - wrapperRect.y - resizeTipHeight / 2))}px`;
|
|
6742
|
+
}
|
|
6743
|
+
reactData.isDragResize = true;
|
|
6744
|
+
};
|
|
6745
|
+
reactData.isDragResize = true;
|
|
6746
|
+
addClass(tableEl, 'col-drag--resize');
|
|
6747
|
+
resizeBarElem.style.display = 'block';
|
|
6748
|
+
document.onmousemove = updateEvent;
|
|
6749
|
+
document.onmouseup = function (evnt) {
|
|
6750
|
+
document.onmousemove = null;
|
|
6751
|
+
document.onmouseup = null;
|
|
6752
|
+
resizeBarElem.style.display = 'none';
|
|
6753
|
+
internalData._lastResizeTime = Date.now();
|
|
6754
|
+
setTimeout(() => {
|
|
6755
|
+
reactData.isDragResize = false;
|
|
6756
|
+
}, 50);
|
|
6757
|
+
const resizeWidth = resizeColumn.renderWidth + (isRightFixed ? dragPosLeft - dragLeft : dragLeft - dragPosLeft);
|
|
6758
|
+
const resizeParams = Object.assign(Object.assign({}, params), { resizeWidth, resizeColumn });
|
|
6759
|
+
if (resizableOpts.dragMode === 'fixed') {
|
|
6760
|
+
visibleColumn.forEach(item => {
|
|
6761
|
+
if (item.id !== resizeColumn.id) {
|
|
6762
|
+
if (!item.resizeWidth) {
|
|
6763
|
+
item.resizeWidth = item.renderWidth;
|
|
6764
|
+
}
|
|
6765
|
+
}
|
|
6766
|
+
});
|
|
6767
|
+
}
|
|
6768
|
+
if ($xeTable.handleColResizeCellAreaEvent) {
|
|
6769
|
+
$xeTable.handleColResizeCellAreaEvent(evnt, resizeParams);
|
|
6770
|
+
}
|
|
6771
|
+
else {
|
|
6772
|
+
resizeColumn.resizeWidth = resizeWidth;
|
|
6773
|
+
handleUpdateColResize(evnt, resizeParams);
|
|
6774
|
+
}
|
|
6775
|
+
removeClass(tableEl, 'col-drag--resize');
|
|
6776
|
+
};
|
|
6777
|
+
updateEvent(evnt);
|
|
6778
|
+
if ($xeTable.closeMenu) {
|
|
6779
|
+
$xeTable.closeMenu();
|
|
6780
|
+
}
|
|
6781
|
+
},
|
|
6782
|
+
handleColResizeDblclickEvent(evnt, params) {
|
|
6497
6783
|
const resizableOpts = computeResizableOpts.value;
|
|
6498
6784
|
const { isDblclickAutoWidth } = resizableOpts;
|
|
6499
6785
|
const el = refElem.value;
|
|
6500
6786
|
if (isDblclickAutoWidth && el) {
|
|
6787
|
+
evnt.stopPropagation();
|
|
6788
|
+
evnt.preventDefault();
|
|
6501
6789
|
const { fullColumnIdData } = internalData;
|
|
6502
6790
|
const { column } = params;
|
|
6503
6791
|
let resizeColumn = column;
|
|
@@ -6512,20 +6800,166 @@ export default defineComponent({
|
|
|
6512
6800
|
const cell = dragBtnElem.parentNode;
|
|
6513
6801
|
const cellParams = Object.assign(params, { cell });
|
|
6514
6802
|
const colMinWidth = getColReMinWidth(cellParams);
|
|
6803
|
+
el.setAttribute('data-calc-col', 'Y');
|
|
6515
6804
|
let resizeWidth = calcColumnAutoWidth(resizeColumn, el);
|
|
6805
|
+
el.removeAttribute('data-calc-col');
|
|
6516
6806
|
if (colRest) {
|
|
6517
6807
|
resizeWidth = Math.max(resizeWidth, colRest.width);
|
|
6518
6808
|
}
|
|
6519
|
-
|
|
6520
|
-
|
|
6809
|
+
resizeWidth = Math.max(colMinWidth, resizeWidth);
|
|
6810
|
+
const resizeParams = Object.assign(Object.assign({}, params), { resizeWidth, resizeColumn });
|
|
6811
|
+
reactData.isDragResize = false;
|
|
6521
6812
|
internalData._lastResizeTime = Date.now();
|
|
6522
|
-
$xeTable.
|
|
6523
|
-
|
|
6524
|
-
|
|
6525
|
-
|
|
6526
|
-
|
|
6527
|
-
|
|
6528
|
-
}
|
|
6813
|
+
if ($xeTable.handleColResizeDblclickCellAreaEvent) {
|
|
6814
|
+
$xeTable.handleColResizeDblclickCellAreaEvent(evnt, resizeParams);
|
|
6815
|
+
}
|
|
6816
|
+
else {
|
|
6817
|
+
resizeColumn.resizeWidth = resizeWidth;
|
|
6818
|
+
handleUpdateColResize(evnt, resizeParams);
|
|
6819
|
+
}
|
|
6820
|
+
}
|
|
6821
|
+
},
|
|
6822
|
+
handleRowResizeMousedownEvent(evnt, params) {
|
|
6823
|
+
evnt.stopPropagation();
|
|
6824
|
+
evnt.preventDefault();
|
|
6825
|
+
const { row } = params;
|
|
6826
|
+
const { overflowX, scrollbarWidth, overflowY, scrollbarHeight } = reactData;
|
|
6827
|
+
const { elemStore, fullAllDataRowIdData } = internalData;
|
|
6828
|
+
const osbWidth = overflowY ? scrollbarWidth : 0;
|
|
6829
|
+
const osbHeight = overflowX ? scrollbarHeight : 0;
|
|
6830
|
+
const scrollbarYToLeft = computeScrollbarYToLeft.value;
|
|
6831
|
+
const resizableOpts = computeResizableOpts.value;
|
|
6832
|
+
const rowOpts = computeRowOpts.value;
|
|
6833
|
+
const cellOpts = computeCellOpts.value;
|
|
6834
|
+
const tableEl = refElem.value;
|
|
6835
|
+
const resizeBarElem = refRowResizeBar.value;
|
|
6836
|
+
if (!resizeBarElem) {
|
|
6837
|
+
return;
|
|
6838
|
+
}
|
|
6839
|
+
const { clientY: dragClientY } = evnt;
|
|
6840
|
+
const resizeTipElem = resizeBarElem.firstElementChild;
|
|
6841
|
+
const dragBtnElem = evnt.currentTarget;
|
|
6842
|
+
const tdEl = dragBtnElem.parentNode;
|
|
6843
|
+
const trEl = tdEl.parentNode;
|
|
6844
|
+
const bodyScrollElem = getRefElem(elemStore['main-body-scroll']);
|
|
6845
|
+
if (!bodyScrollElem) {
|
|
6846
|
+
return;
|
|
6847
|
+
}
|
|
6848
|
+
const rowid = getRowid($xeTable, row);
|
|
6849
|
+
const rowRest = fullAllDataRowIdData[rowid];
|
|
6850
|
+
if (!rowRest) {
|
|
6851
|
+
return;
|
|
6852
|
+
}
|
|
6853
|
+
const defaultRowHeight = computeDefaultRowHeight.value;
|
|
6854
|
+
const currCellHeight = rowRest.resizeHeight || cellOpts.height || rowOpts.height || rowRest.height || defaultRowHeight;
|
|
6855
|
+
const tableRect = tableEl.getBoundingClientRect();
|
|
6856
|
+
const trRect = trEl.getBoundingClientRect();
|
|
6857
|
+
const targetOffsetY = dragClientY - trRect.y - trEl.clientHeight;
|
|
6858
|
+
let resizeHeight = currCellHeight;
|
|
6859
|
+
const cellEl = tdEl.querySelector('.vxe-cell');
|
|
6860
|
+
let cellMinHeight = 0;
|
|
6861
|
+
if (cellEl) {
|
|
6862
|
+
const cellStyle = getComputedStyle(cellEl);
|
|
6863
|
+
cellMinHeight = Math.max(1, Math.ceil(XEUtils.toNumber(cellStyle.paddingTop) + XEUtils.toNumber(cellStyle.paddingBottom)));
|
|
6864
|
+
}
|
|
6865
|
+
const minTop = trRect.y - tableRect.y + cellMinHeight;
|
|
6866
|
+
// 处理拖动事件
|
|
6867
|
+
const updateEvent = (evnt) => {
|
|
6868
|
+
evnt.stopPropagation();
|
|
6869
|
+
evnt.preventDefault();
|
|
6870
|
+
const tableWidth = tableEl.clientWidth - osbWidth;
|
|
6871
|
+
const tableHeight = tableEl.clientHeight - osbHeight;
|
|
6872
|
+
let dragTop = evnt.clientY - tableRect.y - targetOffsetY;
|
|
6873
|
+
if (dragTop < minTop) {
|
|
6874
|
+
dragTop = minTop;
|
|
6875
|
+
}
|
|
6876
|
+
else {
|
|
6877
|
+
resizeHeight = Math.max(cellMinHeight, currCellHeight + evnt.clientY - dragClientY);
|
|
6878
|
+
}
|
|
6879
|
+
resizeBarElem.style.left = `${scrollbarYToLeft ? osbWidth : 0}px`;
|
|
6880
|
+
resizeBarElem.style.top = `${dragTop}px`;
|
|
6881
|
+
resizeBarElem.style.width = `${tableWidth}px`;
|
|
6882
|
+
if (resizableOpts.showDragTip && resizeTipElem) {
|
|
6883
|
+
resizeTipElem.textContent = getI18n('vxe.table.resizeRowTip', [resizeHeight]);
|
|
6884
|
+
const resizeTipWidth = resizeTipElem.clientWidth;
|
|
6885
|
+
const resizeTipHeight = resizeTipElem.clientHeight;
|
|
6886
|
+
let resizeBarLeft = Math.max(2, evnt.clientX - tableRect.x);
|
|
6887
|
+
let resizeBarTop = 0;
|
|
6888
|
+
if (resizeBarLeft + resizeTipWidth >= tableWidth - 2) {
|
|
6889
|
+
resizeBarLeft = tableWidth - resizeTipWidth - 2;
|
|
6890
|
+
}
|
|
6891
|
+
if (dragTop + resizeTipHeight >= tableHeight) {
|
|
6892
|
+
resizeBarTop = tableHeight - (dragTop + resizeTipHeight);
|
|
6893
|
+
}
|
|
6894
|
+
resizeTipElem.style.left = `${resizeBarLeft}px`;
|
|
6895
|
+
resizeTipElem.style.top = `${resizeBarTop}px`;
|
|
6896
|
+
}
|
|
6897
|
+
reactData.isDragResize = true;
|
|
6898
|
+
};
|
|
6899
|
+
reactData.isDragResize = true;
|
|
6900
|
+
addClass(tableEl, 'row-drag--resize');
|
|
6901
|
+
resizeBarElem.style.display = 'block';
|
|
6902
|
+
document.onmousemove = updateEvent;
|
|
6903
|
+
document.onmouseup = function (evnt) {
|
|
6904
|
+
document.onmousemove = null;
|
|
6905
|
+
document.onmouseup = null;
|
|
6906
|
+
resizeBarElem.style.display = 'none';
|
|
6907
|
+
internalData._lastResizeTime = Date.now();
|
|
6908
|
+
setTimeout(() => {
|
|
6909
|
+
reactData.isDragResize = false;
|
|
6910
|
+
}, 50);
|
|
6911
|
+
if (resizeHeight !== currCellHeight) {
|
|
6912
|
+
const resizeParams = Object.assign(Object.assign({}, params), { resizeHeight, resizeRow: row });
|
|
6913
|
+
internalData.isResizeCellHeight = true;
|
|
6914
|
+
if ($xeTable.handleRowResizeCellAreaEvent) {
|
|
6915
|
+
$xeTable.handleRowResizeCellAreaEvent(evnt, resizeParams);
|
|
6916
|
+
}
|
|
6917
|
+
else {
|
|
6918
|
+
rowRest.resizeHeight = resizeHeight;
|
|
6919
|
+
handleUpdateRowResize(evnt, resizeParams);
|
|
6920
|
+
}
|
|
6921
|
+
}
|
|
6922
|
+
removeClass(tableEl, 'row-drag--resize');
|
|
6923
|
+
};
|
|
6924
|
+
updateEvent(evnt);
|
|
6925
|
+
},
|
|
6926
|
+
handleRowResizeDblclickEvent(evnt, params) {
|
|
6927
|
+
const resizableOpts = computeResizableOpts.value;
|
|
6928
|
+
const { isDblclickAutoHeight } = resizableOpts;
|
|
6929
|
+
const el = refElem.value;
|
|
6930
|
+
if (isDblclickAutoHeight && el) {
|
|
6931
|
+
evnt.stopPropagation();
|
|
6932
|
+
evnt.preventDefault();
|
|
6933
|
+
const { editStore } = reactData;
|
|
6934
|
+
const { fullAllDataRowIdData } = internalData;
|
|
6935
|
+
const { actived } = editStore;
|
|
6936
|
+
const { row } = params;
|
|
6937
|
+
const rowid = getRowid($xeTable, row);
|
|
6938
|
+
const rowRest = fullAllDataRowIdData[rowid];
|
|
6939
|
+
if (!rowRest) {
|
|
6940
|
+
return;
|
|
6941
|
+
}
|
|
6942
|
+
const handleRsHeight = () => {
|
|
6943
|
+
el.setAttribute('data-calc-row', 'Y');
|
|
6944
|
+
const resizeHeight = calcCellAutoHeight(rowRest, el);
|
|
6945
|
+
el.removeAttribute('data-calc-row');
|
|
6946
|
+
const resizeParams = Object.assign(Object.assign({}, params), { resizeHeight, resizeRow: row });
|
|
6947
|
+
reactData.isDragResize = false;
|
|
6948
|
+
internalData._lastResizeTime = Date.now();
|
|
6949
|
+
if ($xeTable.handleRowResizeDblclickCellAreaEvent) {
|
|
6950
|
+
$xeTable.handleRowResizeDblclickCellAreaEvent(evnt, resizeParams);
|
|
6951
|
+
}
|
|
6952
|
+
else {
|
|
6953
|
+
rowRest.resizeHeight = resizeHeight;
|
|
6954
|
+
handleUpdateRowResize(evnt, resizeParams);
|
|
6955
|
+
}
|
|
6956
|
+
};
|
|
6957
|
+
if (actived.row || actived.column) {
|
|
6958
|
+
$xeTable.clearEdit().then(handleRsHeight);
|
|
6959
|
+
}
|
|
6960
|
+
else {
|
|
6961
|
+
handleRsHeight();
|
|
6962
|
+
}
|
|
6529
6963
|
}
|
|
6530
6964
|
},
|
|
6531
6965
|
saveCustomStore(type) {
|
|
@@ -6876,10 +7310,21 @@ export default defineComponent({
|
|
|
6876
7310
|
triggerHeaderTooltipEvent(evnt, params) {
|
|
6877
7311
|
const { tooltipStore } = reactData;
|
|
6878
7312
|
const { column } = params;
|
|
6879
|
-
const titleElem = evnt.currentTarget;
|
|
6880
7313
|
handleTargetEnterEvent(true);
|
|
7314
|
+
const titleElem = evnt.currentTarget;
|
|
7315
|
+
if (!titleElem) {
|
|
7316
|
+
return;
|
|
7317
|
+
}
|
|
7318
|
+
const cellEl = titleElem.parentElement;
|
|
7319
|
+
if (!cellEl) {
|
|
7320
|
+
return;
|
|
7321
|
+
}
|
|
7322
|
+
const thEl = cellEl.parentElement;
|
|
7323
|
+
if (!thEl) {
|
|
7324
|
+
return;
|
|
7325
|
+
}
|
|
6881
7326
|
if (tooltipStore.column !== column || !tooltipStore.visible) {
|
|
6882
|
-
handleTooltip(evnt,
|
|
7327
|
+
handleTooltip(evnt, thEl, cellEl, null, params);
|
|
6883
7328
|
}
|
|
6884
7329
|
},
|
|
6885
7330
|
/**
|
|
@@ -6892,7 +7337,7 @@ export default defineComponent({
|
|
|
6892
7337
|
const editOpts = computeEditOpts.value;
|
|
6893
7338
|
const { actived } = editStore;
|
|
6894
7339
|
const { row, column } = params;
|
|
6895
|
-
const
|
|
7340
|
+
const tdEl = evnt.currentTarget;
|
|
6896
7341
|
handleTargetEnterEvent(tooltipStore.column !== column || tooltipStore.row !== row);
|
|
6897
7342
|
// 单元格处于编辑状态时不触发提示框
|
|
6898
7343
|
if (column.editRender && isEnableConf(editConfig)) {
|
|
@@ -6906,18 +7351,7 @@ export default defineComponent({
|
|
|
6906
7351
|
}
|
|
6907
7352
|
}
|
|
6908
7353
|
if (tooltipStore.column !== column || tooltipStore.row !== row || !tooltipStore.visible) {
|
|
6909
|
-
|
|
6910
|
-
let tipElem;
|
|
6911
|
-
if (column.treeNode) {
|
|
6912
|
-
overflowElem = cell.querySelector('.vxe-tree-cell');
|
|
6913
|
-
if (column.type === 'html') {
|
|
6914
|
-
tipElem = cell.querySelector('.vxe-cell--html');
|
|
6915
|
-
}
|
|
6916
|
-
}
|
|
6917
|
-
else {
|
|
6918
|
-
tipElem = cell.querySelector(column.type === 'html' ? '.vxe-cell--html' : '.vxe-cell--label');
|
|
6919
|
-
}
|
|
6920
|
-
handleTooltip(evnt, cell, (overflowElem || cell.children[0]), tipElem, params);
|
|
7354
|
+
handleTooltip(evnt, tdEl, tdEl.querySelector('.vxe-cell--wrapper'), null, params);
|
|
6921
7355
|
}
|
|
6922
7356
|
},
|
|
6923
7357
|
/**
|
|
@@ -6929,7 +7363,7 @@ export default defineComponent({
|
|
|
6929
7363
|
const cell = evnt.currentTarget;
|
|
6930
7364
|
handleTargetEnterEvent(tooltipStore.column !== column || !!tooltipStore.row);
|
|
6931
7365
|
if (tooltipStore.column !== column || !tooltipStore.visible) {
|
|
6932
|
-
handleTooltip(evnt, cell, cell.querySelector('.vxe-cell--
|
|
7366
|
+
handleTooltip(evnt, cell, cell.querySelector('.vxe-cell--wrapper') || cell.children[0], null, params);
|
|
6933
7367
|
}
|
|
6934
7368
|
},
|
|
6935
7369
|
handleTargetLeaveEvent() {
|
|
@@ -6942,12 +7376,12 @@ export default defineComponent({
|
|
|
6942
7376
|
internalData.tooltipTimeout = setTimeout(() => {
|
|
6943
7377
|
$tooltip = refTooltip.value;
|
|
6944
7378
|
if ($tooltip && $tooltip.isActived && !$tooltip.isActived()) {
|
|
6945
|
-
|
|
7379
|
+
$xeTable.closeTooltip();
|
|
6946
7380
|
}
|
|
6947
7381
|
}, tooltipOpts.leaveDelay);
|
|
6948
7382
|
}
|
|
6949
7383
|
else {
|
|
6950
|
-
|
|
7384
|
+
$xeTable.closeTooltip();
|
|
6951
7385
|
}
|
|
6952
7386
|
},
|
|
6953
7387
|
triggerHeaderCellClickEvent(evnt, params) {
|
|
@@ -6977,7 +7411,10 @@ export default defineComponent({
|
|
|
6977
7411
|
*/
|
|
6978
7412
|
triggerCellClickEvent(evnt, params) {
|
|
6979
7413
|
const { highlightCurrentRow, editConfig } = props;
|
|
6980
|
-
const { editStore } = reactData;
|
|
7414
|
+
const { editStore, isDragResize } = reactData;
|
|
7415
|
+
if (isDragResize) {
|
|
7416
|
+
return;
|
|
7417
|
+
}
|
|
6981
7418
|
const expandOpts = computeExpandOpts.value;
|
|
6982
7419
|
const editOpts = computeEditOpts.value;
|
|
6983
7420
|
const treeOpts = computeTreeOpts.value;
|
|
@@ -7072,7 +7509,10 @@ export default defineComponent({
|
|
|
7072
7509
|
*/
|
|
7073
7510
|
triggerCellDblclickEvent(evnt, params) {
|
|
7074
7511
|
const { editConfig } = props;
|
|
7075
|
-
const { editStore } = reactData;
|
|
7512
|
+
const { editStore, isDragResize } = reactData;
|
|
7513
|
+
if (isDragResize) {
|
|
7514
|
+
return;
|
|
7515
|
+
}
|
|
7076
7516
|
const editOpts = computeEditOpts.value;
|
|
7077
7517
|
const { actived } = editStore;
|
|
7078
7518
|
const cell = evnt.currentTarget;
|
|
@@ -7285,10 +7725,13 @@ export default defineComponent({
|
|
|
7285
7725
|
*/
|
|
7286
7726
|
triggerSortEvent(evnt, column, order) {
|
|
7287
7727
|
const sortOpts = computeSortOpts.value;
|
|
7728
|
+
const { multiple, allowClear } = sortOpts;
|
|
7288
7729
|
const { field, sortable } = column;
|
|
7289
7730
|
if (sortable) {
|
|
7290
7731
|
if (!order || column.order === order) {
|
|
7291
|
-
|
|
7732
|
+
if (allowClear) {
|
|
7733
|
+
tableMethods.clearSort(multiple ? column : null);
|
|
7734
|
+
}
|
|
7292
7735
|
}
|
|
7293
7736
|
else {
|
|
7294
7737
|
tableMethods.sort({ field, order });
|
|
@@ -7381,7 +7824,7 @@ export default defineComponent({
|
|
|
7381
7824
|
const { treeConfig, dragConfig } = props;
|
|
7382
7825
|
const rowDragOpts = computeRowDragOpts.value;
|
|
7383
7826
|
const { fullAllDataRowIdData } = internalData;
|
|
7384
|
-
const { isPeerDrag, isCrossDrag, isSelfToChildDrag, dragEndMethod } = rowDragOpts;
|
|
7827
|
+
const { isPeerDrag, isCrossDrag, isSelfToChildDrag, dragEndMethod, dragToChildMethod } = rowDragOpts;
|
|
7385
7828
|
const treeOpts = computeTreeOpts.value;
|
|
7386
7829
|
const { transform, rowField, mapChildrenField, parentField } = treeOpts;
|
|
7387
7830
|
const childrenField = treeOpts.children || treeOpts.childrenField;
|
|
@@ -7391,15 +7834,15 @@ export default defineComponent({
|
|
|
7391
7834
|
if (prevDragRow && dragRow) {
|
|
7392
7835
|
// 判断是否有拖动
|
|
7393
7836
|
if (prevDragRow !== dragRow) {
|
|
7394
|
-
|
|
7395
|
-
|
|
7396
|
-
|
|
7397
|
-
|
|
7398
|
-
|
|
7399
|
-
|
|
7400
|
-
|
|
7401
|
-
|
|
7402
|
-
|
|
7837
|
+
const dragParams = {
|
|
7838
|
+
oldRow: dragRow,
|
|
7839
|
+
newRow: prevDragRow,
|
|
7840
|
+
dragPos: prevDragPos,
|
|
7841
|
+
dragToChild: !!prevDragToChild,
|
|
7842
|
+
offsetIndex: dragOffsetIndex
|
|
7843
|
+
};
|
|
7844
|
+
const isDragToChildFlag = isSelfToChildDrag && dragToChildMethod ? dragToChildMethod(dragParams) : prevDragToChild;
|
|
7845
|
+
return Promise.resolve(dEndMethod ? dEndMethod(dragParams) : true).then((status) => {
|
|
7403
7846
|
if (!status) {
|
|
7404
7847
|
return;
|
|
7405
7848
|
}
|
|
@@ -7474,7 +7917,11 @@ export default defineComponent({
|
|
|
7474
7917
|
else {
|
|
7475
7918
|
// 根到根
|
|
7476
7919
|
}
|
|
7477
|
-
const fullList = XEUtils.toTreeArray(internalData.afterTreeFullData, {
|
|
7920
|
+
const fullList = XEUtils.toTreeArray(internalData.afterTreeFullData, {
|
|
7921
|
+
key: rowField,
|
|
7922
|
+
parentKey: parentField,
|
|
7923
|
+
children: mapChildrenField
|
|
7924
|
+
});
|
|
7478
7925
|
// 移出
|
|
7479
7926
|
const otfIndex = $xeTable.findRowIndexOf(fullList, dragRow);
|
|
7480
7927
|
fullList.splice(otfIndex, 1);
|
|
@@ -7488,12 +7935,12 @@ export default defineComponent({
|
|
|
7488
7935
|
childRow[parentField] = dragRow[parentField];
|
|
7489
7936
|
});
|
|
7490
7937
|
}
|
|
7491
|
-
dragRow[parentField] =
|
|
7938
|
+
dragRow[parentField] = isDragToChildFlag ? prevDragRow[rowField] : prevDragRow[parentField];
|
|
7492
7939
|
internalData.tableFullTreeData = XEUtils.toArrayTree(fullList, {
|
|
7493
|
-
key:
|
|
7494
|
-
parentKey:
|
|
7940
|
+
key: rowField,
|
|
7941
|
+
parentKey: parentField,
|
|
7495
7942
|
children: childrenField,
|
|
7496
|
-
mapChildren:
|
|
7943
|
+
mapChildren: mapChildrenField
|
|
7497
7944
|
});
|
|
7498
7945
|
}
|
|
7499
7946
|
}
|
|
@@ -7514,7 +7961,7 @@ export default defineComponent({
|
|
|
7514
7961
|
}
|
|
7515
7962
|
reactData.isDragRowMove = true;
|
|
7516
7963
|
$xeTable.handleTableData(treeConfig && transform);
|
|
7517
|
-
$xeTable.cacheRowMap();
|
|
7964
|
+
$xeTable.cacheRowMap(false);
|
|
7518
7965
|
updateScrollYStatus();
|
|
7519
7966
|
if (!(treeConfig && transform)) {
|
|
7520
7967
|
$xeTable.updateAfterDataIndex();
|
|
@@ -7531,7 +7978,7 @@ export default defineComponent({
|
|
|
7531
7978
|
oldRow: dragRow,
|
|
7532
7979
|
newRow: prevDragRow,
|
|
7533
7980
|
dragPos: prevDragPos,
|
|
7534
|
-
dragToChild:
|
|
7981
|
+
dragToChild: isDragToChildFlag,
|
|
7535
7982
|
offsetIndex: dragOffsetIndex,
|
|
7536
7983
|
_index: {
|
|
7537
7984
|
newIndex: nafIndex,
|
|
@@ -7552,20 +7999,18 @@ export default defineComponent({
|
|
|
7552
7999
|
const { lazy } = treeOpts;
|
|
7553
8000
|
const hasChildField = treeOpts.hasChild || treeOpts.hasChildField;
|
|
7554
8001
|
const { prevDragRow, prevDragPos } = internalData;
|
|
7555
|
-
if (treeConfig && prevDragToChild) {
|
|
8002
|
+
if (treeConfig && lazy && prevDragToChild) {
|
|
7556
8003
|
// 懒加载
|
|
7557
|
-
|
|
7558
|
-
|
|
7559
|
-
|
|
7560
|
-
if (
|
|
7561
|
-
if (rowRest && rowRest.treeLoaded) {
|
|
7562
|
-
$xeTable.handleRowDragSwapEvent(evnt, true, dragRow, prevDragRow, prevDragPos, prevDragToChild);
|
|
7563
|
-
}
|
|
7564
|
-
}
|
|
7565
|
-
else {
|
|
8004
|
+
const newRowid = getRowid($xeTable, prevDragRow);
|
|
8005
|
+
const rowRest = fullAllDataRowIdData[newRowid];
|
|
8006
|
+
if (prevDragRow[hasChildField]) {
|
|
8007
|
+
if (rowRest && rowRest.treeLoaded) {
|
|
7566
8008
|
$xeTable.handleRowDragSwapEvent(evnt, true, dragRow, prevDragRow, prevDragPos, prevDragToChild);
|
|
7567
8009
|
}
|
|
7568
8010
|
}
|
|
8011
|
+
else {
|
|
8012
|
+
$xeTable.handleRowDragSwapEvent(evnt, true, dragRow, prevDragRow, prevDragPos, prevDragToChild);
|
|
8013
|
+
}
|
|
7569
8014
|
}
|
|
7570
8015
|
else {
|
|
7571
8016
|
$xeTable.handleRowDragSwapEvent(evnt, true, dragRow, prevDragRow, prevDragPos, prevDragToChild);
|
|
@@ -7668,7 +8113,7 @@ export default defineComponent({
|
|
|
7668
8113
|
handleColDragSwapEvent(evnt, isSyncColumn, dragCol, prevDragCol, prevDragPos, prevDragToChild) {
|
|
7669
8114
|
const { mouseConfig } = props;
|
|
7670
8115
|
const columnDragOpts = computeColumnDragOpts.value;
|
|
7671
|
-
const { isPeerDrag, isCrossDrag, isSelfToChildDrag, isToChildDrag, dragEndMethod } = columnDragOpts;
|
|
8116
|
+
const { isPeerDrag, isCrossDrag, isSelfToChildDrag, isToChildDrag, dragEndMethod, dragToChildMethod } = columnDragOpts;
|
|
7672
8117
|
const { collectColumn } = internalData;
|
|
7673
8118
|
const dragOffsetIndex = prevDragPos === 'right' ? 1 : 0;
|
|
7674
8119
|
if (prevDragCol && dragCol) {
|
|
@@ -7676,15 +8121,15 @@ export default defineComponent({
|
|
|
7676
8121
|
if (prevDragCol !== dragCol) {
|
|
7677
8122
|
const oldColumn = dragCol;
|
|
7678
8123
|
const newColumn = prevDragCol;
|
|
7679
|
-
|
|
7680
|
-
|
|
7681
|
-
|
|
7682
|
-
|
|
7683
|
-
|
|
7684
|
-
|
|
7685
|
-
|
|
7686
|
-
|
|
7687
|
-
|
|
8124
|
+
const dragParams = {
|
|
8125
|
+
oldColumn,
|
|
8126
|
+
newColumn,
|
|
8127
|
+
dragPos: prevDragPos,
|
|
8128
|
+
dragToChild: !!prevDragToChild,
|
|
8129
|
+
offsetIndex: dragOffsetIndex
|
|
8130
|
+
};
|
|
8131
|
+
const isDragToChildFlag = isSelfToChildDrag && dragToChildMethod ? dragToChildMethod(dragParams) : prevDragToChild;
|
|
8132
|
+
return Promise.resolve(dragEndMethod ? dragEndMethod(dragParams) : true).then((status) => {
|
|
7688
8133
|
if (!status) {
|
|
7689
8134
|
return;
|
|
7690
8135
|
}
|
|
@@ -7774,7 +8219,7 @@ export default defineComponent({
|
|
|
7774
8219
|
if (newMatchRest) {
|
|
7775
8220
|
const { items: nCols, index: nIndex, parent: nParent } = newMatchRest;
|
|
7776
8221
|
// 转子级
|
|
7777
|
-
if ((isCrossDrag && isToChildDrag) &&
|
|
8222
|
+
if ((isCrossDrag && isToChildDrag) && isDragToChildFlag) {
|
|
7778
8223
|
oldColumn.parentId = newColumn.id;
|
|
7779
8224
|
newColumn.children = (newColumn.children || []).concat([oldColumn]);
|
|
7780
8225
|
}
|
|
@@ -7806,7 +8251,7 @@ export default defineComponent({
|
|
|
7806
8251
|
oldColumn,
|
|
7807
8252
|
newColumn,
|
|
7808
8253
|
dragPos: prevDragPos,
|
|
7809
|
-
dragToChild:
|
|
8254
|
+
dragToChild: isDragToChildFlag,
|
|
7810
8255
|
offsetIndex: dragOffsetIndex,
|
|
7811
8256
|
_index: {
|
|
7812
8257
|
newIndex: nafIndex,
|
|
@@ -8051,7 +8496,7 @@ export default defineComponent({
|
|
|
8051
8496
|
}
|
|
8052
8497
|
},
|
|
8053
8498
|
triggerBodyScrollEvent(evnt, fixedType) {
|
|
8054
|
-
const { elemStore, lastScrollTop, lastScrollLeft, inWheelScroll, inVirtualScroll, inHeaderScroll, inBodyScroll, scrollRenderType, inFooterScroll } = internalData;
|
|
8499
|
+
const { elemStore, intoRunScroll, lastScrollTop, lastScrollLeft, inWheelScroll, inVirtualScroll, inHeaderScroll, inBodyScroll, scrollRenderType, inFooterScroll } = internalData;
|
|
8055
8500
|
const xHandleEl = refScrollXHandleElem.value;
|
|
8056
8501
|
const yHandleEl = refScrollYHandleElem.value;
|
|
8057
8502
|
const leftScrollElem = getRefElem(elemStore['left-body-scroll']);
|
|
@@ -8062,6 +8507,9 @@ export default defineComponent({
|
|
|
8062
8507
|
if (inWheelScroll || inVirtualScroll || inHeaderScroll || inFooterScroll) {
|
|
8063
8508
|
return;
|
|
8064
8509
|
}
|
|
8510
|
+
if (intoRunScroll) {
|
|
8511
|
+
return;
|
|
8512
|
+
}
|
|
8065
8513
|
if (!bodyScrollElem) {
|
|
8066
8514
|
return;
|
|
8067
8515
|
}
|
|
@@ -8120,22 +8568,16 @@ export default defineComponent({
|
|
|
8120
8568
|
});
|
|
8121
8569
|
},
|
|
8122
8570
|
triggerHeaderScrollEvent(evnt, fixedType) {
|
|
8123
|
-
const { elemStore, inWheelScroll, inVirtualScroll, inBodyScroll, inFooterScroll } = internalData;
|
|
8571
|
+
const { elemStore, intoRunScroll, inWheelScroll, inVirtualScroll, inBodyScroll, inFooterScroll } = internalData;
|
|
8124
8572
|
const yHandleEl = refScrollYHandleElem.value;
|
|
8125
8573
|
const xHandleEl = refScrollXHandleElem.value;
|
|
8126
8574
|
const bodyScrollElem = getRefElem(elemStore['main-body-scroll']);
|
|
8127
8575
|
const headerScrollElem = getRefElem(elemStore['main-header-scroll']);
|
|
8128
8576
|
const footerScrollElem = getRefElem(elemStore['main-footer-scroll']);
|
|
8129
|
-
if (inWheelScroll) {
|
|
8577
|
+
if (inWheelScroll || inVirtualScroll || inBodyScroll || inFooterScroll) {
|
|
8130
8578
|
return;
|
|
8131
8579
|
}
|
|
8132
|
-
if (
|
|
8133
|
-
return;
|
|
8134
|
-
}
|
|
8135
|
-
if (inBodyScroll) {
|
|
8136
|
-
return;
|
|
8137
|
-
}
|
|
8138
|
-
if (inFooterScroll) {
|
|
8580
|
+
if (intoRunScroll) {
|
|
8139
8581
|
return;
|
|
8140
8582
|
}
|
|
8141
8583
|
if (!headerScrollElem) {
|
|
@@ -8162,22 +8604,16 @@ export default defineComponent({
|
|
|
8162
8604
|
});
|
|
8163
8605
|
},
|
|
8164
8606
|
triggerFooterScrollEvent(evnt, fixedType) {
|
|
8165
|
-
const { elemStore, inWheelScroll, inVirtualScroll, inHeaderScroll, inBodyScroll } = internalData;
|
|
8607
|
+
const { elemStore, intoRunScroll, inWheelScroll, inVirtualScroll, inHeaderScroll, inBodyScroll } = internalData;
|
|
8166
8608
|
const yHandleEl = refScrollYHandleElem.value;
|
|
8167
8609
|
const xHandleEl = refScrollXHandleElem.value;
|
|
8168
8610
|
const bodyScrollElem = getRefElem(elemStore['main-body-scroll']);
|
|
8169
8611
|
const headerScrollElem = getRefElem(elemStore['main-header-scroll']);
|
|
8170
8612
|
const footerScrollElem = getRefElem(elemStore['main-footer-scroll']);
|
|
8171
|
-
if (inWheelScroll) {
|
|
8172
|
-
return;
|
|
8173
|
-
}
|
|
8174
|
-
if (inVirtualScroll) {
|
|
8613
|
+
if (inWheelScroll || inVirtualScroll || inHeaderScroll || inBodyScroll) {
|
|
8175
8614
|
return;
|
|
8176
8615
|
}
|
|
8177
|
-
if (
|
|
8178
|
-
return;
|
|
8179
|
-
}
|
|
8180
|
-
if (inBodyScroll) {
|
|
8616
|
+
if (intoRunScroll) {
|
|
8181
8617
|
return;
|
|
8182
8618
|
}
|
|
8183
8619
|
if (!footerScrollElem) {
|
|
@@ -8204,7 +8640,10 @@ export default defineComponent({
|
|
|
8204
8640
|
});
|
|
8205
8641
|
},
|
|
8206
8642
|
triggerBodyWheelEvent(evnt) {
|
|
8207
|
-
const { deltaY, deltaX } = evnt;
|
|
8643
|
+
const { target, deltaY, deltaX } = evnt;
|
|
8644
|
+
if (target && /^textarea$/i.test(target.tagName)) {
|
|
8645
|
+
return;
|
|
8646
|
+
}
|
|
8208
8647
|
const { highlightHoverRow } = tableProps;
|
|
8209
8648
|
const { elemStore, lastScrollTop, lastScrollLeft } = internalData;
|
|
8210
8649
|
const rowOpts = computeRowOpts.value;
|
|
@@ -8222,31 +8661,13 @@ export default defineComponent({
|
|
|
8222
8661
|
if (!bodyScrollElem) {
|
|
8223
8662
|
return;
|
|
8224
8663
|
}
|
|
8225
|
-
|
|
8226
|
-
|
|
8227
|
-
|
|
8228
|
-
}
|
|
8229
|
-
else if (reactData.lastScrollTime + 30 > Date.now()) {
|
|
8230
|
-
multiple = 1.15;
|
|
8231
|
-
}
|
|
8232
|
-
else if (reactData.lastScrollTime + 40 > Date.now()) {
|
|
8233
|
-
multiple = 1.12;
|
|
8234
|
-
}
|
|
8235
|
-
else if (reactData.lastScrollTime + 55 > Date.now()) {
|
|
8236
|
-
multiple = 1.09;
|
|
8237
|
-
}
|
|
8238
|
-
else if (reactData.lastScrollTime + 75 > Date.now()) {
|
|
8239
|
-
multiple = 1.06;
|
|
8240
|
-
}
|
|
8241
|
-
else if (reactData.lastScrollTime + 100 > Date.now()) {
|
|
8242
|
-
multiple = 1.03;
|
|
8243
|
-
}
|
|
8244
|
-
const deltaTop = deltaY * multiple;
|
|
8245
|
-
const deltaLeft = deltaX * multiple;
|
|
8664
|
+
const wheelSpeed = getWheelSpeed(reactData.lastScrollTime);
|
|
8665
|
+
const deltaTop = deltaY * wheelSpeed;
|
|
8666
|
+
const deltaLeft = deltaX * wheelSpeed;
|
|
8246
8667
|
const isTopWheel = deltaTop < 0;
|
|
8247
|
-
const currScrollTop =
|
|
8668
|
+
const currScrollTop = bodyScrollElem.scrollTop;
|
|
8248
8669
|
// 如果滚动位置已经是顶部或底部,则不需要触发
|
|
8249
|
-
if (isTopWheel ? currScrollTop <= 0 : currScrollTop >=
|
|
8670
|
+
if (isTopWheel ? currScrollTop <= 0 : currScrollTop >= bodyScrollElem.scrollHeight - bodyScrollElem.clientHeight) {
|
|
8250
8671
|
return;
|
|
8251
8672
|
}
|
|
8252
8673
|
const scrollTop = bodyScrollElem.scrollTop + deltaTop;
|
|
@@ -8259,16 +8680,29 @@ export default defineComponent({
|
|
|
8259
8680
|
if (rowOpts.isHover || highlightHoverRow) {
|
|
8260
8681
|
$xeTable.clearHoverRow();
|
|
8261
8682
|
}
|
|
8262
|
-
|
|
8263
|
-
|
|
8264
|
-
|
|
8265
|
-
|
|
8266
|
-
|
|
8267
|
-
|
|
8268
|
-
|
|
8269
|
-
|
|
8270
|
-
|
|
8683
|
+
wheelScrollTo(scrollTop - bodyScrollElem.scrollTop, (offsetTop) => {
|
|
8684
|
+
const currTopNum = bodyScrollElem.scrollTop + offsetTop;
|
|
8685
|
+
internalData.inWheelScroll = true;
|
|
8686
|
+
setScrollTop(yHandleEl, currTopNum);
|
|
8687
|
+
setScrollTop(bodyScrollElem, currTopNum);
|
|
8688
|
+
setScrollTop(leftScrollElem, currTopNum);
|
|
8689
|
+
setScrollTop(rightScrollElem, currTopNum);
|
|
8690
|
+
$xeTable.triggerScrollYEvent(evnt);
|
|
8691
|
+
$xeTable.handleScrollEvent(evnt, isRollY, isRollX, currTopNum, scrollLeft, {
|
|
8692
|
+
type: 'table',
|
|
8693
|
+
fixed: ''
|
|
8694
|
+
});
|
|
8271
8695
|
});
|
|
8696
|
+
// internalData.inWheelScroll = true
|
|
8697
|
+
// setScrollTop(yHandleEl, scrollTop)
|
|
8698
|
+
// setScrollTop(bodyScrollElem, scrollTop)
|
|
8699
|
+
// setScrollTop(leftScrollElem, scrollTop)
|
|
8700
|
+
// setScrollTop(rightScrollElem, scrollTop)
|
|
8701
|
+
// loadScrollYData(scrollTop)
|
|
8702
|
+
// $xeTable.handleScrollEvent(evnt, isRollY, isRollX, scrollTop, scrollLeft, {
|
|
8703
|
+
// type: 'footer',
|
|
8704
|
+
// fixed: ''
|
|
8705
|
+
// })
|
|
8272
8706
|
}
|
|
8273
8707
|
},
|
|
8274
8708
|
triggerVirtualScrollXEvent(evnt) {
|
|
@@ -8405,35 +8839,34 @@ export default defineComponent({
|
|
|
8405
8839
|
},
|
|
8406
8840
|
// 更新纵向 Y 可视渲染上下剩余空间大小
|
|
8407
8841
|
updateScrollYSpace() {
|
|
8408
|
-
const {
|
|
8409
|
-
const {
|
|
8410
|
-
const { scrollYStore, elemStore, afterFullData, fullAllDataRowIdData } = internalData;
|
|
8842
|
+
const { isAllOverflow, scrollYLoad } = reactData;
|
|
8843
|
+
const { scrollYStore, elemStore, isResizeCellHeight, afterFullData, fullAllDataRowIdData } = internalData;
|
|
8411
8844
|
const { startIndex } = scrollYStore;
|
|
8845
|
+
const rowOpts = computeRowOpts.value;
|
|
8846
|
+
const cellOpts = computeCellOpts.value;
|
|
8847
|
+
const defaultRowHeight = computeDefaultRowHeight.value;
|
|
8412
8848
|
const bodyTableElem = getRefElem(elemStore['main-body-table']);
|
|
8413
8849
|
const containerList = ['main', 'left', 'right'];
|
|
8414
8850
|
let topSpaceHeight = 0;
|
|
8415
8851
|
let ySpaceHeight = 0;
|
|
8416
8852
|
if (scrollYLoad) {
|
|
8417
|
-
|
|
8418
|
-
|
|
8419
|
-
|
|
8853
|
+
const isCustomCellHeight = isResizeCellHeight || cellOpts.height || rowOpts.height;
|
|
8854
|
+
if (!isCustomCellHeight && isAllOverflow) {
|
|
8855
|
+
ySpaceHeight = afterFullData.length * defaultRowHeight;
|
|
8856
|
+
topSpaceHeight = Math.max(0, startIndex * defaultRowHeight);
|
|
8420
8857
|
}
|
|
8421
8858
|
else {
|
|
8422
8859
|
for (let i = 0; i < afterFullData.length; i++) {
|
|
8423
8860
|
const row = afterFullData[i];
|
|
8424
8861
|
const rowid = getRowid($xeTable, row);
|
|
8425
|
-
const rowRest = fullAllDataRowIdData[rowid];
|
|
8426
|
-
|
|
8427
|
-
ySpaceHeight += rowRest.height || rowHeight;
|
|
8428
|
-
}
|
|
8862
|
+
const rowRest = fullAllDataRowIdData[rowid] || {};
|
|
8863
|
+
ySpaceHeight += rowRest.resizeHeight || cellOpts.height || rowOpts.height || rowRest.height || defaultRowHeight;
|
|
8429
8864
|
}
|
|
8430
8865
|
for (let i = 0; i < startIndex; i++) {
|
|
8431
8866
|
const row = afterFullData[i];
|
|
8432
8867
|
const rowid = getRowid($xeTable, row);
|
|
8433
|
-
const rowRest = fullAllDataRowIdData[rowid];
|
|
8434
|
-
|
|
8435
|
-
topSpaceHeight += rowRest.height || rowHeight;
|
|
8436
|
-
}
|
|
8868
|
+
const rowRest = fullAllDataRowIdData[rowid] || {};
|
|
8869
|
+
topSpaceHeight += rowRest.resizeHeight || cellOpts.height || rowOpts.height || rowRest.height || defaultRowHeight;
|
|
8437
8870
|
}
|
|
8438
8871
|
}
|
|
8439
8872
|
}
|
|
@@ -8459,17 +8892,17 @@ export default defineComponent({
|
|
|
8459
8892
|
if (scrollYSpaceEl) {
|
|
8460
8893
|
scrollYSpaceEl.style.height = ySpaceHeight ? `${ySpaceHeight}px` : '';
|
|
8461
8894
|
}
|
|
8462
|
-
nextTick(() => {
|
|
8895
|
+
return nextTick().then(() => {
|
|
8463
8896
|
updateStyle();
|
|
8464
8897
|
});
|
|
8465
8898
|
},
|
|
8466
8899
|
updateScrollXData() {
|
|
8467
|
-
const {
|
|
8900
|
+
const { isAllOverflow } = reactData;
|
|
8468
8901
|
handleTableColumn();
|
|
8469
8902
|
return nextTick().then(() => {
|
|
8470
8903
|
handleTableColumn();
|
|
8471
8904
|
$xeTable.updateScrollXSpace();
|
|
8472
|
-
if (!
|
|
8905
|
+
if (!isAllOverflow) {
|
|
8473
8906
|
$xeTable.updateScrollYSpace();
|
|
8474
8907
|
}
|
|
8475
8908
|
});
|
|
@@ -8827,10 +9260,11 @@ export default defineComponent({
|
|
|
8827
9260
|
};
|
|
8828
9261
|
const renderVN = () => {
|
|
8829
9262
|
const { loading, stripe, showHeader, height, treeConfig, mouseConfig, showFooter, highlightCell, highlightHoverRow, highlightHoverColumn, editConfig, editRules } = props;
|
|
8830
|
-
const {
|
|
9263
|
+
const { isGroup, overflowX, overflowY, scrollXLoad, scrollYLoad, tableData, initStore, columnStore, filterStore, customStore } = reactData;
|
|
8831
9264
|
const { leftList, rightList } = columnStore;
|
|
8832
9265
|
const loadingSlot = slots.loading;
|
|
8833
|
-
const
|
|
9266
|
+
const tableTipConfig = computeTableTipConfig.value;
|
|
9267
|
+
const validTipConfig = computeValidTipConfig.value;
|
|
8834
9268
|
const validOpts = computeValidOpts.value;
|
|
8835
9269
|
const checkboxOpts = computeCheckboxOpts.value;
|
|
8836
9270
|
const treeOpts = computeTreeOpts.value;
|
|
@@ -8842,7 +9276,7 @@ export default defineComponent({
|
|
|
8842
9276
|
const areaOpts = computeAreaOpts.value;
|
|
8843
9277
|
const loadingOpts = computeLoadingOpts.value;
|
|
8844
9278
|
const isMenu = computeIsMenu.value;
|
|
8845
|
-
const currLoading = reactData.
|
|
9279
|
+
const currLoading = reactData.isColLoading || reactData.isRowLoading || loading;
|
|
8846
9280
|
const resizableOpts = computeResizableOpts.value;
|
|
8847
9281
|
const isArea = mouseConfig && mouseOpts.area;
|
|
8848
9282
|
const columnDragOpts = computeColumnDragOpts.value;
|
|
@@ -8863,7 +9297,6 @@ export default defineComponent({
|
|
|
8863
9297
|
'row--highlight': rowOpts.isHover || highlightHoverRow,
|
|
8864
9298
|
'column--highlight': columnOpts.isHover || highlightHoverColumn,
|
|
8865
9299
|
'checkbox--range': checkboxOpts.range,
|
|
8866
|
-
'column--calc': isCalcColumn,
|
|
8867
9300
|
'col--drag-cell': columnOpts.drag && columnDragOpts.trigger === 'cell',
|
|
8868
9301
|
'is--header': showHeader,
|
|
8869
9302
|
'is--footer': showFooter,
|
|
@@ -8872,7 +9305,6 @@ export default defineComponent({
|
|
|
8872
9305
|
'is--fixed-left': leftList.length,
|
|
8873
9306
|
'is--fixed-right': rightList.length,
|
|
8874
9307
|
'is--animat': !!props.animat,
|
|
8875
|
-
'is--padding': props.padding,
|
|
8876
9308
|
'is--round': props.round,
|
|
8877
9309
|
'is--stripe': !treeConfig && stripe,
|
|
8878
9310
|
'is--loading': currLoading,
|
|
@@ -8926,13 +9358,26 @@ export default defineComponent({
|
|
|
8926
9358
|
* 列宽线
|
|
8927
9359
|
*/
|
|
8928
9360
|
h('div', {
|
|
8929
|
-
key: '
|
|
8930
|
-
ref:
|
|
8931
|
-
class: 'vxe-table--resizable-bar'
|
|
9361
|
+
key: 'tcl',
|
|
9362
|
+
ref: refColResizeBar,
|
|
9363
|
+
class: 'vxe-table--resizable-col-bar'
|
|
9364
|
+
}, resizableOpts.showDragTip
|
|
9365
|
+
? [
|
|
9366
|
+
h('div', {
|
|
9367
|
+
class: 'vxe-table--resizable-number-tip'
|
|
9368
|
+
})
|
|
9369
|
+
]
|
|
9370
|
+
: []),
|
|
9371
|
+
/**
|
|
9372
|
+
* 行高线
|
|
9373
|
+
*/
|
|
9374
|
+
h('div', {
|
|
9375
|
+
key: 'trl',
|
|
9376
|
+
ref: refRowResizeBar,
|
|
9377
|
+
class: 'vxe-table--resizable-row-bar'
|
|
8932
9378
|
}, resizableOpts.showDragTip
|
|
8933
9379
|
? [
|
|
8934
9380
|
h('div', {
|
|
8935
|
-
ref: refCellResizeTip,
|
|
8936
9381
|
class: 'vxe-table--resizable-number-tip'
|
|
8937
9382
|
})
|
|
8938
9383
|
]
|
|
@@ -9029,17 +9474,29 @@ export default defineComponent({
|
|
|
9029
9474
|
/**
|
|
9030
9475
|
* 工具提示
|
|
9031
9476
|
*/
|
|
9032
|
-
h(VxeUITooltipComponent,
|
|
9477
|
+
h(VxeUITooltipComponent, {
|
|
9033
9478
|
key: 'btp',
|
|
9034
|
-
ref: refTooltip
|
|
9035
|
-
|
|
9479
|
+
ref: refTooltip,
|
|
9480
|
+
theme: tableTipConfig.theme,
|
|
9481
|
+
enterable: tableTipConfig.enterable,
|
|
9482
|
+
enterDelay: tableTipConfig.enterDelay,
|
|
9483
|
+
leaveDelay: tableTipConfig.leaveDelay
|
|
9484
|
+
}),
|
|
9036
9485
|
/**
|
|
9037
9486
|
* 校验提示
|
|
9038
9487
|
*/
|
|
9039
9488
|
props.editRules && validOpts.showMessage && (validOpts.message === 'default' ? !height : validOpts.message === 'tooltip')
|
|
9040
|
-
? h(VxeUITooltipComponent,
|
|
9489
|
+
? h(VxeUITooltipComponent, {
|
|
9490
|
+
key: 'vtp',
|
|
9491
|
+
ref: refValidTooltip,
|
|
9492
|
+
class: [{
|
|
9041
9493
|
'old-cell-valid': editRules && getConfig().cellVaildMode === 'obsolete'
|
|
9042
|
-
}, 'vxe-table--valid-error']
|
|
9494
|
+
}, 'vxe-table--valid-error'],
|
|
9495
|
+
theme: validTipConfig.theme,
|
|
9496
|
+
enterable: validTipConfig.enterable,
|
|
9497
|
+
enterDelay: validTipConfig.enterDelay,
|
|
9498
|
+
leaveDelay: validTipConfig.leaveDelay
|
|
9499
|
+
})
|
|
9043
9500
|
: renderEmptyElement($xeTable)
|
|
9044
9501
|
])
|
|
9045
9502
|
: renderEmptyElement($xeTable)
|
|
@@ -9058,7 +9515,7 @@ export default defineComponent({
|
|
|
9058
9515
|
if (value && value.length >= 50000) {
|
|
9059
9516
|
warnLog('vxe.error.errLargeData', ['loadData(data), reloadData(data)']);
|
|
9060
9517
|
}
|
|
9061
|
-
loadTableData(value).then(() => {
|
|
9518
|
+
loadTableData(value, true).then(() => {
|
|
9062
9519
|
const { scrollXLoad, scrollYLoad, expandColumn } = reactData;
|
|
9063
9520
|
internalData.inited = true;
|
|
9064
9521
|
internalData.initStatus = true;
|
|
@@ -9149,10 +9606,10 @@ export default defineComponent({
|
|
|
9149
9606
|
});
|
|
9150
9607
|
watch(() => props.syncResize, (value) => {
|
|
9151
9608
|
if (value) {
|
|
9152
|
-
|
|
9609
|
+
handleUpdateResize();
|
|
9153
9610
|
nextTick(() => {
|
|
9154
|
-
|
|
9155
|
-
setTimeout(() =>
|
|
9611
|
+
handleUpdateResize();
|
|
9612
|
+
setTimeout(() => handleUpdateResize());
|
|
9156
9613
|
});
|
|
9157
9614
|
}
|
|
9158
9615
|
});
|
|
@@ -9252,6 +9709,9 @@ export default defineComponent({
|
|
|
9252
9709
|
if (props.showFooter && !(props.footerMethod || props.footerData)) {
|
|
9253
9710
|
warnLog('vxe.error.reqProp', ['footer-data | footer-method']);
|
|
9254
9711
|
}
|
|
9712
|
+
if (rowOpts.height) {
|
|
9713
|
+
warnLog('vxe.error.delProp', ['row-config.height', 'cell-config.height']);
|
|
9714
|
+
}
|
|
9255
9715
|
// if (props.highlightCurrentRow) {
|
|
9256
9716
|
// warnLog('vxe.error.delProp', ['highlight-current-row', 'row-config.isCurrent'])
|
|
9257
9717
|
// }
|
|
@@ -9359,7 +9819,7 @@ export default defineComponent({
|
|
|
9359
9819
|
endIndex: 0,
|
|
9360
9820
|
visibleSize: 0
|
|
9361
9821
|
});
|
|
9362
|
-
loadTableData(data || []).then(() => {
|
|
9822
|
+
loadTableData(data || [], true).then(() => {
|
|
9363
9823
|
if (data && data.length) {
|
|
9364
9824
|
internalData.inited = true;
|
|
9365
9825
|
internalData.initStatus = true;
|