vxe-table 3.12.10-beta.8 → 3.12.10
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/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/mixin.js +7 -7
- package/es/table/module/export/mixin.js +105 -69
- package/es/table/module/keyboard/mixin.js +68 -25
- package/es/table/module/menu/mixin.js +3 -1
- package/es/table/src/body.js +135 -83
- package/es/table/src/cell.js +43 -57
- package/es/table/src/column.js +43 -8
- package/es/table/src/columnInfo.js +3 -0
- package/es/table/src/footer.js +50 -9
- package/es/table/src/header.js +70 -168
- package/es/table/src/methods.js +985 -502
- package/es/table/src/props.js +14 -4
- package/es/table/src/table.js +114 -33
- package/es/table/src/util.js +73 -57
- package/es/table/style.css +253 -189
- package/es/table/style.min.css +1 -1
- package/es/ui/index.js +26 -10
- package/es/ui/src/log.js +1 -1
- package/es/vxe-table/style.css +253 -189
- package/es/vxe-table/style.min.css +1 -1
- package/lib/index.css +1 -1
- package/lib/index.min.css +1 -1
- package/lib/index.umd.js +1782 -1056
- 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-CHT.umd.js +2 -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/mixin.js +7 -2
- package/lib/table/module/edit/mixin.min.js +1 -1
- package/lib/table/module/export/mixin.js +105 -64
- package/lib/table/module/export/mixin.min.js +1 -1
- package/lib/table/module/keyboard/mixin.js +73 -27
- package/lib/table/module/keyboard/mixin.min.js +1 -1
- package/lib/table/module/menu/mixin.js +3 -1
- package/lib/table/src/body.js +132 -79
- 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 +12 -0
- 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/footer.js +46 -7
- package/lib/table/src/footer.min.js +1 -1
- package/lib/table/src/header.js +52 -175
- package/lib/table/src/header.min.js +1 -1
- package/lib/table/src/methods.js +1096 -560
- package/lib/table/src/methods.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 +113 -36
- package/lib/table/src/table.min.js +1 -1
- package/lib/table/src/util.js +87 -70
- package/lib/table/src/util.min.js +1 -1
- package/lib/table/style/style.css +253 -189
- package/lib/table/style/style.min.css +1 -1
- package/lib/ui/index.js +26 -10
- 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 +253 -189
- package/lib/vxe-table/style/style.min.css +1 -1
- package/package.json +2 -2
- 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/mixin.ts +7 -7
- package/packages/table/module/export/mixin.ts +138 -80
- package/packages/table/module/keyboard/mixin.ts +65 -24
- package/packages/table/module/menu/mixin.ts +4 -1
- package/packages/table/src/body.ts +148 -86
- package/packages/table/src/cell.ts +45 -67
- package/packages/table/src/column.ts +48 -10
- package/packages/table/src/columnInfo.ts +3 -0
- package/packages/table/src/footer.ts +53 -10
- package/packages/table/src/header.ts +70 -169
- package/packages/table/src/methods.ts +1031 -515
- package/packages/table/src/props.ts +16 -6
- package/packages/table/src/table.ts +124 -33
- package/packages/table/src/util.ts +82 -62
- package/packages/ui/index.ts +25 -9
- package/styles/components/table.scss +319 -271
- 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 -0
- /package/es/{iconfont.1736840896964.ttf → iconfont.1738985837413.ttf} +0 -0
- /package/es/{iconfont.1736840896964.woff → iconfont.1738985837413.woff} +0 -0
- /package/es/{iconfont.1736840896964.woff2 → iconfont.1738985837413.woff2} +0 -0
- /package/lib/{iconfont.1736840896964.ttf → iconfont.1738985837413.ttf} +0 -0
- /package/lib/{iconfont.1736840896964.woff → iconfont.1738985837413.woff} +0 -0
- /package/lib/{iconfont.1736840896964.woff2 → iconfont.1738985837413.woff2} +0 -0
package/lib/table/src/methods.js
CHANGED
|
@@ -392,6 +392,7 @@ function updateAfterListIndex($xeTable) {
|
|
|
392
392
|
parent: null,
|
|
393
393
|
level: 0,
|
|
394
394
|
height: 0,
|
|
395
|
+
resizeHeight: 0,
|
|
395
396
|
oTop: 0
|
|
396
397
|
};
|
|
397
398
|
fullAllDataRowIdData[rowid] = rest;
|
|
@@ -443,6 +444,7 @@ function updateAfterDataIndex($xeTable) {
|
|
|
443
444
|
parent: null,
|
|
444
445
|
level: 0,
|
|
445
446
|
height: 0,
|
|
447
|
+
resizeHeight: 0,
|
|
446
448
|
oTop: 0
|
|
447
449
|
};
|
|
448
450
|
fullAllDataRowIdData[rowid] = rest;
|
|
@@ -506,7 +508,6 @@ function updateStyle($xeTable) {
|
|
|
506
508
|
const internalData = $xeTable;
|
|
507
509
|
const {
|
|
508
510
|
border,
|
|
509
|
-
showOverflow: allColumnOverflow,
|
|
510
511
|
showHeaderOverflow: allColumnHeaderOverflow,
|
|
511
512
|
showFooterOverflow: allColumnFooterOverflow,
|
|
512
513
|
mouseConfig,
|
|
@@ -519,7 +520,9 @@ function updateStyle($xeTable) {
|
|
|
519
520
|
tableColumn,
|
|
520
521
|
scrollXLoad,
|
|
521
522
|
scrollYLoad,
|
|
523
|
+
overflowX,
|
|
522
524
|
scrollbarWidth,
|
|
525
|
+
overflowY,
|
|
523
526
|
scrollbarHeight,
|
|
524
527
|
columnStore,
|
|
525
528
|
editStore,
|
|
@@ -543,6 +546,8 @@ function updateStyle($xeTable) {
|
|
|
543
546
|
return;
|
|
544
547
|
}
|
|
545
548
|
const containerList = ['main', 'left', 'right'];
|
|
549
|
+
const osbWidth = overflowY ? scrollbarWidth : 0;
|
|
550
|
+
const osbHeight = overflowX ? scrollbarHeight : 0;
|
|
546
551
|
const emptyPlaceholderElem = $xeTable.$refs.refEmptyPlaceholder;
|
|
547
552
|
const cellOffsetWidth = $xeTable.computeCellOffsetWidth;
|
|
548
553
|
const mouseOpts = $xeTable.computeMouseOpts;
|
|
@@ -550,16 +555,16 @@ function updateStyle($xeTable) {
|
|
|
550
555
|
const bodyTableElem = (0, _util.getRefElem)(elemStore['main-body-table']);
|
|
551
556
|
if (emptyPlaceholderElem) {
|
|
552
557
|
emptyPlaceholderElem.style.top = `${headerHeight}px`;
|
|
553
|
-
emptyPlaceholderElem.style.height = bodyWrapperElem ? `${bodyWrapperElem.offsetHeight -
|
|
558
|
+
emptyPlaceholderElem.style.height = bodyWrapperElem ? `${bodyWrapperElem.offsetHeight - osbHeight}px` : '';
|
|
554
559
|
}
|
|
555
560
|
let bodyHeight = 0;
|
|
556
561
|
let bodyMaxHeight = 0;
|
|
557
|
-
const bodyMinHeight = customMinHeight - headerHeight - footerHeight -
|
|
562
|
+
const bodyMinHeight = customMinHeight - headerHeight - footerHeight - osbHeight;
|
|
558
563
|
if (customMaxHeight) {
|
|
559
|
-
bodyMaxHeight = Math.max(bodyMinHeight, customMaxHeight - headerHeight - footerHeight -
|
|
564
|
+
bodyMaxHeight = Math.max(bodyMinHeight, customMaxHeight - headerHeight - footerHeight - osbHeight);
|
|
560
565
|
}
|
|
561
566
|
if (customHeight) {
|
|
562
|
-
bodyHeight = customHeight - headerHeight - footerHeight -
|
|
567
|
+
bodyHeight = customHeight - headerHeight - footerHeight - osbHeight;
|
|
563
568
|
}
|
|
564
569
|
if (!bodyHeight) {
|
|
565
570
|
if (bodyTableElem) {
|
|
@@ -577,27 +582,27 @@ function updateStyle($xeTable) {
|
|
|
577
582
|
const scrollbarXToTop = $xeTable.computeScrollbarXToTop;
|
|
578
583
|
const scrollXVirtualEl = $xeTable.$refs.refScrollXVirtualElem;
|
|
579
584
|
if (scrollXVirtualEl) {
|
|
580
|
-
scrollXVirtualEl.style.height = `${
|
|
581
|
-
scrollXVirtualEl.style.visibility =
|
|
585
|
+
scrollXVirtualEl.style.height = `${osbHeight}px`;
|
|
586
|
+
scrollXVirtualEl.style.visibility = overflowX ? 'visible' : 'hidden';
|
|
582
587
|
}
|
|
583
588
|
const xWrapperEl = $xeTable.$refs.refScrollXWrapperElem;
|
|
584
589
|
if (xWrapperEl) {
|
|
585
|
-
xWrapperEl.style.left = scrollbarXToTop ? `${
|
|
586
|
-
xWrapperEl.style.width = `${el.clientWidth -
|
|
590
|
+
xWrapperEl.style.left = scrollbarXToTop ? `${osbWidth}px` : '';
|
|
591
|
+
xWrapperEl.style.width = `${el.clientWidth - osbWidth}px`;
|
|
587
592
|
}
|
|
588
593
|
if (xLeftCornerEl) {
|
|
589
|
-
xLeftCornerEl.style.width = scrollbarXToTop ? `${
|
|
590
|
-
xLeftCornerEl.style.display = scrollbarXToTop ?
|
|
594
|
+
xLeftCornerEl.style.width = scrollbarXToTop ? `${osbWidth}px` : '';
|
|
595
|
+
xLeftCornerEl.style.display = scrollbarXToTop ? osbWidth && osbHeight ? 'block' : '' : '';
|
|
591
596
|
}
|
|
592
597
|
if (xRightCornerEl) {
|
|
593
|
-
xRightCornerEl.style.width = scrollbarXToTop ? '' : `${
|
|
594
|
-
xRightCornerEl.style.display = scrollbarXToTop ? '' :
|
|
598
|
+
xRightCornerEl.style.width = scrollbarXToTop ? '' : `${osbWidth}px`;
|
|
599
|
+
xRightCornerEl.style.display = scrollbarXToTop ? '' : osbWidth && osbHeight ? 'block' : '';
|
|
595
600
|
}
|
|
596
601
|
const scrollYVirtualEl = $xeTable.$refs.refScrollYVirtualElem;
|
|
597
602
|
if (scrollYVirtualEl) {
|
|
598
|
-
scrollYVirtualEl.style.width = `${
|
|
603
|
+
scrollYVirtualEl.style.width = `${osbWidth}px`;
|
|
599
604
|
scrollYVirtualEl.style.height = `${bodyHeight + headerHeight + footerHeight}px`;
|
|
600
|
-
scrollYVirtualEl.style.visibility =
|
|
605
|
+
scrollYVirtualEl.style.visibility = overflowY ? 'visible' : 'hidden';
|
|
601
606
|
}
|
|
602
607
|
const yTopCornerEl = $xeTable.$refs.refScrollYTopCornerElem;
|
|
603
608
|
if (yTopCornerEl) {
|
|
@@ -716,14 +721,14 @@ function updateStyle($xeTable) {
|
|
|
716
721
|
if (wrapperElem) {
|
|
717
722
|
wrapperElem.style.top = `${headerHeight}px`;
|
|
718
723
|
}
|
|
719
|
-
fixedWrapperElem.style.height = `${customHeight > 0 ? customHeight : tableHeight + headerHeight + footerHeight +
|
|
724
|
+
fixedWrapperElem.style.height = `${customHeight > 0 ? customHeight : tableHeight + headerHeight + footerHeight + osbHeight}px`;
|
|
720
725
|
fixedWrapperElem.style.width = `${fixedColumn.reduce((previous, column) => previous + column.renderWidth, 0)}px`;
|
|
721
726
|
}
|
|
722
727
|
let tWidth = tableWidth;
|
|
723
728
|
let renderColumnList = tableColumn;
|
|
724
729
|
let isOptimizeMode = false;
|
|
725
730
|
// 如果是使用优化模式
|
|
726
|
-
if (scrollXLoad || scrollYLoad ||
|
|
731
|
+
if (scrollXLoad || scrollYLoad || isAllOverflow) {
|
|
727
732
|
if (expandColumn || spanMethod || footerSpanMethod) {
|
|
728
733
|
// 如果不支持优化模式
|
|
729
734
|
} else {
|
|
@@ -745,7 +750,7 @@ function updateStyle($xeTable) {
|
|
|
745
750
|
if (tableElem) {
|
|
746
751
|
tableElem.style.width = tWidth ? `${tWidth}px` : '';
|
|
747
752
|
// 兼容性处理
|
|
748
|
-
tableElem.style.paddingRight =
|
|
753
|
+
tableElem.style.paddingRight = osbWidth && fixedType && (_dom.browse['-moz'] || _dom.browse.safari) ? `${osbWidth}px` : '';
|
|
749
754
|
}
|
|
750
755
|
const emptyBlockElem = (0, _util.getRefElem)(elemStore[`${name}-${layout}-emptyBlock`]);
|
|
751
756
|
if (emptyBlockElem) {
|
|
@@ -780,7 +785,7 @@ function updateStyle($xeTable) {
|
|
|
780
785
|
// 如果是固定列
|
|
781
786
|
if (fixedWrapperElem) {
|
|
782
787
|
if (wrapperElem) {
|
|
783
|
-
wrapperElem.style.top = `${customHeight > 0 ? customHeight - footerHeight -
|
|
788
|
+
wrapperElem.style.top = `${customHeight > 0 ? customHeight - footerHeight - osbHeight : tableHeight + headerHeight}px`;
|
|
784
789
|
}
|
|
785
790
|
}
|
|
786
791
|
}
|
|
@@ -807,7 +812,7 @@ function updateStyle($xeTable) {
|
|
|
807
812
|
} else if (layout === 'footer') {
|
|
808
813
|
cellOverflow = _xeUtils.default.isUndefined(showFooterOverflow) || _xeUtils.default.isNull(showFooterOverflow) ? allColumnFooterOverflow : showFooterOverflow;
|
|
809
814
|
} else {
|
|
810
|
-
cellOverflow = _xeUtils.default.isUndefined(showOverflow) || _xeUtils.default.isNull(showOverflow) ?
|
|
815
|
+
cellOverflow = _xeUtils.default.isUndefined(showOverflow) || _xeUtils.default.isNull(showOverflow) ? isAllOverflow : showOverflow;
|
|
811
816
|
}
|
|
812
817
|
const showEllipsis = cellOverflow === 'ellipsis';
|
|
813
818
|
const showTitle = cellOverflow === 'title';
|
|
@@ -851,62 +856,69 @@ function updateStyle($xeTable) {
|
|
|
851
856
|
return $xeTable.$nextTick();
|
|
852
857
|
}
|
|
853
858
|
function computeRowHeight($xeTable) {
|
|
859
|
+
const reactData = $xeTable;
|
|
860
|
+
const {
|
|
861
|
+
isAllOverflow
|
|
862
|
+
} = reactData;
|
|
854
863
|
const tableHeader = $xeTable.$refs.refTableHeader;
|
|
855
864
|
const tableBody = $xeTable.$refs.refTableBody;
|
|
856
865
|
const tableBodyElem = tableBody ? tableBody.$el : null;
|
|
857
866
|
const defaultRowHeight = $xeTable.computeDefaultRowHeight;
|
|
858
867
|
let rowHeight = 0;
|
|
859
|
-
if (
|
|
860
|
-
|
|
861
|
-
|
|
862
|
-
|
|
863
|
-
|
|
864
|
-
firstTrElem
|
|
868
|
+
if (isAllOverflow) {
|
|
869
|
+
if (tableBodyElem) {
|
|
870
|
+
const tableHeaderElem = tableHeader ? tableHeader.$el : null;
|
|
871
|
+
let firstTrElem;
|
|
872
|
+
firstTrElem = tableBodyElem.querySelector('tr');
|
|
873
|
+
if (!firstTrElem && tableHeaderElem) {
|
|
874
|
+
firstTrElem = tableHeaderElem.querySelector('tr');
|
|
875
|
+
}
|
|
876
|
+
if (firstTrElem) {
|
|
877
|
+
rowHeight = firstTrElem.clientHeight;
|
|
878
|
+
}
|
|
865
879
|
}
|
|
866
|
-
if (
|
|
867
|
-
rowHeight =
|
|
880
|
+
if (!rowHeight) {
|
|
881
|
+
rowHeight = defaultRowHeight;
|
|
868
882
|
}
|
|
869
|
-
}
|
|
870
|
-
if (!rowHeight) {
|
|
883
|
+
} else {
|
|
871
884
|
rowHeight = defaultRowHeight;
|
|
872
885
|
}
|
|
873
886
|
// 最低支持 18px 行高
|
|
874
887
|
return Math.max(18, rowHeight);
|
|
875
888
|
}
|
|
876
|
-
function handleVirtualYVisible($xeTable) {
|
|
877
|
-
const props = $xeTable;
|
|
889
|
+
function handleVirtualYVisible($xeTable, currScrollTop) {
|
|
878
890
|
const reactData = $xeTable;
|
|
879
891
|
const internalData = $xeTable;
|
|
880
892
|
const {
|
|
881
|
-
|
|
882
|
-
} = props;
|
|
883
|
-
const {
|
|
884
|
-
rowHeight
|
|
893
|
+
isAllOverflow
|
|
885
894
|
} = reactData;
|
|
886
895
|
const {
|
|
887
896
|
elemStore,
|
|
897
|
+
isResizeCellHeight,
|
|
888
898
|
afterFullData,
|
|
889
899
|
fullAllDataRowIdData
|
|
890
900
|
} = internalData;
|
|
901
|
+
const rowOpts = $xeTable.computeRowOpts;
|
|
902
|
+
const cellOpts = $xeTable.computeCellOpts;
|
|
903
|
+
const defaultRowHeight = $xeTable.computeDefaultRowHeight;
|
|
891
904
|
const bodyScrollElem = (0, _util.getRefElem)(elemStore['main-body-scroll']);
|
|
892
905
|
if (bodyScrollElem) {
|
|
893
|
-
const
|
|
894
|
-
|
|
895
|
-
clientHeight
|
|
896
|
-
} = bodyScrollElem;
|
|
906
|
+
const clientHeight = bodyScrollElem.clientHeight;
|
|
907
|
+
const scrollTop = _xeUtils.default.isNumber(currScrollTop) ? currScrollTop : bodyScrollElem.scrollTop;
|
|
897
908
|
const endHeight = scrollTop + clientHeight;
|
|
898
909
|
let toVisibleIndex = -1;
|
|
899
910
|
let offsetTop = 0;
|
|
900
911
|
let visibleSize = 0;
|
|
901
|
-
|
|
902
|
-
|
|
903
|
-
|
|
912
|
+
const isCustomCellHeight = isResizeCellHeight || cellOpts.height || rowOpts.height;
|
|
913
|
+
if (!isCustomCellHeight && isAllOverflow) {
|
|
914
|
+
toVisibleIndex = Math.floor(scrollTop / defaultRowHeight);
|
|
915
|
+
visibleSize = Math.ceil(clientHeight / defaultRowHeight) + 1;
|
|
904
916
|
} else {
|
|
905
917
|
for (let rIndex = 0, rLen = afterFullData.length; rIndex < rLen; rIndex++) {
|
|
906
918
|
const row = afterFullData[rIndex];
|
|
907
919
|
const rowid = (0, _util.getRowid)($xeTable, row);
|
|
908
|
-
const rowRest = fullAllDataRowIdData[rowid];
|
|
909
|
-
offsetTop += rowRest
|
|
920
|
+
const rowRest = fullAllDataRowIdData[rowid] || {};
|
|
921
|
+
offsetTop += rowRest.resizeHeight || rowRest.height || cellOpts.height || rowOpts.height || defaultRowHeight;
|
|
910
922
|
if (toVisibleIndex === -1 && scrollTop < offsetTop) {
|
|
911
923
|
toVisibleIndex = rIndex;
|
|
912
924
|
}
|
|
@@ -1194,7 +1206,7 @@ function autoCellWidth($xeTable) {
|
|
|
1194
1206
|
}
|
|
1195
1207
|
const tableHeight = bodyElem.offsetHeight;
|
|
1196
1208
|
const overflowY = yHandleEl.scrollHeight > yHandleEl.clientHeight;
|
|
1197
|
-
reactData.scrollbarWidth =
|
|
1209
|
+
reactData.scrollbarWidth = Math.max(scrollbarOpts.width || 0, yHandleEl.offsetWidth - yHandleEl.clientWidth);
|
|
1198
1210
|
reactData.overflowY = overflowY;
|
|
1199
1211
|
internalData.tableWidth = tableWidth;
|
|
1200
1212
|
internalData.tableHeight = tableHeight;
|
|
@@ -1203,7 +1215,7 @@ function autoCellWidth($xeTable) {
|
|
|
1203
1215
|
const headerHeight = headerTableElem ? headerTableElem.clientHeight : 0;
|
|
1204
1216
|
const overflowX = tableWidth > bodyWidth;
|
|
1205
1217
|
const footerHeight = footerTableElem ? footerTableElem.clientHeight : 0;
|
|
1206
|
-
reactData.scrollbarHeight =
|
|
1218
|
+
reactData.scrollbarHeight = Math.max(scrollbarOpts.height || 0, xHandleEl.offsetHeight - xHandleEl.clientHeight);
|
|
1207
1219
|
internalData.headerHeight = headerHeight;
|
|
1208
1220
|
internalData.footerHeight = footerHeight;
|
|
1209
1221
|
reactData.overflowX = overflowX;
|
|
@@ -1213,68 +1225,43 @@ function autoCellWidth($xeTable) {
|
|
|
1213
1225
|
$xeTable.checkScrolling();
|
|
1214
1226
|
}
|
|
1215
1227
|
}
|
|
1216
|
-
|
|
1217
|
-
|
|
1218
|
-
|
|
1219
|
-
|
|
1220
|
-
|
|
1221
|
-
|
|
1222
|
-
|
|
1223
|
-
|
|
1224
|
-
|
|
1225
|
-
|
|
1226
|
-
|
|
1227
|
-
|
|
1228
|
-
// }, 80)
|
|
1229
|
-
// }
|
|
1228
|
+
const calcCellAutoHeight = (rowRest, wrapperEl) => {
|
|
1229
|
+
const cellElemList = wrapperEl.querySelectorAll(`.vxe-cell--wrapper[rowid="${rowRest.rowid}"]`);
|
|
1230
|
+
let colHeight = rowRest.height;
|
|
1231
|
+
for (let i = 0; i < cellElemList.length; i++) {
|
|
1232
|
+
const cellElem = cellElemList[i];
|
|
1233
|
+
const tdEl = cellElem.parentElement;
|
|
1234
|
+
const topBottomPadding = Math.ceil(_xeUtils.default.toNumber(tdEl.style.paddingTop) + _xeUtils.default.toNumber(tdEl.style.paddingBottom));
|
|
1235
|
+
const cellHeight = cellElem ? cellElem.clientHeight : 0;
|
|
1236
|
+
colHeight = Math.max(colHeight - topBottomPadding, Math.ceil(cellHeight));
|
|
1237
|
+
}
|
|
1238
|
+
return colHeight;
|
|
1239
|
+
};
|
|
1230
1240
|
const calcCellHeight = $xeTable => {
|
|
1231
|
-
const props = $xeTable;
|
|
1232
1241
|
const reactData = $xeTable;
|
|
1233
1242
|
const internalData = $xeTable;
|
|
1234
|
-
const {
|
|
1235
|
-
showOverflow
|
|
1236
|
-
} = props;
|
|
1237
1243
|
const {
|
|
1238
1244
|
tableData,
|
|
1245
|
+
isAllOverflow,
|
|
1246
|
+
scrollYLoad,
|
|
1239
1247
|
scrollXLoad
|
|
1240
1248
|
} = reactData;
|
|
1241
1249
|
const {
|
|
1242
1250
|
fullAllDataRowIdData
|
|
1243
1251
|
} = internalData;
|
|
1252
|
+
const defaultRowHeight = $xeTable.computeDefaultRowHeight;
|
|
1244
1253
|
const el = $xeTable.$refs.refElem;
|
|
1245
|
-
if (!
|
|
1246
|
-
let paddingTop = 0;
|
|
1247
|
-
let paddingBottom = 0;
|
|
1248
|
-
let calcPadding = false;
|
|
1254
|
+
if (!isAllOverflow && scrollYLoad && el) {
|
|
1249
1255
|
tableData.forEach(row => {
|
|
1250
1256
|
const rowid = (0, _util.getRowid)($xeTable, row);
|
|
1251
1257
|
const rowRest = fullAllDataRowIdData[rowid];
|
|
1252
|
-
|
|
1253
|
-
|
|
1254
|
-
|
|
1255
|
-
for (let i = 0; i < cellList.length; i++) {
|
|
1256
|
-
const cellElem = cellList[i];
|
|
1257
|
-
const tdEl = cellElem.parentElement;
|
|
1258
|
-
if (!tdEl || !tdEl.clientWidth) {
|
|
1259
|
-
break;
|
|
1260
|
-
}
|
|
1261
|
-
if (!calcPadding) {
|
|
1262
|
-
paddingTop = _xeUtils.default.toNumber(getComputedStyle(tdEl).paddingTop);
|
|
1263
|
-
paddingBottom = _xeUtils.default.toNumber(getComputedStyle(tdEl).paddingBottom);
|
|
1264
|
-
calcPadding = true;
|
|
1265
|
-
}
|
|
1266
|
-
let cellHeight = paddingTop + paddingBottom;
|
|
1267
|
-
if (cellElem) {
|
|
1268
|
-
cellHeight += cellElem.clientHeight;
|
|
1269
|
-
}
|
|
1270
|
-
height = Math.max(height, cellHeight);
|
|
1271
|
-
}
|
|
1272
|
-
rowRest.height = scrollXLoad ? Math.max(rowRest.height, height) : height;
|
|
1258
|
+
if (rowRest) {
|
|
1259
|
+
const height = calcCellAutoHeight(rowRest, el);
|
|
1260
|
+
rowRest.height = Math.max(defaultRowHeight, scrollXLoad ? Math.max(rowRest.height, height) : height);
|
|
1273
1261
|
}
|
|
1274
1262
|
});
|
|
1275
|
-
reactData.
|
|
1263
|
+
reactData.calcCellHeightFlag++;
|
|
1276
1264
|
}
|
|
1277
|
-
// updateCellOffset()
|
|
1278
1265
|
};
|
|
1279
1266
|
function getOrderField(_vm, column) {
|
|
1280
1267
|
const {
|
|
@@ -1301,6 +1288,18 @@ function getOrderField(_vm, column) {
|
|
|
1301
1288
|
return cellValue;
|
|
1302
1289
|
};
|
|
1303
1290
|
}
|
|
1291
|
+
function handleTargetEnterEvent($xeTable, isClear) {
|
|
1292
|
+
const internalData = $xeTable;
|
|
1293
|
+
const $tooltip = $xeTable.$refs.refTooltip;
|
|
1294
|
+
clearTimeout(internalData.tooltipTimeout);
|
|
1295
|
+
if (isClear) {
|
|
1296
|
+
$xeTable.closeTooltip();
|
|
1297
|
+
} else {
|
|
1298
|
+
if ($tooltip && $tooltip.setActived) {
|
|
1299
|
+
$tooltip.setActived(true);
|
|
1300
|
+
}
|
|
1301
|
+
}
|
|
1302
|
+
}
|
|
1304
1303
|
function clearDragStatus($xeTable) {
|
|
1305
1304
|
const reactData = $xeTable;
|
|
1306
1305
|
const {
|
|
@@ -1411,13 +1410,17 @@ function showDropTip($xeTable, evnt, trEl, thEl, showLine, dragPos) {
|
|
|
1411
1410
|
return;
|
|
1412
1411
|
}
|
|
1413
1412
|
const {
|
|
1413
|
+
overflowX,
|
|
1414
1414
|
scrollbarWidth,
|
|
1415
|
+
overflowY,
|
|
1415
1416
|
scrollbarHeight
|
|
1416
1417
|
} = reactData;
|
|
1417
1418
|
const {
|
|
1418
1419
|
prevDragToChild
|
|
1419
1420
|
} = internalData;
|
|
1420
1421
|
const wrapperRect = el.getBoundingClientRect();
|
|
1422
|
+
const osbWidth = overflowY ? scrollbarWidth : 0;
|
|
1423
|
+
const osbHeight = overflowX ? scrollbarHeight : 0;
|
|
1421
1424
|
const tableWidth = el.clientWidth;
|
|
1422
1425
|
const tableHeight = el.clientHeight;
|
|
1423
1426
|
if (trEl) {
|
|
@@ -1428,14 +1431,14 @@ function showDropTip($xeTable, evnt, trEl, thEl, showLine, dragPos) {
|
|
|
1428
1431
|
const trRect = trEl.getBoundingClientRect();
|
|
1429
1432
|
let trHeight = trEl.clientHeight;
|
|
1430
1433
|
const offsetTop = Math.max(1, trRect.y - wrapperRect.y);
|
|
1431
|
-
if (offsetTop + trHeight > tableHeight -
|
|
1432
|
-
trHeight = tableHeight - offsetTop -
|
|
1434
|
+
if (offsetTop + trHeight > tableHeight - osbHeight) {
|
|
1435
|
+
trHeight = tableHeight - offsetTop - osbHeight;
|
|
1433
1436
|
}
|
|
1434
1437
|
rdLineEl.style.display = 'block';
|
|
1435
|
-
rdLineEl.style.left = `${scrollbarYToLeft ?
|
|
1438
|
+
rdLineEl.style.left = `${scrollbarYToLeft ? osbWidth : 0}px`;
|
|
1436
1439
|
rdLineEl.style.top = `${offsetTop}px`;
|
|
1437
1440
|
rdLineEl.style.height = `${trHeight}px`;
|
|
1438
|
-
rdLineEl.style.width = `${tableWidth -
|
|
1441
|
+
rdLineEl.style.width = `${tableWidth - osbWidth}px`;
|
|
1439
1442
|
rdLineEl.setAttribute('drag-pos', dragPos);
|
|
1440
1443
|
rdLineEl.setAttribute('drag-to-child', prevDragToChild ? 'y' : 'n');
|
|
1441
1444
|
} else {
|
|
@@ -1460,7 +1463,7 @@ function showDropTip($xeTable, evnt, trEl, thEl, showLine, dragPos) {
|
|
|
1460
1463
|
thWidth -= startX - offsetLeft;
|
|
1461
1464
|
offsetLeft = startX;
|
|
1462
1465
|
}
|
|
1463
|
-
const endX = tableWidth - rightContainerWidth - (rightContainerWidth ? 0 :
|
|
1466
|
+
const endX = tableWidth - rightContainerWidth - (rightContainerWidth ? 0 : osbWidth);
|
|
1464
1467
|
if (offsetLeft + thWidth > endX) {
|
|
1465
1468
|
thWidth = endX - offsetLeft;
|
|
1466
1469
|
}
|
|
@@ -1471,7 +1474,7 @@ function showDropTip($xeTable, evnt, trEl, thEl, showLine, dragPos) {
|
|
|
1471
1474
|
if (prevDragToChild) {
|
|
1472
1475
|
cdLineEl.style.height = `${thRect.height}px`;
|
|
1473
1476
|
} else {
|
|
1474
|
-
cdLineEl.style.height = `${tableHeight - offsetTop - (scrollbarXToTop ? 0 :
|
|
1477
|
+
cdLineEl.style.height = `${tableHeight - offsetTop - (scrollbarXToTop ? 0 : osbHeight)}px`;
|
|
1475
1478
|
}
|
|
1476
1479
|
cdLineEl.setAttribute('drag-pos', dragPos);
|
|
1477
1480
|
cdLineEl.setAttribute('drag-to-child', prevDragToChild ? 'y' : 'n');
|
|
@@ -1502,6 +1505,49 @@ function hideDropTip($xeTable) {
|
|
|
1502
1505
|
cdLineEl.style.display = '';
|
|
1503
1506
|
}
|
|
1504
1507
|
}
|
|
1508
|
+
/**
|
|
1509
|
+
* 处理显示 tooltip
|
|
1510
|
+
* @param {Event} evnt 事件
|
|
1511
|
+
* @param {Row} row 行对象
|
|
1512
|
+
*/
|
|
1513
|
+
function handleTooltip($xeTable, evnt, tdEl, overflowElem, tipElem, params) {
|
|
1514
|
+
const reactData = $xeTable;
|
|
1515
|
+
if (!overflowElem) {
|
|
1516
|
+
return $xeTable.$nextTick();
|
|
1517
|
+
}
|
|
1518
|
+
params.cell = tdEl;
|
|
1519
|
+
const {
|
|
1520
|
+
tooltipStore
|
|
1521
|
+
} = reactData;
|
|
1522
|
+
const tooltipOpts = $xeTable.computeTooltipOpts;
|
|
1523
|
+
const {
|
|
1524
|
+
column,
|
|
1525
|
+
row
|
|
1526
|
+
} = params;
|
|
1527
|
+
const {
|
|
1528
|
+
showAll,
|
|
1529
|
+
contentMethod
|
|
1530
|
+
} = tooltipOpts;
|
|
1531
|
+
const customContent = contentMethod ? contentMethod(params) : null;
|
|
1532
|
+
const useCustom = contentMethod && !_xeUtils.default.eqNull(customContent);
|
|
1533
|
+
const content = useCustom ? customContent : _xeUtils.default.toString(column.type === 'html' ? overflowElem.innerText : overflowElem.textContent).trim();
|
|
1534
|
+
const isCellOverflow = overflowElem.scrollWidth > overflowElem.clientWidth;
|
|
1535
|
+
if (content && (showAll || useCustom || isCellOverflow)) {
|
|
1536
|
+
Object.assign(tooltipStore, {
|
|
1537
|
+
row,
|
|
1538
|
+
column,
|
|
1539
|
+
visible: true,
|
|
1540
|
+
currOpts: {}
|
|
1541
|
+
});
|
|
1542
|
+
$xeTable.$nextTick(() => {
|
|
1543
|
+
const $tooltip = $xeTable.$refs.refTooltip;
|
|
1544
|
+
if ($tooltip && $tooltip.open) {
|
|
1545
|
+
$tooltip.open(isCellOverflow ? overflowElem : tipElem || overflowElem, (0, _utils.formatText)(content));
|
|
1546
|
+
}
|
|
1547
|
+
});
|
|
1548
|
+
}
|
|
1549
|
+
return $xeTable.$nextTick();
|
|
1550
|
+
}
|
|
1505
1551
|
function handleScrollToRowColumn($xeTable, fieldOrColumn, row) {
|
|
1506
1552
|
const internalData = $xeTable;
|
|
1507
1553
|
const {
|
|
@@ -1526,16 +1572,16 @@ function computeScrollLoad($xeTable) {
|
|
|
1526
1572
|
scrollXStore,
|
|
1527
1573
|
scrollYStore
|
|
1528
1574
|
} = internalData;
|
|
1529
|
-
const
|
|
1530
|
-
const
|
|
1575
|
+
const virtualYOpts = $xeTable.computeVirtualYOpts;
|
|
1576
|
+
const virtualXOpts = $xeTable.computeVirtualXOpts;
|
|
1531
1577
|
// 计算 X 逻辑
|
|
1532
1578
|
if (scrollXLoad) {
|
|
1533
1579
|
const {
|
|
1534
1580
|
toVisibleIndex: toXVisibleIndex,
|
|
1535
1581
|
visibleSize: visibleXSize
|
|
1536
1582
|
} = handleVirtualXVisible($xeTable);
|
|
1537
|
-
const offsetXSize = Math.max(0,
|
|
1538
|
-
scrollXStore.preloadSize =
|
|
1583
|
+
const offsetXSize = Math.max(0, virtualXOpts.oSize ? _xeUtils.default.toNumber(virtualXOpts.oSize) : 0);
|
|
1584
|
+
scrollXStore.preloadSize = _xeUtils.default.toNumber(virtualXOpts.preSize);
|
|
1539
1585
|
scrollXStore.offsetSize = offsetXSize;
|
|
1540
1586
|
scrollXStore.visibleSize = visibleXSize;
|
|
1541
1587
|
scrollXStore.endIndex = Math.max(scrollXStore.startIndex + scrollXStore.visibleSize + offsetXSize, scrollXStore.endIndex);
|
|
@@ -1547,7 +1593,6 @@ function computeScrollLoad($xeTable) {
|
|
|
1547
1593
|
} else {
|
|
1548
1594
|
$xeTable.updateScrollXSpace();
|
|
1549
1595
|
}
|
|
1550
|
-
calcCellHeight($xeTable);
|
|
1551
1596
|
// 计算 Y 逻辑
|
|
1552
1597
|
const rowHeight = computeRowHeight($xeTable);
|
|
1553
1598
|
scrollYStore.rowHeight = rowHeight;
|
|
@@ -1557,8 +1602,8 @@ function computeScrollLoad($xeTable) {
|
|
|
1557
1602
|
visibleSize: visibleYSize
|
|
1558
1603
|
} = handleVirtualYVisible($xeTable);
|
|
1559
1604
|
if (scrollYLoad) {
|
|
1560
|
-
const offsetYSize = Math.max(0,
|
|
1561
|
-
scrollYStore.preloadSize =
|
|
1605
|
+
const offsetYSize = Math.max(0, virtualYOpts.oSize ? _xeUtils.default.toNumber(virtualYOpts.oSize) : 0);
|
|
1606
|
+
scrollYStore.preloadSize = _xeUtils.default.toNumber(virtualYOpts.preSize);
|
|
1562
1607
|
scrollYStore.offsetSize = offsetYSize;
|
|
1563
1608
|
scrollYStore.visibleSize = visibleYSize;
|
|
1564
1609
|
scrollYStore.endIndex = Math.max(scrollYStore.startIndex + visibleYSize + offsetYSize, scrollYStore.endIndex);
|
|
@@ -1834,11 +1879,10 @@ function handleColumn($xeTable, collectColumn) {
|
|
|
1834
1879
|
internalData.collectColumn = collectColumn;
|
|
1835
1880
|
const tableFullColumn = getColumnList(collectColumn);
|
|
1836
1881
|
internalData.tableFullColumn = tableFullColumn;
|
|
1837
|
-
reactData.
|
|
1882
|
+
reactData.isColLoading = true;
|
|
1838
1883
|
reactData.isDragColMove = false;
|
|
1839
1884
|
initColumnSort($xeTable);
|
|
1840
1885
|
return Promise.resolve(restoreCustomStorage($xeTable)).then(() => {
|
|
1841
|
-
reactData.isLoading = false;
|
|
1842
1886
|
cacheColumnMap($xeTable);
|
|
1843
1887
|
parseColumns($xeTable, true).then(() => {
|
|
1844
1888
|
if (reactData.scrollXLoad) {
|
|
@@ -1863,6 +1907,7 @@ function handleColumn($xeTable, collectColumn) {
|
|
|
1863
1907
|
if ($xeTable.handleUpdateCustomColumn) {
|
|
1864
1908
|
$xeTable.handleUpdateCustomColumn();
|
|
1865
1909
|
}
|
|
1910
|
+
reactData.isColLoading = false;
|
|
1866
1911
|
return $xeTable.recalculate();
|
|
1867
1912
|
});
|
|
1868
1913
|
});
|
|
@@ -1870,15 +1915,12 @@ function handleColumn($xeTable, collectColumn) {
|
|
|
1870
1915
|
/**
|
|
1871
1916
|
* 纵向 Y 可视渲染处理
|
|
1872
1917
|
*/
|
|
1873
|
-
function loadScrollYData($xeTable) {
|
|
1874
|
-
const props = $xeTable;
|
|
1918
|
+
function loadScrollYData($xeTable, scrollTop) {
|
|
1875
1919
|
const reactData = $xeTable;
|
|
1876
1920
|
const internalData = $xeTable;
|
|
1877
1921
|
const {
|
|
1878
|
-
|
|
1879
|
-
|
|
1880
|
-
const {
|
|
1881
|
-
mergeList
|
|
1922
|
+
mergeList,
|
|
1923
|
+
isAllOverflow
|
|
1882
1924
|
} = reactData;
|
|
1883
1925
|
const {
|
|
1884
1926
|
scrollYStore
|
|
@@ -1889,11 +1931,11 @@ function loadScrollYData($xeTable) {
|
|
|
1889
1931
|
endIndex,
|
|
1890
1932
|
offsetSize
|
|
1891
1933
|
} = scrollYStore;
|
|
1892
|
-
const autoOffsetYSize =
|
|
1934
|
+
const autoOffsetYSize = isAllOverflow ? offsetSize : offsetSize + 1;
|
|
1893
1935
|
const {
|
|
1894
1936
|
toVisibleIndex,
|
|
1895
1937
|
visibleSize
|
|
1896
|
-
} = handleVirtualYVisible($xeTable);
|
|
1938
|
+
} = handleVirtualYVisible($xeTable, scrollTop);
|
|
1897
1939
|
const offsetItem = {
|
|
1898
1940
|
startIndex: Math.max(0, toVisibleIndex - 1 - offsetSize - preloadSize),
|
|
1899
1941
|
endIndex: toVisibleIndex + visibleSize + autoOffsetYSize + preloadSize
|
|
@@ -1913,6 +1955,54 @@ function loadScrollYData($xeTable) {
|
|
|
1913
1955
|
}
|
|
1914
1956
|
}
|
|
1915
1957
|
}
|
|
1958
|
+
function lazyScrollXData($xeTable) {
|
|
1959
|
+
const internalData = $xeTable;
|
|
1960
|
+
const {
|
|
1961
|
+
lxTimeout,
|
|
1962
|
+
lxRunTime,
|
|
1963
|
+
scrollXStore
|
|
1964
|
+
} = internalData;
|
|
1965
|
+
const {
|
|
1966
|
+
visibleSize
|
|
1967
|
+
} = scrollXStore;
|
|
1968
|
+
const fpsTime = Math.max(5, Math.min(10, Math.floor(visibleSize / 3)));
|
|
1969
|
+
if (lxTimeout) {
|
|
1970
|
+
clearTimeout(lxTimeout);
|
|
1971
|
+
}
|
|
1972
|
+
if (!lxRunTime || lxRunTime + fpsTime < Date.now()) {
|
|
1973
|
+
internalData.lxRunTime = Date.now();
|
|
1974
|
+
loadScrollXData($xeTable);
|
|
1975
|
+
}
|
|
1976
|
+
internalData.lxTimeout = setTimeout(() => {
|
|
1977
|
+
internalData.lxTimeout = undefined;
|
|
1978
|
+
internalData.lxRunTime = undefined;
|
|
1979
|
+
loadScrollXData($xeTable);
|
|
1980
|
+
}, fpsTime);
|
|
1981
|
+
}
|
|
1982
|
+
function lazyScrollYData($xeTable) {
|
|
1983
|
+
const internalData = $xeTable;
|
|
1984
|
+
const {
|
|
1985
|
+
lyTimeout,
|
|
1986
|
+
lyRunTime,
|
|
1987
|
+
scrollYStore
|
|
1988
|
+
} = internalData;
|
|
1989
|
+
const {
|
|
1990
|
+
visibleSize
|
|
1991
|
+
} = scrollYStore;
|
|
1992
|
+
const fpsTime = Math.floor(Math.max(4, Math.min(10, visibleSize / 3)));
|
|
1993
|
+
if (lyTimeout) {
|
|
1994
|
+
clearTimeout(lyTimeout);
|
|
1995
|
+
}
|
|
1996
|
+
if (!lyRunTime || lyRunTime + fpsTime < Date.now()) {
|
|
1997
|
+
internalData.lyRunTime = Date.now();
|
|
1998
|
+
loadScrollYData($xeTable);
|
|
1999
|
+
}
|
|
2000
|
+
internalData.lyTimeout = setTimeout(() => {
|
|
2001
|
+
internalData.lyTimeout = undefined;
|
|
2002
|
+
internalData.lyRunTime = undefined;
|
|
2003
|
+
loadScrollYData($xeTable);
|
|
2004
|
+
}, fpsTime);
|
|
2005
|
+
}
|
|
1916
2006
|
function checkLastSyncScroll($xeTable, isRollX, isRollY) {
|
|
1917
2007
|
const reactData = $xeTable;
|
|
1918
2008
|
const internalData = $xeTable;
|
|
@@ -1929,27 +2019,63 @@ function checkLastSyncScroll($xeTable, isRollX, isRollY) {
|
|
|
1929
2019
|
internalData.lcsTimeout = setTimeout(() => {
|
|
1930
2020
|
internalData.lcsRunTime = Date.now();
|
|
1931
2021
|
internalData.lcsTimeout = undefined;
|
|
2022
|
+
internalData.intoRunScroll = false;
|
|
1932
2023
|
internalData.inVirtualScroll = false;
|
|
1933
2024
|
internalData.inWheelScroll = false;
|
|
1934
2025
|
internalData.inHeaderScroll = false;
|
|
1935
2026
|
internalData.inBodyScroll = false;
|
|
1936
2027
|
internalData.inFooterScroll = false;
|
|
1937
2028
|
internalData.scrollRenderType = '';
|
|
2029
|
+
calcCellHeight($xeTable);
|
|
1938
2030
|
if (isRollX && scrollXLoad) {
|
|
1939
|
-
$xeTable.updateScrollXData()
|
|
1940
|
-
calcCellHeight($xeTable);
|
|
1941
|
-
loadScrollXData($xeTable);
|
|
1942
|
-
});
|
|
2031
|
+
$xeTable.updateScrollXData();
|
|
1943
2032
|
}
|
|
1944
2033
|
if (isRollY && scrollYLoad) {
|
|
1945
2034
|
$xeTable.updateScrollYData().then(() => {
|
|
1946
2035
|
calcCellHeight($xeTable);
|
|
1947
|
-
|
|
2036
|
+
$xeTable.updateScrollYSpace();
|
|
1948
2037
|
});
|
|
1949
2038
|
}
|
|
1950
2039
|
$xeTable.updateCellAreas();
|
|
1951
2040
|
}, 200);
|
|
1952
2041
|
}
|
|
2042
|
+
const getWheelSpeed = lastScrollTime => {
|
|
2043
|
+
let multiple = 1;
|
|
2044
|
+
const currTime = Date.now();
|
|
2045
|
+
if (lastScrollTime + 25 > currTime) {
|
|
2046
|
+
multiple = 1.18;
|
|
2047
|
+
} else if (lastScrollTime + 30 > currTime) {
|
|
2048
|
+
multiple = 1.15;
|
|
2049
|
+
} else if (lastScrollTime + 40 > currTime) {
|
|
2050
|
+
multiple = 1.12;
|
|
2051
|
+
} else if (lastScrollTime + 55 > currTime) {
|
|
2052
|
+
multiple = 1.09;
|
|
2053
|
+
} else if (lastScrollTime + 75 > currTime) {
|
|
2054
|
+
multiple = 1.06;
|
|
2055
|
+
} else if (lastScrollTime + 100 > currTime) {
|
|
2056
|
+
multiple = 1.03;
|
|
2057
|
+
}
|
|
2058
|
+
return multiple;
|
|
2059
|
+
};
|
|
2060
|
+
const wheelScrollTo = (diffNum, cb) => {
|
|
2061
|
+
const duration = Math.abs(diffNum);
|
|
2062
|
+
const startTime = performance.now();
|
|
2063
|
+
let countTop = 0;
|
|
2064
|
+
const step = timestamp => {
|
|
2065
|
+
let progress = (timestamp - startTime) / duration;
|
|
2066
|
+
if (progress > 1) {
|
|
2067
|
+
progress = 1;
|
|
2068
|
+
}
|
|
2069
|
+
const easedProgress = Math.pow(progress, 2);
|
|
2070
|
+
const offsetTop = Math.floor(diffNum * easedProgress) - countTop;
|
|
2071
|
+
countTop += offsetTop;
|
|
2072
|
+
cb(offsetTop);
|
|
2073
|
+
if (progress < 1) {
|
|
2074
|
+
requestAnimationFrame(step);
|
|
2075
|
+
}
|
|
2076
|
+
};
|
|
2077
|
+
requestAnimationFrame(step);
|
|
2078
|
+
};
|
|
1953
2079
|
function updateHeight($xeTable) {
|
|
1954
2080
|
const internalData = $xeTable;
|
|
1955
2081
|
internalData.customHeight = calcTableHeight($xeTable, 'height');
|
|
@@ -1957,59 +2083,62 @@ function updateHeight($xeTable) {
|
|
|
1957
2083
|
internalData.customMaxHeight = calcTableHeight($xeTable, 'maxHeight');
|
|
1958
2084
|
}
|
|
1959
2085
|
function calcColumnAutoWidth(column, wrapperEl) {
|
|
1960
|
-
const
|
|
1961
|
-
|
|
1962
|
-
|
|
1963
|
-
if (firstCellEl) {
|
|
1964
|
-
const cellStyle = getComputedStyle(firstCellEl);
|
|
1965
|
-
|
|
2086
|
+
const cellElemList = wrapperEl.querySelectorAll(`.vxe-cell--wrapper[colid="${column.id}"]`);
|
|
2087
|
+
let leftRightPadding = 0;
|
|
2088
|
+
const firstCellEl = cellElemList[0];
|
|
2089
|
+
if (firstCellEl && firstCellEl.parentElement) {
|
|
2090
|
+
const cellStyle = getComputedStyle(firstCellEl.parentElement);
|
|
2091
|
+
leftRightPadding = Math.ceil(_xeUtils.default.toNumber(cellStyle.paddingLeft) + _xeUtils.default.toNumber(cellStyle.paddingRight));
|
|
1966
2092
|
}
|
|
1967
|
-
let colWidth = column.renderAutoWidth -
|
|
1968
|
-
|
|
1969
|
-
const
|
|
1970
|
-
|
|
1971
|
-
|
|
1972
|
-
|
|
1973
|
-
_xeUtils.default.arrayEach(cellEl.children, btnEl => {
|
|
1974
|
-
titleWidth += btnEl.offsetWidth + 1;
|
|
1975
|
-
});
|
|
1976
|
-
} else {
|
|
1977
|
-
const labelEl = cellEl.firstElementChild;
|
|
1978
|
-
if (labelEl) {
|
|
1979
|
-
titleWidth = labelEl.offsetWidth;
|
|
1980
|
-
}
|
|
1981
|
-
}
|
|
1982
|
-
if (titleWidth) {
|
|
1983
|
-
colWidth = Math.max(colWidth, Math.ceil(titleWidth) + 4);
|
|
1984
|
-
}
|
|
1985
|
-
});
|
|
1986
|
-
return colWidth + paddingSize;
|
|
2093
|
+
let colWidth = column.renderAutoWidth - leftRightPadding;
|
|
2094
|
+
for (let i = 0; i < cellElemList.length; i++) {
|
|
2095
|
+
const celEl = cellElemList[i];
|
|
2096
|
+
colWidth = Math.max(colWidth, celEl ? Math.ceil(celEl.scrollWidth) + 4 : 0);
|
|
2097
|
+
}
|
|
2098
|
+
return colWidth + leftRightPadding;
|
|
1987
2099
|
}
|
|
1988
2100
|
function calcCellWidth($xeTable) {
|
|
1989
|
-
const reactData = $xeTable;
|
|
1990
2101
|
const internalData = $xeTable;
|
|
1991
2102
|
const autoWidthColumnList = $xeTable.computeAutoWidthColumnList;
|
|
1992
|
-
|
|
1993
|
-
|
|
1994
|
-
|
|
1995
|
-
|
|
1996
|
-
|
|
1997
|
-
|
|
1998
|
-
|
|
1999
|
-
|
|
2000
|
-
|
|
2001
|
-
|
|
2002
|
-
|
|
2003
|
-
|
|
2004
|
-
|
|
2005
|
-
|
|
2006
|
-
|
|
2007
|
-
|
|
2008
|
-
|
|
2009
|
-
|
|
2010
|
-
reactData.isCalcColumn = false;
|
|
2011
|
-
});
|
|
2103
|
+
const {
|
|
2104
|
+
fullColumnIdData
|
|
2105
|
+
} = internalData;
|
|
2106
|
+
const el = $xeTable.$refs.refElem;
|
|
2107
|
+
if (el) {
|
|
2108
|
+
el.setAttribute('data-calc-col', 'Y');
|
|
2109
|
+
autoWidthColumnList.forEach(column => {
|
|
2110
|
+
const colid = column.id;
|
|
2111
|
+
const colRest = fullColumnIdData[colid];
|
|
2112
|
+
const colWidth = calcColumnAutoWidth(column, el);
|
|
2113
|
+
if (colRest) {
|
|
2114
|
+
colRest.width = Math.max(colWidth, colRest.width);
|
|
2115
|
+
}
|
|
2116
|
+
column.renderAutoWidth = colWidth;
|
|
2117
|
+
});
|
|
2118
|
+
$xeTable.analyColumnWidth();
|
|
2119
|
+
el.removeAttribute('data-calc-col');
|
|
2120
|
+
}
|
|
2012
2121
|
}
|
|
2122
|
+
const handleUpdateColResize = ($xeTable, evnt, params) => {
|
|
2123
|
+
$xeTable.analyColumnWidth();
|
|
2124
|
+
$xeTable.recalculate(true).then(() => {
|
|
2125
|
+
$xeTable.saveCustomStore('update:width');
|
|
2126
|
+
$xeTable.updateCellAreas();
|
|
2127
|
+
$xeTable.dispatchEvent('column-resizable-change', params, evnt);
|
|
2128
|
+
// 已废弃 resizable-change
|
|
2129
|
+
$xeTable.dispatchEvent('resizable-change', params, evnt);
|
|
2130
|
+
setTimeout(() => $xeTable.recalculate(true), 300);
|
|
2131
|
+
});
|
|
2132
|
+
};
|
|
2133
|
+
const handleUpdateRowResize = ($xeTable, evnt, params) => {
|
|
2134
|
+
const reactData = $xeTable;
|
|
2135
|
+
reactData.resizeHeightFlag++;
|
|
2136
|
+
$xeTable.recalculate(true).then(() => {
|
|
2137
|
+
$xeTable.updateCellAreas();
|
|
2138
|
+
$xeTable.dispatchEvent('row-resizable-change', params, evnt);
|
|
2139
|
+
setTimeout(() => $xeTable.recalculate(true), 300);
|
|
2140
|
+
});
|
|
2141
|
+
};
|
|
2013
2142
|
const Methods = {
|
|
2014
2143
|
callSlot(slotFunc, params, h, vNodes) {
|
|
2015
2144
|
if (slotFunc) {
|
|
@@ -2074,7 +2203,7 @@ const Methods = {
|
|
|
2074
2203
|
(0, _log.warnLog)('vxe.error.delFunc', ['syncData', 'getData']);
|
|
2075
2204
|
return this.$nextTick().then(() => {
|
|
2076
2205
|
this.tableData = [];
|
|
2077
|
-
return this.$nextTick().then(() => this.loadTableData(this.tableFullData));
|
|
2206
|
+
return this.$nextTick().then(() => this.loadTableData(this.tableFullData, true));
|
|
2078
2207
|
});
|
|
2079
2208
|
},
|
|
2080
2209
|
/**
|
|
@@ -2136,11 +2265,12 @@ const Methods = {
|
|
|
2136
2265
|
* 加载表格数据
|
|
2137
2266
|
* @param {Array} datas 数据
|
|
2138
2267
|
*/
|
|
2139
|
-
loadTableData(datas) {
|
|
2268
|
+
loadTableData(datas, isReset) {
|
|
2140
2269
|
const $xeTable = this;
|
|
2270
|
+
const reactData = $xeTable;
|
|
2271
|
+
const internalData = $xeTable;
|
|
2141
2272
|
const {
|
|
2142
2273
|
keepSource,
|
|
2143
|
-
showOverflow,
|
|
2144
2274
|
treeConfig,
|
|
2145
2275
|
treeOpts,
|
|
2146
2276
|
editStore,
|
|
@@ -2153,7 +2283,6 @@ const Methods = {
|
|
|
2153
2283
|
sYOpts
|
|
2154
2284
|
} = this;
|
|
2155
2285
|
const childrenField = treeOpts.children || treeOpts.childrenField;
|
|
2156
|
-
const rowOpts = $xeTable.computeRowOpts;
|
|
2157
2286
|
let treeData = [];
|
|
2158
2287
|
let fullData = datas ? datas.slice(0) : [];
|
|
2159
2288
|
if (treeConfig) {
|
|
@@ -2196,42 +2325,30 @@ const Methods = {
|
|
|
2196
2325
|
scrollYStore.endIndex = 1;
|
|
2197
2326
|
scrollXStore.startIndex = 0;
|
|
2198
2327
|
scrollXStore.endIndex = 1;
|
|
2328
|
+
reactData.isRowLoading = true;
|
|
2329
|
+
reactData.scrollVMLoading = false;
|
|
2199
2330
|
editStore.insertMaps = {};
|
|
2200
|
-
editStore.removeList = [];
|
|
2201
2331
|
editStore.removeMaps = {};
|
|
2202
2332
|
const sYLoad = updateScrollYStatus($xeTable, fullData);
|
|
2203
|
-
|
|
2333
|
+
reactData.isDragColMove = false;
|
|
2334
|
+
reactData.isDragRowMove = false;
|
|
2204
2335
|
// 全量数据
|
|
2205
|
-
|
|
2206
|
-
|
|
2336
|
+
internalData.tableFullData = fullData;
|
|
2337
|
+
internalData.tableFullTreeData = treeData;
|
|
2207
2338
|
// 缓存数据
|
|
2208
|
-
|
|
2339
|
+
$xeTable.cacheRowMap(true, isReset);
|
|
2209
2340
|
// 原始数据
|
|
2210
|
-
|
|
2341
|
+
internalData.tableSynchData = datas;
|
|
2342
|
+
if (isReset) {
|
|
2343
|
+
internalData.isResizeCellHeight = false;
|
|
2344
|
+
reactData.rowExpandedMaps = {};
|
|
2345
|
+
reactData.rowExpandLazyLoadedMaps = {};
|
|
2346
|
+
reactData.treeExpandedMaps = {};
|
|
2347
|
+
reactData.treeExpandLazyLoadedMaps = {};
|
|
2348
|
+
}
|
|
2211
2349
|
// 克隆原数据,用于显示编辑状态,与编辑值做对比
|
|
2212
2350
|
if (keepSource) {
|
|
2213
|
-
|
|
2214
|
-
}
|
|
2215
|
-
if (sYLoad) {
|
|
2216
|
-
if (showOverflow) {
|
|
2217
|
-
if (!rowOpts.height) {
|
|
2218
|
-
const errColumn = this.tableFullColumn.find(column => column.showOverflow === false);
|
|
2219
|
-
if (errColumn) {
|
|
2220
|
-
(0, _log.errLog)('vxe.error.errProp', [`column[field="${errColumn.field}"].show-overflow=false`, 'show-overflow=true']);
|
|
2221
|
-
}
|
|
2222
|
-
}
|
|
2223
|
-
}
|
|
2224
|
-
if (process.env.NODE_ENV === 'development') {
|
|
2225
|
-
if (!(this.height || this.maxHeight)) {
|
|
2226
|
-
(0, _log.errLog)('vxe.error.reqProp', ['table.height | table.max-height | table.scroll-y={enabled: false}']);
|
|
2227
|
-
}
|
|
2228
|
-
// if (!this.showOverflow) {
|
|
2229
|
-
// warnLog('vxe.error.reqProp', ['table.show-overflow'])
|
|
2230
|
-
// }
|
|
2231
|
-
if (this.spanMethod) {
|
|
2232
|
-
(0, _log.warnLog)('vxe.error.scrollErrProp', ['table.span-method']);
|
|
2233
|
-
}
|
|
2234
|
-
}
|
|
2351
|
+
$xeTable.cacheSourceMap(fullData);
|
|
2235
2352
|
}
|
|
2236
2353
|
if (this.clearCellAreas && this.mouseConfig) {
|
|
2237
2354
|
this.clearCellAreas();
|
|
@@ -2251,6 +2368,27 @@ const Methods = {
|
|
|
2251
2368
|
if (sYLoad) {
|
|
2252
2369
|
scrollYStore.endIndex = scrollYStore.visibleSize;
|
|
2253
2370
|
}
|
|
2371
|
+
if (sYLoad) {
|
|
2372
|
+
// if (showOverflow) {
|
|
2373
|
+
// if (!rowOpts.height) {
|
|
2374
|
+
// const errColumn = this.tableFullColumn.find((column: any) => column.showOverflow === false)
|
|
2375
|
+
// if (errColumn) {
|
|
2376
|
+
// errLog('vxe.error.errProp', [`column[field="${errColumn.field}"].show-overflow=false`, 'show-overflow=true'])
|
|
2377
|
+
// }
|
|
2378
|
+
// }
|
|
2379
|
+
// }
|
|
2380
|
+
if (process.env.NODE_ENV === 'development') {
|
|
2381
|
+
if (!(this.height || this.maxHeight)) {
|
|
2382
|
+
(0, _log.errLog)('vxe.error.reqProp', ['table.height | table.max-height | table.scroll-y={enabled: false}']);
|
|
2383
|
+
}
|
|
2384
|
+
// if (!this.showOverflow) {
|
|
2385
|
+
// warnLog('vxe.error.reqProp', ['table.show-overflow'])
|
|
2386
|
+
// }
|
|
2387
|
+
if (this.spanMethod) {
|
|
2388
|
+
(0, _log.warnLog)('vxe.error.scrollErrProp', ['table.span-method']);
|
|
2389
|
+
}
|
|
2390
|
+
}
|
|
2391
|
+
}
|
|
2254
2392
|
this.handleReserveStatus();
|
|
2255
2393
|
this.checkSelectionStatus();
|
|
2256
2394
|
return new Promise(resolve => {
|
|
@@ -2264,6 +2402,8 @@ const Methods = {
|
|
|
2264
2402
|
if (sYOpts.scrollToTopOnChange) {
|
|
2265
2403
|
targetScrollTop = 0;
|
|
2266
2404
|
}
|
|
2405
|
+
reactData.isRowLoading = false;
|
|
2406
|
+
calcCellHeight($xeTable);
|
|
2267
2407
|
// 是否变更虚拟滚动
|
|
2268
2408
|
if (oldScrollYLoad === sYLoad) {
|
|
2269
2409
|
(0, _util.restoreScrollLocation)(this, targetScrollLeft, targetScrollTop).then(() => {
|
|
@@ -2288,7 +2428,7 @@ const Methods = {
|
|
|
2288
2428
|
const {
|
|
2289
2429
|
initStatus
|
|
2290
2430
|
} = this;
|
|
2291
|
-
return this.loadTableData(datas).then(() => {
|
|
2431
|
+
return this.loadTableData(datas, false).then(() => {
|
|
2292
2432
|
this.inited = true;
|
|
2293
2433
|
this.initStatus = true;
|
|
2294
2434
|
if (!initStatus) {
|
|
@@ -2305,7 +2445,7 @@ const Methods = {
|
|
|
2305
2445
|
return this.clearAll().then(() => {
|
|
2306
2446
|
this.inited = true;
|
|
2307
2447
|
this.initStatus = true;
|
|
2308
|
-
return this.loadTableData(datas);
|
|
2448
|
+
return this.loadTableData(datas, true);
|
|
2309
2449
|
}).then(() => {
|
|
2310
2450
|
this.handleLoadDefaults();
|
|
2311
2451
|
return this.recalculate();
|
|
@@ -2386,9 +2526,8 @@ const Methods = {
|
|
|
2386
2526
|
},
|
|
2387
2527
|
/**
|
|
2388
2528
|
* 更新数据行的 Map
|
|
2389
|
-
* 牺牲数据组装的耗时,用来换取使用过程中的流畅
|
|
2390
2529
|
*/
|
|
2391
|
-
cacheRowMap(isSource) {
|
|
2530
|
+
cacheRowMap(isReset, isSource) {
|
|
2392
2531
|
const {
|
|
2393
2532
|
treeConfig,
|
|
2394
2533
|
treeOpts,
|
|
@@ -2414,7 +2553,7 @@ const Methods = {
|
|
|
2414
2553
|
row[childrenField] = null;
|
|
2415
2554
|
}
|
|
2416
2555
|
let cacheItem = fullAllDataRowIdData[rowid];
|
|
2417
|
-
if (!cacheItem) {
|
|
2556
|
+
if (isReset || !cacheItem) {
|
|
2418
2557
|
cacheItem = {
|
|
2419
2558
|
row,
|
|
2420
2559
|
rowid,
|
|
@@ -2427,6 +2566,7 @@ const Methods = {
|
|
|
2427
2566
|
parent: parentRow,
|
|
2428
2567
|
level,
|
|
2429
2568
|
height: 0,
|
|
2569
|
+
resizeHeight: 0,
|
|
2430
2570
|
oTop: 0
|
|
2431
2571
|
};
|
|
2432
2572
|
}
|
|
@@ -2532,6 +2672,7 @@ const Methods = {
|
|
|
2532
2672
|
parent: parentRow,
|
|
2533
2673
|
level: parentLevel + nodes.length,
|
|
2534
2674
|
height: 0,
|
|
2675
|
+
resizeHeight: 0,
|
|
2535
2676
|
oTop: 0
|
|
2536
2677
|
};
|
|
2537
2678
|
fullDataRowIdData[rowid] = rest;
|
|
@@ -2924,20 +3065,38 @@ const Methods = {
|
|
|
2924
3065
|
return this.$nextTick();
|
|
2925
3066
|
},
|
|
2926
3067
|
getCellElement(row, fieldOrColumn) {
|
|
2927
|
-
const
|
|
3068
|
+
const $xeTable = this;
|
|
3069
|
+
const internalData = $xeTable;
|
|
3070
|
+
const {
|
|
3071
|
+
elemStore
|
|
3072
|
+
} = internalData;
|
|
3073
|
+
const column = (0, _util.handleFieldOrColumn)($xeTable, fieldOrColumn);
|
|
2928
3074
|
if (!column) {
|
|
2929
3075
|
return null;
|
|
2930
3076
|
}
|
|
2931
|
-
const
|
|
2932
|
-
|
|
2933
|
-
|
|
2934
|
-
const
|
|
2935
|
-
let bodyElem
|
|
3077
|
+
const rowid = (0, _util.getRowid)($xeTable, row);
|
|
3078
|
+
const bodyScrollElem = (0, _util.getRefElem)(elemStore['main-body-scroll']);
|
|
3079
|
+
const leftScrollElem = (0, _util.getRefElem)(elemStore['left-body-scroll']);
|
|
3080
|
+
const rightScrollElem = (0, _util.getRefElem)(elemStore['right-body-scroll']);
|
|
3081
|
+
let bodyElem;
|
|
2936
3082
|
if (column) {
|
|
2937
|
-
|
|
2938
|
-
|
|
2939
|
-
|
|
2940
|
-
|
|
3083
|
+
if (column.fixed) {
|
|
3084
|
+
if (column.fixed === 'left') {
|
|
3085
|
+
if (leftScrollElem) {
|
|
3086
|
+
bodyElem = leftScrollElem;
|
|
3087
|
+
}
|
|
3088
|
+
} else {
|
|
3089
|
+
if (rightScrollElem) {
|
|
3090
|
+
bodyElem = rightScrollElem;
|
|
3091
|
+
}
|
|
3092
|
+
}
|
|
3093
|
+
}
|
|
3094
|
+
if (!bodyElem) {
|
|
3095
|
+
bodyElem = bodyScrollElem;
|
|
3096
|
+
}
|
|
3097
|
+
if (bodyElem) {
|
|
3098
|
+
return bodyElem.querySelector(`.vxe-body--row[rowid="${rowid}"] .${column.id}`);
|
|
3099
|
+
}
|
|
2941
3100
|
}
|
|
2942
3101
|
return null;
|
|
2943
3102
|
},
|
|
@@ -3464,7 +3623,11 @@ const Methods = {
|
|
|
3464
3623
|
* @param {String/Number} rowid 行主键
|
|
3465
3624
|
*/
|
|
3466
3625
|
getRowById(cellValue) {
|
|
3467
|
-
const
|
|
3626
|
+
const $xeTable = this;
|
|
3627
|
+
const internalData = $xeTable;
|
|
3628
|
+
const {
|
|
3629
|
+
fullDataRowIdData
|
|
3630
|
+
} = internalData;
|
|
3468
3631
|
const rowid = _xeUtils.default.eqNull(cellValue) ? '' : encodeURIComponent(cellValue);
|
|
3469
3632
|
return fullDataRowIdData[rowid] ? fullDataRowIdData[rowid].row : null;
|
|
3470
3633
|
},
|
|
@@ -3472,14 +3635,9 @@ const Methods = {
|
|
|
3472
3635
|
* 根据行获取行的唯一主键
|
|
3473
3636
|
* @param {Row} row 行对象
|
|
3474
3637
|
*/
|
|
3475
|
-
getRowid(
|
|
3638
|
+
getRowid(row) {
|
|
3476
3639
|
const $xeTable = this;
|
|
3477
|
-
|
|
3478
|
-
const {
|
|
3479
|
-
fullDataRowIdData
|
|
3480
|
-
} = internalData;
|
|
3481
|
-
const rowid = _xeUtils.default.eqNull(cellValue) ? '' : encodeURIComponent(cellValue || '');
|
|
3482
|
-
return fullDataRowIdData[rowid] ? fullDataRowIdData[rowid].row : null;
|
|
3640
|
+
return (0, _util.getRowid)($xeTable, row);
|
|
3483
3641
|
},
|
|
3484
3642
|
/**
|
|
3485
3643
|
* 获取处理后的表格数据
|
|
@@ -3683,29 +3841,41 @@ const Methods = {
|
|
|
3683
3841
|
},
|
|
3684
3842
|
setColumnWidth(fieldOrColumn, width) {
|
|
3685
3843
|
const $xeTable = this;
|
|
3844
|
+
const internalData = $xeTable;
|
|
3845
|
+
const {
|
|
3846
|
+
elemStore
|
|
3847
|
+
} = internalData;
|
|
3686
3848
|
let status = false;
|
|
3687
3849
|
const cols = _xeUtils.default.isArray(fieldOrColumn) ? fieldOrColumn : [fieldOrColumn];
|
|
3688
|
-
|
|
3689
|
-
|
|
3690
|
-
|
|
3691
|
-
|
|
3692
|
-
|
|
3693
|
-
|
|
3694
|
-
|
|
3695
|
-
|
|
3696
|
-
|
|
3697
|
-
|
|
3698
|
-
|
|
3699
|
-
|
|
3700
|
-
|
|
3701
|
-
|
|
3850
|
+
let cWidth = _xeUtils.default.toInteger(width);
|
|
3851
|
+
if ((0, _dom.isScale)(width)) {
|
|
3852
|
+
const bodyScrollElem = (0, _util.getRefElem)(elemStore['main-body-scroll']);
|
|
3853
|
+
const bodyWidth = bodyScrollElem ? bodyScrollElem.clientWidth - 1 : 0;
|
|
3854
|
+
cWidth = Math.floor(cWidth * bodyWidth);
|
|
3855
|
+
}
|
|
3856
|
+
if (cWidth) {
|
|
3857
|
+
cols.forEach(item => {
|
|
3858
|
+
const column = (0, _util.handleFieldOrColumn)($xeTable, item);
|
|
3859
|
+
if (column) {
|
|
3860
|
+
column.resizeWidth = cWidth;
|
|
3861
|
+
if (!status) {
|
|
3862
|
+
status = true;
|
|
3863
|
+
}
|
|
3702
3864
|
}
|
|
3865
|
+
});
|
|
3866
|
+
if (status) {
|
|
3867
|
+
return $xeTable.refreshColumn().then(() => {
|
|
3868
|
+
return {
|
|
3869
|
+
status
|
|
3870
|
+
};
|
|
3871
|
+
});
|
|
3703
3872
|
}
|
|
3704
|
-
});
|
|
3705
|
-
if (status) {
|
|
3706
|
-
return $xeTable.refreshColumn();
|
|
3707
3873
|
}
|
|
3708
|
-
return $xeTable.$nextTick()
|
|
3874
|
+
return $xeTable.$nextTick().then(() => {
|
|
3875
|
+
return {
|
|
3876
|
+
status
|
|
3877
|
+
};
|
|
3878
|
+
});
|
|
3709
3879
|
},
|
|
3710
3880
|
getColumnWidth(fieldOrColumn) {
|
|
3711
3881
|
const column = (0, _util.handleFieldOrColumn)(this, fieldOrColumn);
|
|
@@ -4032,53 +4202,489 @@ const Methods = {
|
|
|
4032
4202
|
remainList
|
|
4033
4203
|
});
|
|
4034
4204
|
},
|
|
4035
|
-
|
|
4205
|
+
handleColResizeMousedownEvent(evnt, fixedType, params) {
|
|
4206
|
+
const $xeTable = this;
|
|
4207
|
+
const reactData = $xeTable;
|
|
4208
|
+
const internalData = $xeTable;
|
|
4209
|
+
evnt.stopPropagation();
|
|
4210
|
+
evnt.preventDefault();
|
|
4211
|
+
const {
|
|
4212
|
+
column
|
|
4213
|
+
} = params;
|
|
4214
|
+
const {
|
|
4215
|
+
overflowX,
|
|
4216
|
+
scrollbarHeight
|
|
4217
|
+
} = reactData;
|
|
4218
|
+
const {
|
|
4219
|
+
elemStore,
|
|
4220
|
+
visibleColumn
|
|
4221
|
+
} = internalData;
|
|
4222
|
+
const resizableOpts = $xeTable.computeResizableOpts;
|
|
4223
|
+
const osbHeight = overflowX ? scrollbarHeight : 0;
|
|
4224
|
+
const tableEl = $xeTable.$refs.refElem;
|
|
4225
|
+
const leftContainerElem = $xeTable.$refs.refLeftContainer;
|
|
4226
|
+
const rightContainerElem = $xeTable.$refs.refRightContainer;
|
|
4227
|
+
const resizeBarElem = $xeTable.$refs.refColResizeBar;
|
|
4228
|
+
if (!resizeBarElem) {
|
|
4229
|
+
return;
|
|
4230
|
+
}
|
|
4231
|
+
const resizeTipElem = resizeBarElem.firstElementChild;
|
|
4232
|
+
const scrollbarXToTop = $xeTable.computeScrollbarXToTop;
|
|
4233
|
+
const {
|
|
4234
|
+
clientX: dragClientX
|
|
4235
|
+
} = evnt;
|
|
4236
|
+
const wrapperElem = $xeTable.$refs.refElem;
|
|
4237
|
+
const dragBtnElem = evnt.target;
|
|
4238
|
+
let resizeColumn = column;
|
|
4239
|
+
if (column.children && column.children.length) {
|
|
4240
|
+
_xeUtils.default.eachTree(column.children, childColumn => {
|
|
4241
|
+
resizeColumn = childColumn;
|
|
4242
|
+
});
|
|
4243
|
+
}
|
|
4244
|
+
const cell = dragBtnElem.parentNode;
|
|
4245
|
+
const cellParams = Object.assign(params, {
|
|
4246
|
+
cell
|
|
4247
|
+
});
|
|
4248
|
+
let dragLeft = 0;
|
|
4249
|
+
const bodyScrollElem = (0, _util.getRefElem)(elemStore['main-body-scroll']);
|
|
4250
|
+
if (!bodyScrollElem) {
|
|
4251
|
+
return;
|
|
4252
|
+
}
|
|
4253
|
+
const pos = (0, _dom.getOffsetPos)(dragBtnElem, wrapperElem);
|
|
4254
|
+
const dragBtnWidth = dragBtnElem.clientWidth;
|
|
4255
|
+
const dragBtnOffsetWidth = Math.floor(dragBtnWidth / 2);
|
|
4256
|
+
const minInterval = (0, _util.getColReMinWidth)(cellParams) - dragBtnOffsetWidth; // 列之间的最小间距
|
|
4257
|
+
let dragMinLeft = pos.left - cell.clientWidth + dragBtnWidth + minInterval;
|
|
4258
|
+
let dragPosLeft = pos.left + dragBtnOffsetWidth;
|
|
4259
|
+
const isLeftFixed = fixedType === 'left';
|
|
4260
|
+
const isRightFixed = fixedType === 'right';
|
|
4261
|
+
// 计算左右侧固定列偏移量
|
|
4262
|
+
let fixedOffsetWidth = 0;
|
|
4263
|
+
if (isLeftFixed || isRightFixed) {
|
|
4264
|
+
const siblingProp = isLeftFixed ? 'nextElementSibling' : 'previousElementSibling';
|
|
4265
|
+
let tempCellElem = cell[siblingProp];
|
|
4266
|
+
while (tempCellElem) {
|
|
4267
|
+
if ((0, _dom.hasClass)(tempCellElem, 'fixed--hidden')) {
|
|
4268
|
+
break;
|
|
4269
|
+
} else if (!(0, _dom.hasClass)(tempCellElem, 'col--group')) {
|
|
4270
|
+
fixedOffsetWidth += tempCellElem.offsetWidth;
|
|
4271
|
+
}
|
|
4272
|
+
tempCellElem = tempCellElem[siblingProp];
|
|
4273
|
+
}
|
|
4274
|
+
if (isRightFixed && rightContainerElem) {
|
|
4275
|
+
dragPosLeft = rightContainerElem.offsetLeft + fixedOffsetWidth;
|
|
4276
|
+
}
|
|
4277
|
+
}
|
|
4278
|
+
// 处理拖动事件
|
|
4279
|
+
const updateEvent = evnt => {
|
|
4280
|
+
evnt.stopPropagation();
|
|
4281
|
+
evnt.preventDefault();
|
|
4282
|
+
const tableHeight = tableEl.clientHeight;
|
|
4283
|
+
const offsetX = evnt.clientX - dragClientX;
|
|
4284
|
+
let left = dragPosLeft + offsetX;
|
|
4285
|
+
const scrollLeft = fixedType ? 0 : bodyScrollElem.scrollLeft;
|
|
4286
|
+
if (isLeftFixed) {
|
|
4287
|
+
// 左固定列(不允许超过右侧固定列、不允许超过右边距)
|
|
4288
|
+
left = Math.min(left, (rightContainerElem ? rightContainerElem.offsetLeft : bodyScrollElem.clientWidth) - fixedOffsetWidth - minInterval);
|
|
4289
|
+
} else if (isRightFixed) {
|
|
4290
|
+
// 右侧固定列(不允许超过左侧固定列、不允许超过左边距)
|
|
4291
|
+
dragMinLeft = (leftContainerElem ? leftContainerElem.clientWidth : 0) + fixedOffsetWidth + minInterval;
|
|
4292
|
+
left = Math.min(left, dragPosLeft + cell.clientWidth - minInterval);
|
|
4293
|
+
} else {
|
|
4294
|
+
dragMinLeft = Math.max(bodyScrollElem.scrollLeft, dragMinLeft);
|
|
4295
|
+
// left = Math.min(left, bodyScrollElem.clientWidth + bodyScrollElem.scrollLeft - 40)
|
|
4296
|
+
}
|
|
4297
|
+
dragLeft = Math.max(left, dragMinLeft);
|
|
4298
|
+
const resizeBarLeft = Math.max(1, dragLeft - scrollLeft);
|
|
4299
|
+
resizeBarElem.style.left = `${resizeBarLeft}px`;
|
|
4300
|
+
resizeBarElem.style.top = `${scrollbarXToTop ? osbHeight : 0}px`;
|
|
4301
|
+
resizeBarElem.style.height = `${scrollbarXToTop ? tableHeight - osbHeight : tableHeight}px`;
|
|
4302
|
+
if (resizableOpts.showDragTip && resizeTipElem) {
|
|
4303
|
+
resizeTipElem.textContent = getI18n('vxe.table.resizeColTip', [resizeColumn.renderWidth + (isRightFixed ? dragPosLeft - dragLeft : dragLeft - dragPosLeft)]);
|
|
4304
|
+
const tableWidth = tableEl.clientWidth;
|
|
4305
|
+
const wrapperRect = wrapperElem.getBoundingClientRect();
|
|
4306
|
+
const resizeBarWidth = resizeBarElem.clientWidth;
|
|
4307
|
+
const resizeTipWidth = resizeTipElem.clientWidth;
|
|
4308
|
+
const resizeTipHeight = resizeTipElem.clientHeight;
|
|
4309
|
+
let resizeTipLeft = -resizeTipWidth;
|
|
4310
|
+
if (resizeBarLeft < resizeTipWidth + resizeBarWidth) {
|
|
4311
|
+
resizeTipLeft = 0;
|
|
4312
|
+
} else if (resizeBarLeft > tableWidth) {
|
|
4313
|
+
resizeTipLeft += tableWidth - resizeBarLeft;
|
|
4314
|
+
}
|
|
4315
|
+
resizeTipElem.style.left = `${resizeTipLeft}px`;
|
|
4316
|
+
resizeTipElem.style.top = `${Math.min(tableHeight - resizeTipHeight, Math.max(0, evnt.clientY - wrapperRect.y - resizeTipHeight / 2))}px`;
|
|
4317
|
+
}
|
|
4318
|
+
reactData.isDragResize = true;
|
|
4319
|
+
};
|
|
4320
|
+
reactData.isDragResize = true;
|
|
4321
|
+
(0, _dom.addClass)(tableEl, 'col-drag--resize');
|
|
4322
|
+
resizeBarElem.style.display = 'block';
|
|
4323
|
+
document.onmousemove = updateEvent;
|
|
4324
|
+
document.onmouseup = function (evnt) {
|
|
4325
|
+
document.onmousemove = null;
|
|
4326
|
+
document.onmouseup = null;
|
|
4327
|
+
resizeBarElem.style.display = 'none';
|
|
4328
|
+
internalData._lastResizeTime = Date.now();
|
|
4329
|
+
setTimeout(() => {
|
|
4330
|
+
reactData.isDragResize = false;
|
|
4331
|
+
}, 50);
|
|
4332
|
+
const resizeWidth = resizeColumn.renderWidth + (isRightFixed ? dragPosLeft - dragLeft : dragLeft - dragPosLeft);
|
|
4333
|
+
const resizeParams = Object.assign(Object.assign({}, params), {
|
|
4334
|
+
resizeWidth,
|
|
4335
|
+
resizeColumn
|
|
4336
|
+
});
|
|
4337
|
+
if (resizableOpts.dragMode === 'fixed') {
|
|
4338
|
+
visibleColumn.forEach(item => {
|
|
4339
|
+
if (item.id !== resizeColumn.id) {
|
|
4340
|
+
if (!item.resizeWidth) {
|
|
4341
|
+
item.resizeWidth = item.renderWidth;
|
|
4342
|
+
}
|
|
4343
|
+
}
|
|
4344
|
+
});
|
|
4345
|
+
}
|
|
4346
|
+
if ($xeTable.handleColResizeCellAreaEvent) {
|
|
4347
|
+
$xeTable.handleColResizeCellAreaEvent(evnt, resizeParams);
|
|
4348
|
+
} else {
|
|
4349
|
+
resizeColumn.resizeWidth = resizeWidth;
|
|
4350
|
+
handleUpdateColResize($xeTable, evnt, resizeParams);
|
|
4351
|
+
}
|
|
4352
|
+
(0, _dom.removeClass)(tableEl, 'col-drag--resize');
|
|
4353
|
+
};
|
|
4354
|
+
updateEvent(evnt);
|
|
4355
|
+
if ($xeTable.closeMenu) {
|
|
4356
|
+
$xeTable.closeMenu();
|
|
4357
|
+
}
|
|
4358
|
+
},
|
|
4359
|
+
handleColResizeDblclickEvent(evnt, params) {
|
|
4360
|
+
const $xeTable = this;
|
|
4361
|
+
const reactData = $xeTable;
|
|
4362
|
+
const internalData = $xeTable;
|
|
4363
|
+
const resizableOpts = $xeTable.computeResizableOpts;
|
|
4364
|
+
const {
|
|
4365
|
+
isDblclickAutoWidth
|
|
4366
|
+
} = resizableOpts;
|
|
4367
|
+
const el = $xeTable.$refs.refElem;
|
|
4368
|
+
if (isDblclickAutoWidth && el) {
|
|
4369
|
+
evnt.stopPropagation();
|
|
4370
|
+
evnt.preventDefault();
|
|
4371
|
+
const {
|
|
4372
|
+
fullColumnIdData
|
|
4373
|
+
} = internalData;
|
|
4374
|
+
const {
|
|
4375
|
+
column
|
|
4376
|
+
} = params;
|
|
4377
|
+
let resizeColumn = column;
|
|
4378
|
+
if (column.children && column.children.length) {
|
|
4379
|
+
_xeUtils.default.eachTree(column.children, childColumn => {
|
|
4380
|
+
resizeColumn = childColumn;
|
|
4381
|
+
});
|
|
4382
|
+
}
|
|
4383
|
+
const colid = resizeColumn.id;
|
|
4384
|
+
const colRest = fullColumnIdData[colid];
|
|
4385
|
+
const dragBtnElem = evnt.target;
|
|
4386
|
+
const cell = dragBtnElem.parentNode;
|
|
4387
|
+
const cellParams = Object.assign(params, {
|
|
4388
|
+
cell
|
|
4389
|
+
});
|
|
4390
|
+
const colMinWidth = (0, _util.getColReMinWidth)(cellParams);
|
|
4391
|
+
el.setAttribute('data-calc-col', 'Y');
|
|
4392
|
+
let resizeWidth = calcColumnAutoWidth(resizeColumn, el);
|
|
4393
|
+
el.removeAttribute('data-calc-col');
|
|
4394
|
+
if (colRest) {
|
|
4395
|
+
resizeWidth = Math.max(resizeWidth, colRest.width);
|
|
4396
|
+
}
|
|
4397
|
+
resizeWidth = Math.max(colMinWidth, resizeWidth);
|
|
4398
|
+
const resizeParams = Object.assign(Object.assign({}, params), {
|
|
4399
|
+
resizeWidth,
|
|
4400
|
+
resizeColumn
|
|
4401
|
+
});
|
|
4402
|
+
reactData.isDragResize = false;
|
|
4403
|
+
internalData._lastResizeTime = Date.now();
|
|
4404
|
+
if ($xeTable.handleColResizeDblclickCellAreaEvent) {
|
|
4405
|
+
$xeTable.handleColResizeDblclickCellAreaEvent(evnt, resizeParams);
|
|
4406
|
+
} else {
|
|
4407
|
+
resizeColumn.resizeWidth = resizeWidth;
|
|
4408
|
+
handleUpdateColResize($xeTable, evnt, resizeParams);
|
|
4409
|
+
}
|
|
4410
|
+
}
|
|
4411
|
+
},
|
|
4412
|
+
handleRowResizeMousedownEvent(evnt, params) {
|
|
4413
|
+
const $xeTable = this;
|
|
4414
|
+
const reactData = $xeTable;
|
|
4415
|
+
const internalData = $xeTable;
|
|
4416
|
+
evnt.stopPropagation();
|
|
4417
|
+
evnt.preventDefault();
|
|
4418
|
+
const {
|
|
4419
|
+
row
|
|
4420
|
+
} = params;
|
|
4421
|
+
const {
|
|
4422
|
+
overflowX,
|
|
4423
|
+
scrollbarWidth,
|
|
4424
|
+
overflowY,
|
|
4425
|
+
scrollbarHeight
|
|
4426
|
+
} = reactData;
|
|
4427
|
+
const {
|
|
4428
|
+
elemStore,
|
|
4429
|
+
fullAllDataRowIdData
|
|
4430
|
+
} = internalData;
|
|
4431
|
+
const osbWidth = overflowY ? scrollbarWidth : 0;
|
|
4432
|
+
const osbHeight = overflowX ? scrollbarHeight : 0;
|
|
4433
|
+
const scrollbarYToLeft = $xeTable.computeScrollbarYToLeft;
|
|
4434
|
+
const resizableOpts = $xeTable.computeResizableOpts;
|
|
4435
|
+
const rowOpts = $xeTable.computeRowOpts;
|
|
4436
|
+
const cellOpts = $xeTable.computeCellOpts;
|
|
4437
|
+
const tableEl = $xeTable.$refs.refElem;
|
|
4438
|
+
const resizeBarElem = $xeTable.$refs.refRowResizeBar;
|
|
4439
|
+
if (!resizeBarElem) {
|
|
4440
|
+
return;
|
|
4441
|
+
}
|
|
4442
|
+
const {
|
|
4443
|
+
clientY: dragClientY
|
|
4444
|
+
} = evnt;
|
|
4445
|
+
const resizeTipElem = resizeBarElem.firstElementChild;
|
|
4446
|
+
const dragBtnElem = evnt.currentTarget;
|
|
4447
|
+
const tdEl = dragBtnElem.parentNode;
|
|
4448
|
+
const trEl = tdEl.parentNode;
|
|
4449
|
+
const bodyScrollElem = (0, _util.getRefElem)(elemStore['main-body-scroll']);
|
|
4450
|
+
if (!bodyScrollElem) {
|
|
4451
|
+
return;
|
|
4452
|
+
}
|
|
4453
|
+
const rowid = (0, _util.getRowid)($xeTable, row);
|
|
4454
|
+
const rowRest = fullAllDataRowIdData[rowid];
|
|
4455
|
+
if (!rowRest) {
|
|
4456
|
+
return;
|
|
4457
|
+
}
|
|
4458
|
+
const defaultRowHeight = $xeTable.computeDefaultRowHeight;
|
|
4459
|
+
const currCellHeight = rowRest.resizeHeight || cellOpts.height || rowOpts.height || defaultRowHeight;
|
|
4460
|
+
const tableRect = tableEl.getBoundingClientRect();
|
|
4461
|
+
const trRect = trEl.getBoundingClientRect();
|
|
4462
|
+
const targetOffsetY = dragClientY - trRect.y - trEl.clientHeight;
|
|
4463
|
+
let resizeHeight = currCellHeight;
|
|
4464
|
+
const cellEl = tdEl.querySelector('.vxe-cell');
|
|
4465
|
+
let cellMinHeight = 0;
|
|
4466
|
+
if (cellEl) {
|
|
4467
|
+
const cellStyle = getComputedStyle(cellEl);
|
|
4468
|
+
cellMinHeight = Math.max(1, Math.ceil(_xeUtils.default.toNumber(cellStyle.paddingTop) + _xeUtils.default.toNumber(cellStyle.paddingBottom)));
|
|
4469
|
+
}
|
|
4470
|
+
const minTop = trRect.y - tableRect.y + cellMinHeight;
|
|
4471
|
+
// 处理拖动事件
|
|
4472
|
+
const updateEvent = evnt => {
|
|
4473
|
+
evnt.stopPropagation();
|
|
4474
|
+
evnt.preventDefault();
|
|
4475
|
+
const tableWidth = tableEl.clientWidth - osbWidth;
|
|
4476
|
+
const tableHeight = tableEl.clientHeight - osbHeight;
|
|
4477
|
+
let dragTop = evnt.clientY - tableRect.y - targetOffsetY;
|
|
4478
|
+
if (dragTop < minTop) {
|
|
4479
|
+
dragTop = minTop;
|
|
4480
|
+
} else {
|
|
4481
|
+
resizeHeight = Math.max(cellMinHeight, currCellHeight + evnt.clientY - dragClientY);
|
|
4482
|
+
}
|
|
4483
|
+
resizeBarElem.style.left = `${scrollbarYToLeft ? osbWidth : 0}px`;
|
|
4484
|
+
resizeBarElem.style.top = `${dragTop}px`;
|
|
4485
|
+
resizeBarElem.style.width = `${tableWidth}px`;
|
|
4486
|
+
if (resizableOpts.showDragTip && resizeTipElem) {
|
|
4487
|
+
resizeTipElem.textContent = getI18n('vxe.table.resizeRowTip', [resizeHeight]);
|
|
4488
|
+
const resizeTipWidth = resizeTipElem.clientWidth;
|
|
4489
|
+
const resizeTipHeight = resizeTipElem.clientHeight;
|
|
4490
|
+
let resizeBarLeft = Math.max(2, evnt.clientX - tableRect.x);
|
|
4491
|
+
let resizeBarTop = 0;
|
|
4492
|
+
if (resizeBarLeft + resizeTipWidth >= tableWidth - 2) {
|
|
4493
|
+
resizeBarLeft = tableWidth - resizeTipWidth - 2;
|
|
4494
|
+
}
|
|
4495
|
+
if (dragTop + resizeTipHeight >= tableHeight) {
|
|
4496
|
+
resizeBarTop = tableHeight - (dragTop + resizeTipHeight);
|
|
4497
|
+
}
|
|
4498
|
+
resizeTipElem.style.left = `${resizeBarLeft}px`;
|
|
4499
|
+
resizeTipElem.style.top = `${resizeBarTop}px`;
|
|
4500
|
+
}
|
|
4501
|
+
reactData.isDragResize = true;
|
|
4502
|
+
};
|
|
4503
|
+
reactData.isDragResize = true;
|
|
4504
|
+
(0, _dom.addClass)(tableEl, 'row-drag--resize');
|
|
4505
|
+
resizeBarElem.style.display = 'block';
|
|
4506
|
+
document.onmousemove = updateEvent;
|
|
4507
|
+
document.onmouseup = function (evnt) {
|
|
4508
|
+
document.onmousemove = null;
|
|
4509
|
+
document.onmouseup = null;
|
|
4510
|
+
resizeBarElem.style.display = 'none';
|
|
4511
|
+
internalData._lastResizeTime = Date.now();
|
|
4512
|
+
setTimeout(() => {
|
|
4513
|
+
reactData.isDragResize = false;
|
|
4514
|
+
}, 50);
|
|
4515
|
+
if (resizeHeight !== currCellHeight) {
|
|
4516
|
+
const resizeParams = Object.assign(Object.assign({}, params), {
|
|
4517
|
+
resizeHeight,
|
|
4518
|
+
resizeRow: row
|
|
4519
|
+
});
|
|
4520
|
+
internalData.isResizeCellHeight = true;
|
|
4521
|
+
if ($xeTable.handleRowResizeCellAreaEvent) {
|
|
4522
|
+
$xeTable.handleRowResizeCellAreaEvent(evnt, resizeParams);
|
|
4523
|
+
} else {
|
|
4524
|
+
rowRest.resizeHeight = resizeHeight;
|
|
4525
|
+
handleUpdateRowResize($xeTable, evnt, resizeParams);
|
|
4526
|
+
}
|
|
4527
|
+
}
|
|
4528
|
+
(0, _dom.removeClass)(tableEl, 'row-drag--resize');
|
|
4529
|
+
};
|
|
4530
|
+
updateEvent(evnt);
|
|
4531
|
+
},
|
|
4532
|
+
handleRowResizeDblclickEvent(evnt, params) {
|
|
4533
|
+
const $xeTable = this;
|
|
4534
|
+
const reactData = $xeTable;
|
|
4535
|
+
const internalData = $xeTable;
|
|
4536
|
+
const resizableOpts = $xeTable.computeResizableOpts;
|
|
4537
|
+
const {
|
|
4538
|
+
isDblclickAutoHeight
|
|
4539
|
+
} = resizableOpts;
|
|
4540
|
+
const el = $xeTable.$refs.refElem;
|
|
4541
|
+
if (isDblclickAutoHeight && el) {
|
|
4542
|
+
evnt.stopPropagation();
|
|
4543
|
+
evnt.preventDefault();
|
|
4544
|
+
const {
|
|
4545
|
+
editStore
|
|
4546
|
+
} = reactData;
|
|
4547
|
+
const {
|
|
4548
|
+
fullAllDataRowIdData
|
|
4549
|
+
} = internalData;
|
|
4550
|
+
const {
|
|
4551
|
+
actived
|
|
4552
|
+
} = editStore;
|
|
4553
|
+
const {
|
|
4554
|
+
row
|
|
4555
|
+
} = params;
|
|
4556
|
+
const rowid = (0, _util.getRowid)($xeTable, row);
|
|
4557
|
+
const rowRest = fullAllDataRowIdData[rowid];
|
|
4558
|
+
if (!rowRest) {
|
|
4559
|
+
return;
|
|
4560
|
+
}
|
|
4561
|
+
const handleRsHeight = () => {
|
|
4562
|
+
const resizeHeight = calcCellAutoHeight(rowRest, el);
|
|
4563
|
+
const resizeParams = Object.assign(Object.assign({}, params), {
|
|
4564
|
+
resizeHeight,
|
|
4565
|
+
resizeRow: row
|
|
4566
|
+
});
|
|
4567
|
+
reactData.isDragResize = false;
|
|
4568
|
+
internalData._lastResizeTime = Date.now();
|
|
4569
|
+
if ($xeTable.handleRowResizeDblclickCellAreaEvent) {
|
|
4570
|
+
$xeTable.handleRowResizeDblclickCellAreaEvent(evnt, resizeParams);
|
|
4571
|
+
} else {
|
|
4572
|
+
rowRest.resizeHeight = resizeHeight;
|
|
4573
|
+
handleUpdateRowResize($xeTable, evnt, resizeParams);
|
|
4574
|
+
}
|
|
4575
|
+
};
|
|
4576
|
+
if (actived.row || actived.column) {
|
|
4577
|
+
$xeTable.clearEdit().then(handleRsHeight);
|
|
4578
|
+
} else {
|
|
4579
|
+
handleRsHeight();
|
|
4580
|
+
}
|
|
4581
|
+
}
|
|
4582
|
+
},
|
|
4583
|
+
setRowHeightConf(heightConf) {
|
|
4584
|
+
const $xeTable = this;
|
|
4585
|
+
const reactData = $xeTable;
|
|
4586
|
+
const internalData = $xeTable;
|
|
4587
|
+
const {
|
|
4588
|
+
fullAllDataRowIdData
|
|
4589
|
+
} = internalData;
|
|
4590
|
+
let status = false;
|
|
4591
|
+
if (heightConf) {
|
|
4592
|
+
_xeUtils.default.each(heightConf, (height, rowid) => {
|
|
4593
|
+
const rowRest = fullAllDataRowIdData[rowid];
|
|
4594
|
+
if (rowRest) {
|
|
4595
|
+
const rHeight = _xeUtils.default.toInteger(height);
|
|
4596
|
+
if (rHeight) {
|
|
4597
|
+
rowRest.resizeHeight = rHeight;
|
|
4598
|
+
if (!status) {
|
|
4599
|
+
status = true;
|
|
4600
|
+
}
|
|
4601
|
+
}
|
|
4602
|
+
}
|
|
4603
|
+
});
|
|
4604
|
+
if (status) {
|
|
4605
|
+
internalData.isResizeCellHeight = true;
|
|
4606
|
+
reactData.resizeHeightFlag++;
|
|
4607
|
+
}
|
|
4608
|
+
}
|
|
4609
|
+
return $xeTable.$nextTick().then(() => {
|
|
4610
|
+
return {
|
|
4611
|
+
status
|
|
4612
|
+
};
|
|
4613
|
+
});
|
|
4614
|
+
},
|
|
4615
|
+
getRowHeightConf(isFull) {
|
|
4616
|
+
const $xeTable = this;
|
|
4617
|
+
const internalData = $xeTable;
|
|
4618
|
+
const {
|
|
4619
|
+
fullAllDataRowIdData,
|
|
4620
|
+
afterFullData
|
|
4621
|
+
} = internalData;
|
|
4622
|
+
const rowOpts = $xeTable.computeRowOpts;
|
|
4623
|
+
const cellOpts = $xeTable.computeCellOpts;
|
|
4624
|
+
const defaultRowHeight = $xeTable.computeDefaultRowHeight;
|
|
4625
|
+
const rest = {};
|
|
4626
|
+
afterFullData.forEach(row => {
|
|
4627
|
+
const rowid = (0, _util.getRowid)($xeTable, row);
|
|
4628
|
+
const rowRest = fullAllDataRowIdData[rowid];
|
|
4629
|
+
if (rowRest) {
|
|
4630
|
+
const resizeHeight = rowRest.resizeHeight;
|
|
4631
|
+
if (resizeHeight || isFull) {
|
|
4632
|
+
const currCellHeight = resizeHeight || rowRest.height || cellOpts.height || rowOpts.height || defaultRowHeight;
|
|
4633
|
+
rest[rowid] = currCellHeight;
|
|
4634
|
+
}
|
|
4635
|
+
}
|
|
4636
|
+
});
|
|
4637
|
+
return rest;
|
|
4638
|
+
},
|
|
4639
|
+
setRowHeight(rowOrId, height) {
|
|
4036
4640
|
const $xeTable = this;
|
|
4037
4641
|
const reactData = $xeTable;
|
|
4038
4642
|
const internalData = $xeTable;
|
|
4039
|
-
const resizableOpts = $xeTable.computeResizableOpts;
|
|
4040
4643
|
const {
|
|
4041
|
-
|
|
4042
|
-
} =
|
|
4043
|
-
|
|
4044
|
-
|
|
4045
|
-
|
|
4046
|
-
|
|
4047
|
-
|
|
4048
|
-
const
|
|
4049
|
-
|
|
4050
|
-
|
|
4051
|
-
|
|
4052
|
-
|
|
4053
|
-
|
|
4054
|
-
|
|
4055
|
-
|
|
4056
|
-
|
|
4057
|
-
|
|
4058
|
-
|
|
4059
|
-
|
|
4060
|
-
|
|
4061
|
-
|
|
4062
|
-
cell
|
|
4644
|
+
fullAllDataRowIdData
|
|
4645
|
+
} = internalData;
|
|
4646
|
+
let status = false;
|
|
4647
|
+
const rows = _xeUtils.default.isArray(rowOrId) ? rowOrId : [rowOrId];
|
|
4648
|
+
let rHeight = _xeUtils.default.toInteger(height);
|
|
4649
|
+
if ((0, _dom.isScale)(height)) {
|
|
4650
|
+
const tableBody = $xeTable.$refs.refTableBody;
|
|
4651
|
+
const bodyElem = tableBody ? tableBody.$el : null;
|
|
4652
|
+
const bodyHeight = bodyElem ? bodyElem.clientHeight - 1 : 0;
|
|
4653
|
+
rHeight = Math.floor(rHeight * bodyHeight);
|
|
4654
|
+
}
|
|
4655
|
+
if (rHeight) {
|
|
4656
|
+
rows.forEach(row => {
|
|
4657
|
+
const rowid = _xeUtils.default.isString(row) || _xeUtils.default.isNumber(row) ? row : (0, _util.getRowid)($xeTable, row);
|
|
4658
|
+
const rowRest = fullAllDataRowIdData[rowid];
|
|
4659
|
+
if (rowRest) {
|
|
4660
|
+
rowRest.resizeHeight = rHeight;
|
|
4661
|
+
if (!status) {
|
|
4662
|
+
status = true;
|
|
4663
|
+
}
|
|
4664
|
+
}
|
|
4063
4665
|
});
|
|
4064
|
-
|
|
4065
|
-
|
|
4066
|
-
|
|
4067
|
-
resizeWidth = Math.max(resizeWidth, colRest.width);
|
|
4666
|
+
if (status) {
|
|
4667
|
+
internalData.isResizeCellHeight = true;
|
|
4668
|
+
reactData.resizeHeightFlag++;
|
|
4068
4669
|
}
|
|
4069
|
-
resizeColumn.resizeWidth = Math.max(colMinWidth, resizeWidth);
|
|
4070
|
-
reactData._isResize = false;
|
|
4071
|
-
internalData._lastResizeTime = Date.now();
|
|
4072
|
-
$xeTable.analyColumnWidth();
|
|
4073
|
-
$xeTable.recalculate(true).then(() => {
|
|
4074
|
-
$xeTable.saveCustomStore('update:visible');
|
|
4075
|
-
$xeTable.updateCellAreas();
|
|
4076
|
-
$xeTable.dispatchEvent('resizable-change', Object.assign(Object.assign({}, params), {
|
|
4077
|
-
resizeWidth
|
|
4078
|
-
}), evnt);
|
|
4079
|
-
setTimeout(() => $xeTable.recalculate(true), 300);
|
|
4080
|
-
});
|
|
4081
4670
|
}
|
|
4671
|
+
return $xeTable.$nextTick();
|
|
4672
|
+
},
|
|
4673
|
+
getRowHeight(rowOrId) {
|
|
4674
|
+
const $xeTable = this;
|
|
4675
|
+
const internalData = $xeTable;
|
|
4676
|
+
const {
|
|
4677
|
+
fullAllDataRowIdData
|
|
4678
|
+
} = internalData;
|
|
4679
|
+
const rowOpts = $xeTable.computeRowOpts;
|
|
4680
|
+
const cellOpts = $xeTable.computeCellOpts;
|
|
4681
|
+
const defaultRowHeight = $xeTable.computeDefaultRowHeight;
|
|
4682
|
+
const rowid = _xeUtils.default.isString(rowOrId) || _xeUtils.default.isNumber(rowOrId) ? rowOrId : (0, _util.getRowid)($xeTable, rowOrId);
|
|
4683
|
+
const rowRest = fullAllDataRowIdData[rowid];
|
|
4684
|
+
if (rowRest) {
|
|
4685
|
+
return rowRest.resizeHeight || rowRest.height || cellOpts.height || rowOpts.height || defaultRowHeight;
|
|
4686
|
+
}
|
|
4687
|
+
return 0;
|
|
4082
4688
|
},
|
|
4083
4689
|
/**
|
|
4084
4690
|
* 刷新滚动操作,手动同步滚动相关位置(对于某些特殊的操作,比如滚动条错位、固定列不同步)
|
|
@@ -4514,10 +5120,10 @@ const Methods = {
|
|
|
4514
5120
|
}
|
|
4515
5121
|
} else if (isContextMenu) {
|
|
4516
5122
|
// 如果按下上下文键
|
|
4517
|
-
|
|
5123
|
+
internalData._keyCtx = selected.row && selected.column && bodyCtxMenu.length;
|
|
4518
5124
|
clearTimeout(internalData.keyCtxTimeout);
|
|
4519
5125
|
internalData.keyCtxTimeout = setTimeout(() => {
|
|
4520
|
-
|
|
5126
|
+
internalData._keyCtx = false;
|
|
4521
5127
|
}, 1000);
|
|
4522
5128
|
} else if (isEnter && !hasAltKey && keyboardConfig && keyboardOpts.isEnter && (selected.row || actived.row || treeConfig && (rowOpts.isCurrent || highlightCurrentRow) && currentRow)) {
|
|
4523
5129
|
const {
|
|
@@ -4797,53 +5403,45 @@ const Methods = {
|
|
|
4797
5403
|
this.updateCellAreas();
|
|
4798
5404
|
this.recalculate(true);
|
|
4799
5405
|
},
|
|
4800
|
-
handleTargetEnterEvent(isClear) {
|
|
4801
|
-
const $tooltip = this.$refs.tooltip;
|
|
4802
|
-
clearTimeout(this.tooltipTimeout);
|
|
4803
|
-
if (isClear) {
|
|
4804
|
-
this.closeTooltip();
|
|
4805
|
-
} else {
|
|
4806
|
-
if ($tooltip) {
|
|
4807
|
-
$tooltip.setActived(true);
|
|
4808
|
-
}
|
|
4809
|
-
}
|
|
4810
|
-
},
|
|
4811
5406
|
handleTargetLeaveEvent() {
|
|
4812
|
-
const
|
|
4813
|
-
|
|
4814
|
-
|
|
5407
|
+
const $xeTable = this;
|
|
5408
|
+
const internalData = $xeTable;
|
|
5409
|
+
const tooltipOpts = $xeTable.computeTooltipOpts;
|
|
5410
|
+
let $tooltip = $xeTable.$refs.refTooltip;
|
|
5411
|
+
if ($tooltip && $tooltip.setActived) {
|
|
4815
5412
|
$tooltip.setActived(false);
|
|
4816
5413
|
}
|
|
4817
5414
|
if (tooltipOpts.enterable) {
|
|
4818
|
-
|
|
4819
|
-
$tooltip =
|
|
4820
|
-
if ($tooltip && !$tooltip.isActived()) {
|
|
4821
|
-
|
|
5415
|
+
internalData.tooltipTimeout = setTimeout(() => {
|
|
5416
|
+
$tooltip = $xeTable.$refs.refTooltip;
|
|
5417
|
+
if ($tooltip && $tooltip.isActived && !$tooltip.isActived()) {
|
|
5418
|
+
$xeTable.closeTooltip();
|
|
4822
5419
|
}
|
|
4823
5420
|
}, tooltipOpts.leaveDelay);
|
|
4824
5421
|
} else {
|
|
4825
|
-
|
|
5422
|
+
$xeTable.closeTooltip();
|
|
4826
5423
|
}
|
|
4827
5424
|
},
|
|
4828
5425
|
triggerHeaderTitleEvent(evnt, iconParams, params) {
|
|
5426
|
+
const $xeTable = this;
|
|
5427
|
+
const reactData = $xeTable;
|
|
4829
5428
|
const tipContent = iconParams.content || iconParams.message;
|
|
4830
5429
|
if (tipContent) {
|
|
4831
5430
|
const {
|
|
4832
|
-
$refs,
|
|
4833
5431
|
tooltipStore
|
|
4834
|
-
} =
|
|
5432
|
+
} = reactData;
|
|
4835
5433
|
const {
|
|
4836
5434
|
column
|
|
4837
5435
|
} = params;
|
|
4838
5436
|
const content = (0, _utils.getFuncText)(tipContent);
|
|
4839
|
-
|
|
5437
|
+
handleTargetEnterEvent($xeTable, true);
|
|
4840
5438
|
tooltipStore.row = null;
|
|
4841
5439
|
tooltipStore.column = column;
|
|
4842
5440
|
tooltipStore.visible = true;
|
|
4843
5441
|
tooltipStore.currOpts = iconParams;
|
|
4844
|
-
|
|
4845
|
-
const $tooltip = $refs.
|
|
4846
|
-
if ($tooltip) {
|
|
5442
|
+
$xeTable.$nextTick(() => {
|
|
5443
|
+
const $tooltip = $xeTable.$refs.refTooltip;
|
|
5444
|
+
if ($tooltip && $tooltip.open) {
|
|
4847
5445
|
$tooltip.open(evnt.currentTarget, content);
|
|
4848
5446
|
}
|
|
4849
5447
|
});
|
|
@@ -4853,28 +5451,48 @@ const Methods = {
|
|
|
4853
5451
|
* 触发表头 tooltip 事件
|
|
4854
5452
|
*/
|
|
4855
5453
|
triggerHeaderTooltipEvent(evnt, params) {
|
|
5454
|
+
const $xeTable = this;
|
|
5455
|
+
const reactData = $xeTable;
|
|
4856
5456
|
const {
|
|
4857
5457
|
tooltipStore
|
|
4858
|
-
} =
|
|
5458
|
+
} = reactData;
|
|
4859
5459
|
const {
|
|
4860
5460
|
column
|
|
4861
5461
|
} = params;
|
|
5462
|
+
handleTargetEnterEvent($xeTable, true);
|
|
4862
5463
|
const titleElem = evnt.currentTarget;
|
|
4863
|
-
|
|
5464
|
+
if (!titleElem) {
|
|
5465
|
+
return;
|
|
5466
|
+
}
|
|
5467
|
+
const cellEl = titleElem.parentElement;
|
|
5468
|
+
if (!cellEl) {
|
|
5469
|
+
return;
|
|
5470
|
+
}
|
|
5471
|
+
const thEl = cellEl.parentElement;
|
|
5472
|
+
if (!thEl) {
|
|
5473
|
+
return;
|
|
5474
|
+
}
|
|
4864
5475
|
if (tooltipStore.column !== column || !tooltipStore.visible) {
|
|
4865
|
-
|
|
5476
|
+
handleTooltip($xeTable, evnt, thEl, cellEl, null, params);
|
|
4866
5477
|
}
|
|
4867
5478
|
},
|
|
4868
5479
|
/**
|
|
4869
5480
|
* 触发单元格 tooltip 事件
|
|
4870
5481
|
*/
|
|
4871
5482
|
triggerBodyTooltipEvent(evnt, params) {
|
|
5483
|
+
const $xeTable = this;
|
|
5484
|
+
const props = $xeTable;
|
|
5485
|
+
const reactData = $xeTable;
|
|
5486
|
+
const {
|
|
5487
|
+
editConfig
|
|
5488
|
+
} = props;
|
|
5489
|
+
const {
|
|
5490
|
+
editStore
|
|
5491
|
+
} = reactData;
|
|
4872
5492
|
const {
|
|
4873
|
-
editConfig,
|
|
4874
|
-
editOpts,
|
|
4875
|
-
editStore,
|
|
4876
5493
|
tooltipStore
|
|
4877
|
-
} =
|
|
5494
|
+
} = reactData;
|
|
5495
|
+
const editOpts = $xeTable.computeEditOpts;
|
|
4878
5496
|
const {
|
|
4879
5497
|
actived
|
|
4880
5498
|
} = editStore;
|
|
@@ -4882,8 +5500,8 @@ const Methods = {
|
|
|
4882
5500
|
row,
|
|
4883
5501
|
column
|
|
4884
5502
|
} = params;
|
|
4885
|
-
const
|
|
4886
|
-
|
|
5503
|
+
const tdEl = evnt.currentTarget;
|
|
5504
|
+
handleTargetEnterEvent($xeTable, tooltipStore.column !== column || tooltipStore.row !== row);
|
|
4887
5505
|
// 单元格处于编辑状态时不触发提示框
|
|
4888
5506
|
if (column.editRender && (0, _utils.isEnableConf)(editConfig)) {
|
|
4889
5507
|
// 如果是行编辑模式
|
|
@@ -4896,80 +5514,26 @@ const Methods = {
|
|
|
4896
5514
|
}
|
|
4897
5515
|
}
|
|
4898
5516
|
if (tooltipStore.column !== column || tooltipStore.row !== row || !tooltipStore.visible) {
|
|
4899
|
-
|
|
4900
|
-
let tipElem;
|
|
4901
|
-
if (column.treeNode) {
|
|
4902
|
-
overflowElem = cell.querySelector('.vxe-tree-cell');
|
|
4903
|
-
if (column.type === 'html') {
|
|
4904
|
-
tipElem = cell.querySelector('.vxe-cell--html');
|
|
4905
|
-
}
|
|
4906
|
-
} else {
|
|
4907
|
-
tipElem = cell.querySelector(column.type === 'html' ? '.vxe-cell--html' : '.vxe-cell--label');
|
|
4908
|
-
}
|
|
4909
|
-
this.handleTooltip(evnt, cell, overflowElem || cell.children[0], tipElem, params);
|
|
5517
|
+
handleTooltip($xeTable, evnt, tdEl, tdEl.querySelector('.vxe-cell--wrapper'), null, params);
|
|
4910
5518
|
}
|
|
4911
5519
|
},
|
|
4912
5520
|
/**
|
|
4913
5521
|
* 触发表尾 tooltip 事件
|
|
4914
5522
|
*/
|
|
4915
5523
|
triggerFooterTooltipEvent(evnt, params) {
|
|
5524
|
+
const $xeTable = this;
|
|
5525
|
+
const reactData = $xeTable;
|
|
4916
5526
|
const {
|
|
4917
5527
|
column
|
|
4918
5528
|
} = params;
|
|
4919
5529
|
const {
|
|
4920
5530
|
tooltipStore
|
|
4921
|
-
} =
|
|
5531
|
+
} = reactData;
|
|
4922
5532
|
const cell = evnt.currentTarget;
|
|
4923
|
-
|
|
5533
|
+
handleTargetEnterEvent($xeTable, tooltipStore.column !== column || !!tooltipStore.row);
|
|
4924
5534
|
if (tooltipStore.column !== column || !tooltipStore.visible) {
|
|
4925
|
-
|
|
4926
|
-
}
|
|
4927
|
-
},
|
|
4928
|
-
/**
|
|
4929
|
-
* 处理显示 tooltip
|
|
4930
|
-
* @param {Event} evnt 事件
|
|
4931
|
-
* @param {ColumnInfo} column 列配置
|
|
4932
|
-
* @param {Row} row 行对象
|
|
4933
|
-
*/
|
|
4934
|
-
handleTooltip(evnt, cell, overflowElem, tipElem, params) {
|
|
4935
|
-
const $xeTable = this;
|
|
4936
|
-
if (!overflowElem) {
|
|
4937
|
-
return $xeTable.$nextTick();
|
|
4938
|
-
}
|
|
4939
|
-
params.cell = cell;
|
|
4940
|
-
const {
|
|
4941
|
-
$refs,
|
|
4942
|
-
tooltipOpts,
|
|
4943
|
-
tooltipStore
|
|
4944
|
-
} = this;
|
|
4945
|
-
const {
|
|
4946
|
-
column,
|
|
4947
|
-
row
|
|
4948
|
-
} = params;
|
|
4949
|
-
const {
|
|
4950
|
-
showAll,
|
|
4951
|
-
enabled,
|
|
4952
|
-
contentMethod
|
|
4953
|
-
} = tooltipOpts;
|
|
4954
|
-
const customContent = contentMethod ? contentMethod(params) : null;
|
|
4955
|
-
const useCustom = contentMethod && !_xeUtils.default.eqNull(customContent);
|
|
4956
|
-
const content = useCustom ? customContent : (column.type === 'html' ? overflowElem.innerText : overflowElem.textContent).trim();
|
|
4957
|
-
const isCellOverflow = overflowElem.scrollWidth > overflowElem.clientWidth;
|
|
4958
|
-
if (content && (showAll || enabled || useCustom || isCellOverflow)) {
|
|
4959
|
-
Object.assign(tooltipStore, {
|
|
4960
|
-
row,
|
|
4961
|
-
column,
|
|
4962
|
-
visible: true,
|
|
4963
|
-
currOpts: {}
|
|
4964
|
-
});
|
|
4965
|
-
this.$nextTick(() => {
|
|
4966
|
-
const $tooltip = $refs.tooltip;
|
|
4967
|
-
if ($tooltip) {
|
|
4968
|
-
$tooltip.open(isCellOverflow ? overflowElem : tipElem || overflowElem, (0, _utils.formatText)(content));
|
|
4969
|
-
}
|
|
4970
|
-
});
|
|
5535
|
+
handleTooltip($xeTable, evnt, cell, cell.querySelector('.vxe-cell--wrapper') || cell.children[0], null, params);
|
|
4971
5536
|
}
|
|
4972
|
-
return this.$nextTick();
|
|
4973
5537
|
},
|
|
4974
5538
|
openTooltip(target, content) {
|
|
4975
5539
|
const {
|
|
@@ -4985,12 +5549,13 @@ const Methods = {
|
|
|
4985
5549
|
* 关闭 tooltip
|
|
4986
5550
|
*/
|
|
4987
5551
|
closeTooltip() {
|
|
5552
|
+
const $xeTable = this;
|
|
5553
|
+
const reactData = $xeTable;
|
|
4988
5554
|
const {
|
|
4989
|
-
$refs,
|
|
4990
5555
|
tooltipStore
|
|
4991
|
-
} =
|
|
4992
|
-
const tooltip = $refs.
|
|
4993
|
-
const commTip = $refs.refCommTooltip;
|
|
5556
|
+
} = reactData;
|
|
5557
|
+
const tooltip = $xeTable.$refs.refTooltip;
|
|
5558
|
+
const commTip = $xeTable.$refs.refCommTooltip;
|
|
4994
5559
|
if (tooltipStore.visible) {
|
|
4995
5560
|
Object.assign(tooltipStore, {
|
|
4996
5561
|
row: null,
|
|
@@ -6211,10 +6776,13 @@ const Methods = {
|
|
|
6211
6776
|
this.hoverRow = null;
|
|
6212
6777
|
},
|
|
6213
6778
|
triggerHeaderCellClickEvent(evnt, params) {
|
|
6779
|
+
const $xeTable = this;
|
|
6780
|
+
const internalData = $xeTable;
|
|
6214
6781
|
const {
|
|
6215
|
-
_lastResizeTime
|
|
6216
|
-
|
|
6217
|
-
|
|
6782
|
+
_lastResizeTime
|
|
6783
|
+
} = internalData;
|
|
6784
|
+
const sortOpts = $xeTable.computeSortOpts;
|
|
6785
|
+
const columnOpts = $xeTable.computeColumnOpts;
|
|
6218
6786
|
const {
|
|
6219
6787
|
column
|
|
6220
6788
|
} = params;
|
|
@@ -6223,18 +6791,18 @@ const Methods = {
|
|
|
6223
6791
|
const triggerSort = (0, _dom.getEventTargetNode)(evnt, cell, 'vxe-cell--sort').flag;
|
|
6224
6792
|
const triggerFilter = (0, _dom.getEventTargetNode)(evnt, cell, 'vxe-cell--filter').flag;
|
|
6225
6793
|
if (sortOpts.trigger === 'cell' && !(triggerResizable || triggerSort || triggerFilter)) {
|
|
6226
|
-
|
|
6794
|
+
$xeTable.triggerSortEvent(evnt, column, getNextSortOrder($xeTable, column));
|
|
6227
6795
|
}
|
|
6228
|
-
|
|
6796
|
+
$xeTable.dispatchEvent('header-cell-click', Object.assign({
|
|
6229
6797
|
triggerResizable,
|
|
6230
6798
|
triggerSort,
|
|
6231
6799
|
triggerFilter,
|
|
6232
6800
|
cell
|
|
6233
6801
|
}, params), evnt);
|
|
6234
|
-
if (
|
|
6235
|
-
|
|
6802
|
+
if (columnOpts.isCurrent || $xeTable.highlightCurrentColumn) {
|
|
6803
|
+
$xeTable.triggerCurrentColumnEvent(evnt, params);
|
|
6236
6804
|
}
|
|
6237
|
-
return
|
|
6805
|
+
return $xeTable.$nextTick();
|
|
6238
6806
|
},
|
|
6239
6807
|
triggerHeaderCellDblclickEvent(evnt, params) {
|
|
6240
6808
|
this.emitEvent('header-cell-dblclick', Object.assign({
|
|
@@ -6286,18 +6854,26 @@ const Methods = {
|
|
|
6286
6854
|
*/
|
|
6287
6855
|
triggerCellClickEvent(evnt, params) {
|
|
6288
6856
|
const $xeTable = this;
|
|
6857
|
+
const props = $xeTable;
|
|
6858
|
+
const reactData = $xeTable;
|
|
6289
6859
|
const {
|
|
6290
6860
|
highlightCurrentRow,
|
|
6861
|
+
editConfig
|
|
6862
|
+
} = props;
|
|
6863
|
+
const {
|
|
6291
6864
|
editStore,
|
|
6292
|
-
|
|
6293
|
-
|
|
6294
|
-
|
|
6295
|
-
|
|
6296
|
-
|
|
6297
|
-
|
|
6298
|
-
|
|
6299
|
-
|
|
6300
|
-
|
|
6865
|
+
isDragResize
|
|
6866
|
+
} = reactData;
|
|
6867
|
+
if (isDragResize) {
|
|
6868
|
+
return;
|
|
6869
|
+
}
|
|
6870
|
+
const expandOpts = $xeTable.computeExpandOpts;
|
|
6871
|
+
const editOpts = $xeTable.computeEditOpts;
|
|
6872
|
+
const treeOpts = $xeTable.computeTreeOpts;
|
|
6873
|
+
const radioOpts = $xeTable.computeRadioOpts;
|
|
6874
|
+
const checkboxOpts = $xeTable.computeCheckboxOpts;
|
|
6875
|
+
const keyboardOpts = $xeTable.computeKeyboardOpts;
|
|
6876
|
+
const rowOpts = $xeTable.computeRowOpts;
|
|
6301
6877
|
const {
|
|
6302
6878
|
actived,
|
|
6303
6879
|
focused
|
|
@@ -6396,11 +6972,20 @@ const Methods = {
|
|
|
6396
6972
|
* 如果是双击模式,则激活为编辑状态
|
|
6397
6973
|
*/
|
|
6398
6974
|
triggerCellDblclickEvent(evnt, params) {
|
|
6975
|
+
const $xeTable = this;
|
|
6976
|
+
const props = $xeTable;
|
|
6977
|
+
const reactData = $xeTable;
|
|
6978
|
+
const {
|
|
6979
|
+
editConfig
|
|
6980
|
+
} = props;
|
|
6399
6981
|
const {
|
|
6400
6982
|
editStore,
|
|
6401
|
-
|
|
6402
|
-
|
|
6403
|
-
|
|
6983
|
+
isDragResize
|
|
6984
|
+
} = reactData;
|
|
6985
|
+
if (isDragResize) {
|
|
6986
|
+
return;
|
|
6987
|
+
}
|
|
6988
|
+
const editOpts = $xeTable.computeEditOpts;
|
|
6404
6989
|
const {
|
|
6405
6990
|
actived
|
|
6406
6991
|
} = editStore;
|
|
@@ -6488,6 +7073,10 @@ const Methods = {
|
|
|
6488
7073
|
triggerSortEvent(evnt, column, order) {
|
|
6489
7074
|
const $xeTable = this;
|
|
6490
7075
|
const sortOpts = $xeTable.computeSortOpts;
|
|
7076
|
+
const {
|
|
7077
|
+
multiple,
|
|
7078
|
+
allowClear
|
|
7079
|
+
} = sortOpts;
|
|
6491
7080
|
const {
|
|
6492
7081
|
field,
|
|
6493
7082
|
sortable,
|
|
@@ -6495,7 +7084,9 @@ const Methods = {
|
|
|
6495
7084
|
} = column;
|
|
6496
7085
|
if (sortable || remoteSort) {
|
|
6497
7086
|
if (!order || column.order === order) {
|
|
6498
|
-
|
|
7087
|
+
if (allowClear) {
|
|
7088
|
+
$xeTable.clearSort(multiple ? column : null);
|
|
7089
|
+
}
|
|
6499
7090
|
} else {
|
|
6500
7091
|
$xeTable.sort({
|
|
6501
7092
|
field,
|
|
@@ -6630,7 +7221,8 @@ const Methods = {
|
|
|
6630
7221
|
isPeerDrag,
|
|
6631
7222
|
isCrossDrag,
|
|
6632
7223
|
isSelfToChildDrag,
|
|
6633
|
-
dragEndMethod
|
|
7224
|
+
dragEndMethod,
|
|
7225
|
+
dragToChildMethod
|
|
6634
7226
|
} = rowDragOpts;
|
|
6635
7227
|
const treeOpts = $xeTable.computeTreeOpts;
|
|
6636
7228
|
const {
|
|
@@ -6649,13 +7241,15 @@ const Methods = {
|
|
|
6649
7241
|
if (prevDragRow && dragRow) {
|
|
6650
7242
|
// 判断是否有拖动
|
|
6651
7243
|
if (prevDragRow !== dragRow) {
|
|
6652
|
-
|
|
7244
|
+
const dragParams = {
|
|
6653
7245
|
oldRow: dragRow,
|
|
6654
7246
|
newRow: prevDragRow,
|
|
6655
7247
|
dragPos: prevDragPos,
|
|
6656
7248
|
dragToChild: !!prevDragToChild,
|
|
6657
7249
|
offsetIndex: dragOffsetIndex
|
|
6658
|
-
}
|
|
7250
|
+
};
|
|
7251
|
+
const isDragToChildFlag = isSelfToChildDrag && dragToChildMethod ? dragToChildMethod(dragParams) : prevDragToChild;
|
|
7252
|
+
return Promise.resolve(dEndMethod ? dEndMethod(dragParams) : true).then(status => {
|
|
6659
7253
|
if (!status) {
|
|
6660
7254
|
return;
|
|
6661
7255
|
}
|
|
@@ -6733,7 +7327,9 @@ const Methods = {
|
|
|
6733
7327
|
// 根到根
|
|
6734
7328
|
}
|
|
6735
7329
|
const fullList = _xeUtils.default.toTreeArray(internalData.afterTreeFullData, {
|
|
6736
|
-
|
|
7330
|
+
key: rowField,
|
|
7331
|
+
parentKey: parentField,
|
|
7332
|
+
children: mapChildrenField
|
|
6737
7333
|
});
|
|
6738
7334
|
// 移出
|
|
6739
7335
|
const otfIndex = $xeTable.findRowIndexOf(fullList, dragRow);
|
|
@@ -6748,12 +7344,12 @@ const Methods = {
|
|
|
6748
7344
|
childRow[parentField] = dragRow[parentField];
|
|
6749
7345
|
});
|
|
6750
7346
|
}
|
|
6751
|
-
dragRow[parentField] =
|
|
7347
|
+
dragRow[parentField] = isDragToChildFlag ? prevDragRow[rowField] : prevDragRow[parentField];
|
|
6752
7348
|
internalData.tableFullTreeData = _xeUtils.default.toArrayTree(fullList, {
|
|
6753
|
-
key:
|
|
6754
|
-
parentKey:
|
|
7349
|
+
key: rowField,
|
|
7350
|
+
parentKey: parentField,
|
|
6755
7351
|
children: childrenField,
|
|
6756
|
-
mapChildren:
|
|
7352
|
+
mapChildren: mapChildrenField
|
|
6757
7353
|
});
|
|
6758
7354
|
}
|
|
6759
7355
|
}
|
|
@@ -6773,7 +7369,7 @@ const Methods = {
|
|
|
6773
7369
|
}
|
|
6774
7370
|
reactData.isDragRowMove = true;
|
|
6775
7371
|
$xeTable.handleTableData(treeConfig && transform);
|
|
6776
|
-
$xeTable.cacheRowMap();
|
|
7372
|
+
$xeTable.cacheRowMap(false);
|
|
6777
7373
|
updateScrollYStatus($xeTable);
|
|
6778
7374
|
if (!(treeConfig && transform)) {
|
|
6779
7375
|
updateAfterDataIndex($xeTable);
|
|
@@ -6790,7 +7386,7 @@ const Methods = {
|
|
|
6790
7386
|
oldRow: dragRow,
|
|
6791
7387
|
newRow: prevDragRow,
|
|
6792
7388
|
dragPos: prevDragPos,
|
|
6793
|
-
dragToChild:
|
|
7389
|
+
dragToChild: isDragToChildFlag,
|
|
6794
7390
|
offsetIndex: dragOffsetIndex,
|
|
6795
7391
|
_index: {
|
|
6796
7392
|
newIndex: nafIndex,
|
|
@@ -6826,18 +7422,16 @@ const Methods = {
|
|
|
6826
7422
|
prevDragRow,
|
|
6827
7423
|
prevDragPos
|
|
6828
7424
|
} = internalData;
|
|
6829
|
-
if (treeConfig && prevDragToChild) {
|
|
7425
|
+
if (treeConfig && lazy && prevDragToChild) {
|
|
6830
7426
|
// 懒加载
|
|
6831
|
-
|
|
6832
|
-
|
|
6833
|
-
|
|
6834
|
-
if (
|
|
6835
|
-
if (rowRest && rowRest.treeLoaded) {
|
|
6836
|
-
$xeTable.handleRowDragSwapEvent(evnt, true, dragRow, prevDragRow, prevDragPos, prevDragToChild);
|
|
6837
|
-
}
|
|
6838
|
-
} else {
|
|
7427
|
+
const newRowid = (0, _util.getRowid)($xeTable, prevDragRow);
|
|
7428
|
+
const rowRest = fullAllDataRowIdData[newRowid];
|
|
7429
|
+
if (prevDragRow[hasChildField]) {
|
|
7430
|
+
if (rowRest && rowRest.treeLoaded) {
|
|
6839
7431
|
$xeTable.handleRowDragSwapEvent(evnt, true, dragRow, prevDragRow, prevDragPos, prevDragToChild);
|
|
6840
7432
|
}
|
|
7433
|
+
} else {
|
|
7434
|
+
$xeTable.handleRowDragSwapEvent(evnt, true, dragRow, prevDragRow, prevDragPos, prevDragToChild);
|
|
6841
7435
|
}
|
|
6842
7436
|
} else {
|
|
6843
7437
|
$xeTable.handleRowDragSwapEvent(evnt, true, dragRow, prevDragRow, prevDragPos, prevDragToChild);
|
|
@@ -6982,7 +7576,8 @@ const Methods = {
|
|
|
6982
7576
|
isCrossDrag,
|
|
6983
7577
|
isSelfToChildDrag,
|
|
6984
7578
|
isToChildDrag,
|
|
6985
|
-
dragEndMethod
|
|
7579
|
+
dragEndMethod,
|
|
7580
|
+
dragToChildMethod
|
|
6986
7581
|
} = columnDragOpts;
|
|
6987
7582
|
const {
|
|
6988
7583
|
collectColumn
|
|
@@ -6993,13 +7588,15 @@ const Methods = {
|
|
|
6993
7588
|
if (prevDragCol !== dragCol) {
|
|
6994
7589
|
const oldColumn = dragCol;
|
|
6995
7590
|
const newColumn = prevDragCol;
|
|
6996
|
-
|
|
7591
|
+
const dragParams = {
|
|
6997
7592
|
oldColumn,
|
|
6998
7593
|
newColumn,
|
|
6999
7594
|
dragPos: prevDragPos,
|
|
7000
7595
|
dragToChild: !!prevDragToChild,
|
|
7001
7596
|
offsetIndex: dragOffsetIndex
|
|
7002
|
-
}
|
|
7597
|
+
};
|
|
7598
|
+
const isDragToChildFlag = isSelfToChildDrag && dragToChildMethod ? dragToChildMethod(dragParams) : prevDragToChild;
|
|
7599
|
+
return Promise.resolve(dragEndMethod ? dragEndMethod(dragParams) : true).then(status => {
|
|
7003
7600
|
if (!status) {
|
|
7004
7601
|
return;
|
|
7005
7602
|
}
|
|
@@ -7095,7 +7692,7 @@ const Methods = {
|
|
|
7095
7692
|
parent: nParent
|
|
7096
7693
|
} = newMatchRest;
|
|
7097
7694
|
// 转子级
|
|
7098
|
-
if (isCrossDrag && isToChildDrag &&
|
|
7695
|
+
if (isCrossDrag && isToChildDrag && isDragToChildFlag) {
|
|
7099
7696
|
oldColumn.parentId = newColumn.id;
|
|
7100
7697
|
newColumn.children = (newColumn.children || []).concat([oldColumn]);
|
|
7101
7698
|
} else {
|
|
@@ -7126,7 +7723,7 @@ const Methods = {
|
|
|
7126
7723
|
oldColumn,
|
|
7127
7724
|
newColumn,
|
|
7128
7725
|
dragPos: prevDragPos,
|
|
7129
|
-
dragToChild:
|
|
7726
|
+
dragToChild: isDragToChildFlag,
|
|
7130
7727
|
offsetIndex: dragOffsetIndex,
|
|
7131
7728
|
_index: {
|
|
7132
7729
|
newIndex: nafIndex,
|
|
@@ -8377,17 +8974,22 @@ const Methods = {
|
|
|
8377
8974
|
* 获取表格的滚动状态
|
|
8378
8975
|
*/
|
|
8379
8976
|
getScroll() {
|
|
8977
|
+
const $xeTable = this;
|
|
8978
|
+
const reactData = $xeTable;
|
|
8979
|
+
const internalData = $xeTable;
|
|
8380
8980
|
const {
|
|
8381
|
-
$refs,
|
|
8382
8981
|
scrollXLoad,
|
|
8383
8982
|
scrollYLoad
|
|
8384
|
-
} =
|
|
8385
|
-
const
|
|
8983
|
+
} = reactData;
|
|
8984
|
+
const {
|
|
8985
|
+
elemStore
|
|
8986
|
+
} = internalData;
|
|
8987
|
+
const bodyScrollElem = (0, _util.getRefElem)(elemStore['main-body-scroll']);
|
|
8386
8988
|
return {
|
|
8387
8989
|
virtualX: scrollXLoad,
|
|
8388
8990
|
virtualY: scrollYLoad,
|
|
8389
|
-
scrollTop:
|
|
8390
|
-
scrollLeft:
|
|
8991
|
+
scrollTop: bodyScrollElem ? bodyScrollElem.scrollTop : 0,
|
|
8992
|
+
scrollLeft: bodyScrollElem ? bodyScrollElem.scrollLeft : 0
|
|
8391
8993
|
};
|
|
8392
8994
|
},
|
|
8393
8995
|
handleScrollEvent(evnt, isRollY, isRollX, scrollTop, scrollLeft, params) {
|
|
@@ -8495,60 +9097,6 @@ const Methods = {
|
|
|
8495
9097
|
}
|
|
8496
9098
|
$xeTable.dispatchEvent('scroll', evntParams, evnt);
|
|
8497
9099
|
},
|
|
8498
|
-
lazyScrollXData() {
|
|
8499
|
-
const $xeTable = this;
|
|
8500
|
-
const internalData = $xeTable;
|
|
8501
|
-
const {
|
|
8502
|
-
lxTimeout,
|
|
8503
|
-
lxRunTime,
|
|
8504
|
-
scrollXStore
|
|
8505
|
-
} = internalData;
|
|
8506
|
-
const {
|
|
8507
|
-
visibleSize
|
|
8508
|
-
} = scrollXStore;
|
|
8509
|
-
const fpsTime = Math.max(5, Math.min(80, Math.floor(visibleSize * 3)));
|
|
8510
|
-
if (lxTimeout) {
|
|
8511
|
-
clearTimeout(lxTimeout);
|
|
8512
|
-
}
|
|
8513
|
-
if (!lxRunTime || lxRunTime + fpsTime < Date.now()) {
|
|
8514
|
-
internalData.lxRunTime = Date.now();
|
|
8515
|
-
loadScrollXData($xeTable);
|
|
8516
|
-
}
|
|
8517
|
-
internalData.lxTimeout = setTimeout(() => {
|
|
8518
|
-
internalData.lxTimeout = undefined;
|
|
8519
|
-
internalData.lxRunTime = undefined;
|
|
8520
|
-
loadScrollXData($xeTable);
|
|
8521
|
-
}, fpsTime);
|
|
8522
|
-
},
|
|
8523
|
-
lazyScrollYData() {
|
|
8524
|
-
const $xeTable = this;
|
|
8525
|
-
const props = $xeTable;
|
|
8526
|
-
const internalData = $xeTable;
|
|
8527
|
-
const {
|
|
8528
|
-
showOverflow
|
|
8529
|
-
} = props;
|
|
8530
|
-
const {
|
|
8531
|
-
lyTimeout,
|
|
8532
|
-
lyRunTime,
|
|
8533
|
-
scrollYStore
|
|
8534
|
-
} = internalData;
|
|
8535
|
-
const {
|
|
8536
|
-
visibleSize
|
|
8537
|
-
} = scrollYStore;
|
|
8538
|
-
const fpsTime = showOverflow ? 5 : Math.max(5, Math.min(80, Math.floor(visibleSize / 2)));
|
|
8539
|
-
if (lyTimeout) {
|
|
8540
|
-
clearTimeout(lyTimeout);
|
|
8541
|
-
}
|
|
8542
|
-
if (!lyRunTime || lyRunTime + fpsTime < Date.now()) {
|
|
8543
|
-
internalData.lyRunTime = Date.now();
|
|
8544
|
-
loadScrollYData($xeTable);
|
|
8545
|
-
}
|
|
8546
|
-
internalData.lyTimeout = setTimeout(() => {
|
|
8547
|
-
internalData.lyTimeout = undefined;
|
|
8548
|
-
internalData.lyRunTime = undefined;
|
|
8549
|
-
loadScrollYData($xeTable);
|
|
8550
|
-
}, fpsTime);
|
|
8551
|
-
},
|
|
8552
9100
|
/**
|
|
8553
9101
|
* 横向 X 可视渲染事件处理
|
|
8554
9102
|
*/
|
|
@@ -8558,7 +9106,7 @@ const Methods = {
|
|
|
8558
9106
|
if (sXOpts.immediate) {
|
|
8559
9107
|
loadScrollXData($xeTable);
|
|
8560
9108
|
} else {
|
|
8561
|
-
$xeTable
|
|
9109
|
+
lazyScrollXData($xeTable);
|
|
8562
9110
|
}
|
|
8563
9111
|
},
|
|
8564
9112
|
/**
|
|
@@ -8570,7 +9118,7 @@ const Methods = {
|
|
|
8570
9118
|
if (sYOpts.immediate) {
|
|
8571
9119
|
loadScrollYData($xeTable);
|
|
8572
9120
|
} else {
|
|
8573
|
-
$xeTable
|
|
9121
|
+
lazyScrollYData($xeTable);
|
|
8574
9122
|
}
|
|
8575
9123
|
},
|
|
8576
9124
|
triggerBodyScrollEvent(evnt, fixedType) {
|
|
@@ -8578,6 +9126,7 @@ const Methods = {
|
|
|
8578
9126
|
const internalData = $xeTable;
|
|
8579
9127
|
const {
|
|
8580
9128
|
elemStore,
|
|
9129
|
+
intoRunScroll,
|
|
8581
9130
|
lastScrollTop,
|
|
8582
9131
|
lastScrollLeft,
|
|
8583
9132
|
inWheelScroll,
|
|
@@ -8597,6 +9146,9 @@ const Methods = {
|
|
|
8597
9146
|
if (inWheelScroll || inVirtualScroll || inHeaderScroll || inFooterScroll) {
|
|
8598
9147
|
return;
|
|
8599
9148
|
}
|
|
9149
|
+
if (intoRunScroll) {
|
|
9150
|
+
return;
|
|
9151
|
+
}
|
|
8600
9152
|
if (!bodyScrollElem) {
|
|
8601
9153
|
return;
|
|
8602
9154
|
}
|
|
@@ -8655,6 +9207,7 @@ const Methods = {
|
|
|
8655
9207
|
const internalData = $xeTable;
|
|
8656
9208
|
const {
|
|
8657
9209
|
elemStore,
|
|
9210
|
+
intoRunScroll,
|
|
8658
9211
|
inWheelScroll,
|
|
8659
9212
|
inVirtualScroll,
|
|
8660
9213
|
inBodyScroll,
|
|
@@ -8665,16 +9218,10 @@ const Methods = {
|
|
|
8665
9218
|
const bodyScrollElem = (0, _util.getRefElem)(elemStore['main-body-scroll']);
|
|
8666
9219
|
const headerScrollElem = (0, _util.getRefElem)(elemStore['main-header-scroll']);
|
|
8667
9220
|
const footerScrollElem = (0, _util.getRefElem)(elemStore['main-footer-scroll']);
|
|
8668
|
-
if (inWheelScroll) {
|
|
8669
|
-
return;
|
|
8670
|
-
}
|
|
8671
|
-
if (inVirtualScroll) {
|
|
8672
|
-
return;
|
|
8673
|
-
}
|
|
8674
|
-
if (inBodyScroll) {
|
|
9221
|
+
if (inWheelScroll || inVirtualScroll || inBodyScroll || inFooterScroll) {
|
|
8675
9222
|
return;
|
|
8676
9223
|
}
|
|
8677
|
-
if (
|
|
9224
|
+
if (intoRunScroll) {
|
|
8678
9225
|
return;
|
|
8679
9226
|
}
|
|
8680
9227
|
if (!headerScrollElem) {
|
|
@@ -8705,6 +9252,7 @@ const Methods = {
|
|
|
8705
9252
|
const internalData = $xeTable;
|
|
8706
9253
|
const {
|
|
8707
9254
|
elemStore,
|
|
9255
|
+
intoRunScroll,
|
|
8708
9256
|
inWheelScroll,
|
|
8709
9257
|
inVirtualScroll,
|
|
8710
9258
|
inHeaderScroll,
|
|
@@ -8715,16 +9263,10 @@ const Methods = {
|
|
|
8715
9263
|
const bodyScrollElem = (0, _util.getRefElem)(elemStore['main-body-scroll']);
|
|
8716
9264
|
const headerScrollElem = (0, _util.getRefElem)(elemStore['main-header-scroll']);
|
|
8717
9265
|
const footerScrollElem = (0, _util.getRefElem)(elemStore['main-footer-scroll']);
|
|
8718
|
-
if (inWheelScroll) {
|
|
8719
|
-
return;
|
|
8720
|
-
}
|
|
8721
|
-
if (inVirtualScroll) {
|
|
8722
|
-
return;
|
|
8723
|
-
}
|
|
8724
|
-
if (inHeaderScroll) {
|
|
9266
|
+
if (inWheelScroll || inVirtualScroll || inHeaderScroll || inBodyScroll) {
|
|
8725
9267
|
return;
|
|
8726
9268
|
}
|
|
8727
|
-
if (
|
|
9269
|
+
if (intoRunScroll) {
|
|
8728
9270
|
return;
|
|
8729
9271
|
}
|
|
8730
9272
|
if (!footerScrollElem) {
|
|
@@ -8756,9 +9298,13 @@ const Methods = {
|
|
|
8756
9298
|
const reactData = $xeTable;
|
|
8757
9299
|
const internalData = $xeTable;
|
|
8758
9300
|
const {
|
|
9301
|
+
target,
|
|
8759
9302
|
deltaY,
|
|
8760
9303
|
deltaX
|
|
8761
9304
|
} = evnt;
|
|
9305
|
+
if (target && /^textarea$/i.test(target.tagName)) {
|
|
9306
|
+
return;
|
|
9307
|
+
}
|
|
8762
9308
|
const {
|
|
8763
9309
|
highlightHoverRow
|
|
8764
9310
|
} = tableProps;
|
|
@@ -8782,26 +9328,13 @@ const Methods = {
|
|
|
8782
9328
|
if (!bodyScrollElem) {
|
|
8783
9329
|
return;
|
|
8784
9330
|
}
|
|
8785
|
-
|
|
8786
|
-
|
|
8787
|
-
|
|
8788
|
-
} else if (reactData.lastScrollTime + 30 > Date.now()) {
|
|
8789
|
-
multiple = 1.15;
|
|
8790
|
-
} else if (reactData.lastScrollTime + 40 > Date.now()) {
|
|
8791
|
-
multiple = 1.12;
|
|
8792
|
-
} else if (reactData.lastScrollTime + 55 > Date.now()) {
|
|
8793
|
-
multiple = 1.09;
|
|
8794
|
-
} else if (reactData.lastScrollTime + 75 > Date.now()) {
|
|
8795
|
-
multiple = 1.06;
|
|
8796
|
-
} else if (reactData.lastScrollTime + 100 > Date.now()) {
|
|
8797
|
-
multiple = 1.03;
|
|
8798
|
-
}
|
|
8799
|
-
const deltaTop = deltaY * multiple;
|
|
8800
|
-
const deltaLeft = deltaX * multiple;
|
|
9331
|
+
const wheelSpeed = getWheelSpeed(reactData.lastScrollTime);
|
|
9332
|
+
const deltaTop = deltaY * wheelSpeed;
|
|
9333
|
+
const deltaLeft = deltaX * wheelSpeed;
|
|
8801
9334
|
const isTopWheel = deltaTop < 0;
|
|
8802
|
-
const currScrollTop =
|
|
9335
|
+
const currScrollTop = bodyScrollElem.scrollTop;
|
|
8803
9336
|
// 如果滚动位置已经是顶部或底部,则不需要触发
|
|
8804
|
-
if (isTopWheel ? currScrollTop <= 0 : currScrollTop >=
|
|
9337
|
+
if (isTopWheel ? currScrollTop <= 0 : currScrollTop >= bodyScrollElem.scrollHeight - bodyScrollElem.clientHeight) {
|
|
8805
9338
|
return;
|
|
8806
9339
|
}
|
|
8807
9340
|
const scrollTop = bodyScrollElem.scrollTop + deltaTop;
|
|
@@ -8814,16 +9347,29 @@ const Methods = {
|
|
|
8814
9347
|
if (rowOpts.isHover || highlightHoverRow) {
|
|
8815
9348
|
$xeTable.clearHoverRow();
|
|
8816
9349
|
}
|
|
8817
|
-
|
|
8818
|
-
|
|
8819
|
-
|
|
8820
|
-
|
|
8821
|
-
|
|
8822
|
-
|
|
8823
|
-
|
|
8824
|
-
|
|
8825
|
-
|
|
9350
|
+
wheelScrollTo(scrollTop - bodyScrollElem.scrollTop, offsetTop => {
|
|
9351
|
+
const currTopNum = bodyScrollElem.scrollTop + offsetTop;
|
|
9352
|
+
internalData.inWheelScroll = true;
|
|
9353
|
+
(0, _dom.setScrollTop)(yHandleEl, currTopNum);
|
|
9354
|
+
(0, _dom.setScrollTop)(bodyScrollElem, currTopNum);
|
|
9355
|
+
(0, _dom.setScrollTop)(leftScrollElem, currTopNum);
|
|
9356
|
+
(0, _dom.setScrollTop)(rightScrollElem, currTopNum);
|
|
9357
|
+
$xeTable.triggerScrollYEvent(evnt);
|
|
9358
|
+
$xeTable.handleScrollEvent(evnt, isRollY, isRollX, currTopNum, scrollLeft, {
|
|
9359
|
+
type: 'table',
|
|
9360
|
+
fixed: ''
|
|
9361
|
+
});
|
|
8826
9362
|
});
|
|
9363
|
+
// internalData.inWheelScroll = true
|
|
9364
|
+
// setScrollTop(yHandleEl, scrollTop)
|
|
9365
|
+
// setScrollTop(bodyScrollElem, scrollTop)
|
|
9366
|
+
// setScrollTop(leftScrollElem, scrollTop)
|
|
9367
|
+
// setScrollTop(rightScrollElem, scrollTop)
|
|
9368
|
+
// loadScrollYData($xeTable, scrollTop)
|
|
9369
|
+
// $xeTable.handleScrollEvent(evnt, isRollY, isRollX, scrollTop, scrollLeft, {
|
|
9370
|
+
// type: 'footer',
|
|
9371
|
+
// fixed: ''
|
|
9372
|
+
// })
|
|
8827
9373
|
}
|
|
8828
9374
|
},
|
|
8829
9375
|
triggerVirtualScrollXEvent(evnt) {
|
|
@@ -8912,17 +9458,15 @@ const Methods = {
|
|
|
8912
9458
|
},
|
|
8913
9459
|
updateScrollXData() {
|
|
8914
9460
|
const $xeTable = this;
|
|
8915
|
-
const
|
|
9461
|
+
const reactData = $xeTable;
|
|
8916
9462
|
const {
|
|
8917
|
-
|
|
8918
|
-
} =
|
|
9463
|
+
isAllOverflow
|
|
9464
|
+
} = reactData;
|
|
8919
9465
|
handleTableColumn($xeTable);
|
|
8920
|
-
// calcCellHeight()
|
|
8921
9466
|
return $xeTable.$nextTick().then(() => {
|
|
8922
|
-
// calcCellHeight()
|
|
8923
9467
|
handleTableColumn($xeTable);
|
|
8924
9468
|
$xeTable.updateScrollXSpace();
|
|
8925
|
-
if (!
|
|
9469
|
+
if (!isAllOverflow) {
|
|
8926
9470
|
$xeTable.updateScrollYSpace();
|
|
8927
9471
|
}
|
|
8928
9472
|
});
|
|
@@ -8986,9 +9530,7 @@ const Methods = {
|
|
|
8986
9530
|
updateScrollYData() {
|
|
8987
9531
|
const $xeTable = this;
|
|
8988
9532
|
$xeTable.handleTableData();
|
|
8989
|
-
// calcCellHeight()
|
|
8990
9533
|
return $xeTable.$nextTick().then(() => {
|
|
8991
|
-
// calcCellHeight()
|
|
8992
9534
|
$xeTable.handleTableData();
|
|
8993
9535
|
$xeTable.updateScrollYSpace();
|
|
8994
9536
|
});
|
|
@@ -8996,49 +9538,46 @@ const Methods = {
|
|
|
8996
9538
|
// 更新纵向 Y 可视渲染上下剩余空间大小
|
|
8997
9539
|
updateScrollYSpace() {
|
|
8998
9540
|
const $xeTable = this;
|
|
8999
|
-
const props = $xeTable;
|
|
9000
9541
|
const reactData = $xeTable;
|
|
9001
9542
|
const internalData = $xeTable;
|
|
9002
9543
|
const {
|
|
9003
|
-
|
|
9004
|
-
|
|
9005
|
-
const {
|
|
9006
|
-
scrollYLoad,
|
|
9007
|
-
rowHeight
|
|
9544
|
+
isAllOverflow,
|
|
9545
|
+
scrollYLoad
|
|
9008
9546
|
} = reactData;
|
|
9009
9547
|
const {
|
|
9010
9548
|
scrollYStore,
|
|
9011
9549
|
elemStore,
|
|
9550
|
+
isResizeCellHeight,
|
|
9012
9551
|
afterFullData,
|
|
9013
9552
|
fullAllDataRowIdData
|
|
9014
9553
|
} = internalData;
|
|
9015
9554
|
const {
|
|
9016
9555
|
startIndex
|
|
9017
9556
|
} = scrollYStore;
|
|
9557
|
+
const rowOpts = $xeTable.computeRowOpts;
|
|
9558
|
+
const cellOpts = $xeTable.computeCellOpts;
|
|
9559
|
+
const defaultRowHeight = $xeTable.computeDefaultRowHeight;
|
|
9018
9560
|
const bodyTableElem = (0, _util.getRefElem)(elemStore['main-body-table']);
|
|
9019
9561
|
const containerList = ['main', 'left', 'right'];
|
|
9020
9562
|
let topSpaceHeight = 0;
|
|
9021
9563
|
let ySpaceHeight = 0;
|
|
9022
9564
|
if (scrollYLoad) {
|
|
9023
|
-
|
|
9024
|
-
|
|
9025
|
-
|
|
9565
|
+
const isCustomCellHeight = isResizeCellHeight || cellOpts.height || rowOpts.height;
|
|
9566
|
+
if (!isCustomCellHeight && isAllOverflow) {
|
|
9567
|
+
ySpaceHeight = afterFullData.length * defaultRowHeight;
|
|
9568
|
+
topSpaceHeight = Math.max(0, startIndex * defaultRowHeight);
|
|
9026
9569
|
} else {
|
|
9027
9570
|
for (let i = 0; i < afterFullData.length; i++) {
|
|
9028
9571
|
const row = afterFullData[i];
|
|
9029
9572
|
const rowid = (0, _util.getRowid)($xeTable, row);
|
|
9030
|
-
const rowRest = fullAllDataRowIdData[rowid];
|
|
9031
|
-
|
|
9032
|
-
ySpaceHeight += rowRest.height || rowHeight;
|
|
9033
|
-
}
|
|
9573
|
+
const rowRest = fullAllDataRowIdData[rowid] || {};
|
|
9574
|
+
ySpaceHeight += rowRest.resizeHeight || rowRest.height || cellOpts.height || rowOpts.height || defaultRowHeight;
|
|
9034
9575
|
}
|
|
9035
9576
|
for (let i = 0; i < startIndex; i++) {
|
|
9036
9577
|
const row = afterFullData[i];
|
|
9037
9578
|
const rowid = (0, _util.getRowid)($xeTable, row);
|
|
9038
|
-
const rowRest = fullAllDataRowIdData[rowid];
|
|
9039
|
-
|
|
9040
|
-
topSpaceHeight += rowRest.height || rowHeight;
|
|
9041
|
-
}
|
|
9579
|
+
const rowRest = fullAllDataRowIdData[rowid] || {};
|
|
9580
|
+
topSpaceHeight += rowRest.resizeHeight || rowRest.height || cellOpts.height || rowOpts.height || defaultRowHeight;
|
|
9042
9581
|
}
|
|
9043
9582
|
}
|
|
9044
9583
|
} else {
|
|
@@ -9063,7 +9602,7 @@ const Methods = {
|
|
|
9063
9602
|
if (scrollYSpaceEl) {
|
|
9064
9603
|
scrollYSpaceEl.style.height = ySpaceHeight ? `${ySpaceHeight}px` : '';
|
|
9065
9604
|
}
|
|
9066
|
-
$xeTable.$nextTick(() => {
|
|
9605
|
+
return $xeTable.$nextTick().then(() => {
|
|
9067
9606
|
updateStyle($xeTable);
|
|
9068
9607
|
});
|
|
9069
9608
|
},
|
|
@@ -9134,12 +9673,9 @@ const Methods = {
|
|
|
9134
9673
|
*/
|
|
9135
9674
|
scrollToRow(row, fieldOrColumn) {
|
|
9136
9675
|
const $xeTable = this;
|
|
9137
|
-
const props = $xeTable;
|
|
9138
9676
|
const reactData = $xeTable;
|
|
9139
9677
|
const {
|
|
9140
|
-
|
|
9141
|
-
} = props;
|
|
9142
|
-
const {
|
|
9678
|
+
isAllOverflow,
|
|
9143
9679
|
scrollYLoad,
|
|
9144
9680
|
scrollXLoad
|
|
9145
9681
|
} = reactData;
|
|
@@ -9156,7 +9692,7 @@ const Methods = {
|
|
|
9156
9692
|
}
|
|
9157
9693
|
return Promise.all(rest).then(() => {
|
|
9158
9694
|
if (row) {
|
|
9159
|
-
if (!
|
|
9695
|
+
if (!isAllOverflow && (scrollYLoad || scrollXLoad)) {
|
|
9160
9696
|
calcCellHeight($xeTable);
|
|
9161
9697
|
calcCellWidth($xeTable);
|
|
9162
9698
|
}
|