vxe-table 3.15.0-beta.4 → 3.15.0

package/es/table/src/methods.js

@@ -1461,10 +1461,8 @@ function autoCellWidth($xeTable) {
     const reactData = $xeTable;
     const internalData = $xeTable;
     const { elemStore } = internalData;
-    const scrollbarOpts = $xeTable.computeScrollbarOpts;
-    const tableBody = $xeTable.$refs.refTableBody;
-    const bodyElem = tableBody ? tableBody.$el : null;
-    if (!bodyElem) {
+    const bodyWrapperElem = getRefElem(elemStore['main-body-wrapper']);
+    if (!bodyWrapperElem) {
         return;
     }
     const yHandleEl = $xeTable.$refs.refScrollYHandleElem;
@@ -1477,7 +1475,7 @@ function autoCellWidth($xeTable) {
     }
     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;
@@ -1546,9 +1544,9 @@ function autoCellWidth($xeTable) {
     });
     if (fit) {
         /**
-             * 偏移量算法
-             * 如果所有列足够放的情况下，从最后动态列开始分配
-             */
+         * 偏移量算法
+         * 如果所有列足够放的情况下，从最后动态列开始分配
+         */
         const dynamicList = scaleList.concat(scaleMinList).concat(pxMinList).concat(autoMinList).concat(remainList);
         let dynamicSize = dynamicList.length - 1;
         if (dynamicSize > 0) {
@@ -1562,28 +1560,10 @@ function autoCellWidth($xeTable) {
             }
         }
     }
-    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($xeTable);
     updateHeight($xeTable);
-    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}"]`);
@@ -1944,7 +1924,7 @@ function computeScrollLoad($xeTable) {
         }
         // 计算 Y 逻辑
         const rowHeight = computeRowHeight($xeTable);
-        scrollYStore.rowHeight = rowHeight;
+        scrollYStore.rowHeight = rowHeight; // 已废弃
         reactData.rowHeight = rowHeight;
         const { toVisibleIndex: toYVisibleIndex, visibleSize: visibleYSize } = handleVirtualYVisible($xeTable);
         if (scrollYLoad) {
@@ -1962,11 +1942,43 @@ function computeScrollLoad($xeTable) {
         else {
             $xeTable.updateScrollYSpace();
         }
-        $xeTable.$nextTick(() => {
-            updateStyle($xeTable);
-        });
     });
 }
+function calcScrollbar($xeTable) {
+    const reactData = $xeTable;
+    const internalData = $xeTable;
+    const { scrollXWidth, scrollYHeight } = reactData;
+    const { elemStore } = internalData;
+    const scrollbarOpts = $xeTable.computeScrollbarOpts;
+    const bodyWrapperElem = getRefElem(elemStore['main-body-wrapper']);
+    const headerTableElem = getRefElem(elemStore['main-header-table']);
+    const footerTableElem = getRefElem(elemStore['main-footer-table']);
+    const xHandleEl = $xeTable.$refs.refScrollXHandleElem;
+    const yHandleEl = $xeTable.$refs.refScrollYHandleElem;
+    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);
+        }
+        reactData.overflowX = overflowX;
+        const headerHeight = headerTableElem ? headerTableElem.clientHeight : 0;
+        const footerHeight = footerTableElem ? footerTableElem.clientHeight : 0;
+        internalData.tableHeight = bodyWrapperElem.offsetHeight;
+        internalData.headerHeight = headerHeight;
+        internalData.footerHeight = footerHeight;
+        reactData.parentHeight = Math.max(internalData.headerHeight + footerHeight + 20, $xeTable.getParentHeight());
+    }
+    if (overflowX) {
+        $xeTable.checkScrolling();
+    }
+}
 function handleRecalculateLayout($xeTable, reFull) {
     const internalData = $xeTable;
     const el = $xeTable.$refs.refElem;
@@ -1984,21 +1996,22 @@ function handleRecalculateLayout($xeTable, reFull) {
     }
     calcCellWidth($xeTable);
     autoCellWidth($xeTable);
+    calcScrollbar($xeTable);
     updateStyle($xeTable);
-    if (reFull) {
-        updateRowOffsetTop($xeTable);
-    }
     updateRowExpandStyle($xeTable);
     return computeScrollLoad($xeTable).then(() => {
-        if (reFull === true) {
-            // 初始化时需要在列计算之后再执行优化运算，达到最优显示效果
-            calcCellWidth($xeTable);
+        // 初始化时需要在列计算之后再执行优化运算，达到最优显示效果
+        calcCellWidth($xeTable);
+        if (reFull) {
             autoCellWidth($xeTable);
-            updateStyle($xeTable);
-            if (reFull) {
-                updateRowOffsetTop($xeTable);
-            }
-            updateRowExpandStyle($xeTable);
+        }
+        calcScrollbar($xeTable);
+        updateStyle($xeTable);
+        if (reFull) {
+            updateRowOffsetTop($xeTable);
+        }
+        updateRowExpandStyle($xeTable);
+        if (reFull) {
             return computeScrollLoad($xeTable);
         }
     });
@@ -2874,6 +2887,7 @@ const Methods = {
                     }
                     reactData.isRowLoading = false;
                     calcCellHeight($xeTable);
+                    updateRowOffsetTop($xeTable);
                     // 是否变更虚拟滚动
                     if (oldScrollYLoad === sYLoad) {
                         restoreScrollLocation($xeTable, targetScrollLeft, targetScrollTop)
@@ -4857,6 +4871,7 @@ const Methods = {
             }
         }
         return $xeTable.$nextTick().then(() => {
+            updateRowOffsetTop($xeTable);
             return { status };
         });
     },
@@ -8978,11 +8993,11 @@ const Methods = {
                 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;

package/es/table/src/table.js

@@ -1928,7 +1928,8 @@ export default {
                             theme: tableTipConfig.theme,
                             enterable: tableTipConfig.enterable,
                             enterDelay: tableTipConfig.enterDelay,
-                            leaveDelay: tableTipConfig.leaveDelay
+                            leaveDelay: tableTipConfig.leaveDelay,
+                            useHTML: tableTipConfig.useHTML
                         }
                     })
                     : renderEmptyElement($xeTable),

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;