vxe-table 4.13.0-beta.4 → 4.13.0

package/es/table/src/table.js

@@ -1454,10 +1454,8 @@ export default defineComponent({
          */
         const autoCellWidth = () => {
             const { elemStore } = internalData;
-            const scrollbarOpts = computeScrollbarOpts.value;
-            const tableBody = refTableBody.value;
-            const bodyElem = tableBody ? tableBody.$el : null;
-            if (!bodyElem) {
+            const bodyWrapperElem = getRefElem(elemStore['main-body-wrapper']);
+            if (!bodyWrapperElem) {
                 return;
             }
             const yHandleEl = refScrollYHandleElem.value;
@@ -1470,7 +1468,7 @@ export default defineComponent({
             }
             let tWidth = 0;
             const minCellWidth = 40; // 列宽最少限制 40px
-            const bodyWidth = bodyElem.clientWidth;
+            const bodyWidth = bodyWrapperElem.clientWidth;
             let remainWidth = bodyWidth;
             let meanWidth = remainWidth / 100;
             const { fit } = props;
@@ -1555,28 +1553,10 @@ export default defineComponent({
                     }
                 }
             }
-            const tableHeight = bodyElem.offsetHeight;
-            const overflowY = yHandleEl.scrollHeight > yHandleEl.clientHeight;
-            reactData.scrollbarWidth = Math.max(scrollbarOpts.width || 0, yHandleEl.offsetWidth - yHandleEl.clientWidth);
-            reactData.overflowY = overflowY;
             reactData.scrollXWidth = tWidth;
-            internalData.tableHeight = tableHeight;
-            const headerTableElem = getRefElem(elemStore['main-header-table']);
-            const footerTableElem = getRefElem(elemStore['main-footer-table']);
-            const headerHeight = headerTableElem ? headerTableElem.clientHeight : 0;
-            const overflowX = tWidth > bodyWidth;
-            const footerHeight = footerTableElem ? footerTableElem.clientHeight : 0;
-            reactData.scrollbarHeight = Math.max(scrollbarOpts.height || 0, xHandleEl.offsetHeight - xHandleEl.clientHeight);
-            internalData.headerHeight = headerHeight;
-            internalData.footerHeight = footerHeight;
-            reactData.overflowX = overflowX;
             reactData.resizeWidthFlag++;
             updateColumnOffsetLeft();
             updateHeight();
-            reactData.parentHeight = Math.max(internalData.headerHeight + footerHeight + 20, $xeTable.getParentHeight());
-            if (overflowX) {
-                $xeTable.checkScrolling();
-            }
         };
         const calcCellAutoHeight = (rowRest, wrapperEl) => {
             const cellElemList = wrapperEl.querySelectorAll(`.vxe-cell--wrapper[rowid="${rowRest.rowid}"]`);
@@ -2641,7 +2621,7 @@ export default defineComponent({
                 }
                 // 计算 Y 逻辑
                 const rowHeight = computeRowHeight();
-                scrollYStore.rowHeight = rowHeight;
+                scrollYStore.rowHeight = rowHeight; // 已废弃
                 reactData.rowHeight = rowHeight;
                 const { toVisibleIndex: toYVisibleIndex, visibleSize: visibleYSize } = handleVirtualYVisible();
                 if (scrollYLoad) {
@@ -2659,11 +2639,41 @@ export default defineComponent({
                 else {
                     $xeTable.updateScrollYSpace();
                 }
-                nextTick(() => {
-                    updateStyle();
-                });
             });
         };
+        const calcScrollbar = () => {
+            const { scrollXWidth, scrollYHeight } = reactData;
+            const { elemStore } = internalData;
+            const scrollbarOpts = computeScrollbarOpts.value;
+            const bodyWrapperElem = getRefElem(elemStore['main-body-wrapper']);
+            const headerTableElem = getRefElem(elemStore['main-header-table']);
+            const footerTableElem = getRefElem(elemStore['main-footer-table']);
+            const xHandleEl = refScrollXHandleElem.value;
+            const yHandleEl = refScrollYHandleElem.value;
+            let overflowY = false;
+            let overflowX = false;
+            if (bodyWrapperElem) {
+                overflowY = scrollYHeight > bodyWrapperElem.clientHeight;
+                if (yHandleEl) {
+                    reactData.scrollbarWidth = Math.max(scrollbarOpts.width || 0, yHandleEl.offsetWidth - yHandleEl.clientWidth);
+                }
+                reactData.overflowY = overflowY;
+                overflowX = scrollXWidth > bodyWrapperElem.clientWidth;
+                if (xHandleEl) {
+                    reactData.scrollbarHeight = Math.max(scrollbarOpts.height || 0, xHandleEl.offsetHeight - xHandleEl.clientHeight);
+                }
+                const headerHeight = headerTableElem ? headerTableElem.clientHeight : 0;
+                const footerHeight = footerTableElem ? footerTableElem.clientHeight : 0;
+                internalData.tableHeight = bodyWrapperElem.offsetHeight;
+                internalData.headerHeight = headerHeight;
+                internalData.footerHeight = footerHeight;
+                reactData.overflowX = overflowX;
+                reactData.parentHeight = Math.max(internalData.headerHeight + footerHeight + 20, $xeTable.getParentHeight());
+            }
+            if (overflowX) {
+                $xeTable.checkScrolling();
+            }
+        };
         const handleRecalculateLayout = (reFull) => {
             const el = refElem.value;
             internalData.rceRunTime = Date.now();
@@ -2680,18 +2690,22 @@ export default defineComponent({
             }
             calcCellWidth();
             autoCellWidth();
+            calcScrollbar();
             updateStyle();
             updateRowExpandStyle();
             return computeScrollLoad().then(() => {
-                if (reFull === true) {
-                    // 初始化时需要在列计算之后再执行优化运算，达到最优显示效果
-                    calcCellWidth();
+                // 初始化时需要在列计算之后再执行优化运算，达到最优显示效果
+                calcCellWidth();
+                if (reFull) {
                     autoCellWidth();
-                    updateStyle();
-                    if (reFull) {
-                        updateRowOffsetTop();
-                    }
-                    updateRowExpandStyle();
+                }
+                calcScrollbar();
+                updateStyle();
+                if (reFull) {
+                    updateRowOffsetTop();
+                }
+                updateRowExpandStyle();
+                if (reFull) {
                     return computeScrollLoad();
                 }
             });
@@ -9476,11 +9490,11 @@ export default defineComponent({
                         const firstRow = afterFullData[startIndex];
                         let rowid = getRowid($xeTable, firstRow);
                         let rowRest = fullAllDataRowIdData[rowid] || {};
-                        ySpaceTop = rowRest.oTop;
+                        ySpaceTop = (rowRest.oTop || 0);
                         const lastRow = afterFullData[afterFullData.length - 1];
                         rowid = getRowid($xeTable, lastRow);
                         rowRest = fullAllDataRowIdData[rowid] || {};
-                        scrollYHeight = rowRest.oTop + (rowRest.resizeHeight || cellOpts.height || rowOpts.height || rowRest.height || defaultRowHeight);
+                        scrollYHeight = (rowRest.oTop || 0) + (rowRest.resizeHeight || cellOpts.height || rowOpts.height || rowRest.height || defaultRowHeight);
                         // 是否展开行
                         if (expandColumn && rowExpandedMaps[rowid]) {
                             scrollYHeight += rowRest.expandHeight || expandOpts.height || 0;
@@ -9546,7 +9560,7 @@ export default defineComponent({
             updateScrollXData() {
                 const { isAllOverflow } = reactData;
                 handleTableColumn();
-                $xeTable.updateScrollYSpace();
+                $xeTable.updateScrollXSpace();
                 return nextTick().then(() => {
                     handleTableColumn();
                     $xeTable.updateScrollXSpace();
@@ -10213,7 +10227,8 @@ export default defineComponent({
                             theme: tableTipConfig.theme,
                             enterable: tableTipConfig.enterable,
                             enterDelay: tableTipConfig.enterDelay,
-                            leaveDelay: tableTipConfig.leaveDelay
+                            leaveDelay: tableTipConfig.leaveDelay,
+                            useHTML: tableTipConfig.useHTML
                         }),
                         /**
                           * 校验提示

package/es/table/style.css

@@ -2326,10 +2326,17 @@
   height: 100%;
 }
 
+.vxe-header--column:last-child > .vxe-cell--col-resizable {
+  right: 0;
+}
+
 .vxe-table--fixed-right-wrapper .vxe-cell--col-resizable {
   right: auto;
   left: -0.3em;
 }
+.vxe-table--fixed-right-wrapper .vxe-header--column:last-child > .vxe-cell--col-resizable {
+  left: 0;
+}
 
 .vxe-body--column .vxe-cell--row-resizable {
   position: absolute;
@@ -2458,6 +2465,11 @@
 .vxe-table--render-default.column--highlight .vxe-header--column:not(.col--seq):hover {
   background-color: var(--vxe-ui-table-column-hover-background-color);
 }
+.vxe-table--render-default.header-cell--area .vxe-table--header-wrapper {
+  -webkit-user-select: none;
+     -moz-user-select: none;
+          user-select: none;
+}
 .vxe-table--render-default.body-cell--area .vxe-table--body-wrapper {
   -webkit-user-select: none;
      -moz-user-select: none;