vxe-table 3.12.10-beta.2 → 3.12.10-beta.4

package/es/table/src/header.js

@@ -2,7 +2,7 @@ import XEUtils from 'xe-utils';
 import { VxeUI } from '../../ui';
 import { getClass } from '../../ui/src/utils';
 import { getOffsetPos, hasClass, addClass, removeClass } from '../../ui/src/dom';
-import { convertHeaderColumnToRows, getColReMinWidth } from './util';
+import { convertHeaderColumnToRows, getColReMinWidth, getRefElem } from './util';
 const { getI18n, renderer, renderEmptyElement } = VxeUI;
 const cellType = 'header';
 const renderRows = (h, _vm, isGroup, isOptimizeMode, cols, $rowIndex) => {
@@ -73,6 +73,8 @@ const renderRows = (h, _vm, isGroup, isOptimizeMode, cols, $rowIndex) => {
                 thOns.mouseup = $xeTable.handleHeaderCellDragMouseupEvent;
             }
         }
+        const isLastColumn = $columnIndex === cols.length - 1;
+        const showResizable = (XEUtils.isBoolean(column.resizable) ? column.resizable : (columnOpts.resizable || allResizable));
         const isAutoCellWidth = !column.resizeWidth && (column.minWidth === 'auto' || column.width === 'auto');
         let isPreLoadStatus = false;
         if (scrollXLoad && !isGroup && !column.fixed && (_columnIndex < scrollXStore.visibleStartIndex || _columnIndex > scrollXStore.visibleEndIndex)) {
@@ -82,7 +84,7 @@ const renderRows = (h, _vm, isGroup, isOptimizeMode, cols, $rowIndex) => {
             class: ['vxe-header--column', colid, {
                     [`col--${headAlign}`]: headAlign,
                     [`col--${type}`]: type,
-                    'col--last': $columnIndex === cols.length - 1,
+                    'col--last': isLastColumn,
                     'col--fixed': column.fixed,
                     'col--group': isColGroup,
                     'col--ellipsis': hasEllipsis,
@@ -110,7 +112,7 @@ const renderRows = (h, _vm, isGroup, isOptimizeMode, cols, $rowIndex) => {
             /**
            * 列宽拖动
            */
-            !fixedHiddenColumn && !isColGroup && (XEUtils.isBoolean(column.resizable) ? column.resizable : (columnOpts.resizable || allResizable))
+            !fixedHiddenColumn && showResizable
                 ? h('div', {
                     class: ['vxe-resizable', {
                             'is--line': !border || border === 'none'
@@ -120,7 +122,7 @@ const renderRows = (h, _vm, isGroup, isOptimizeMode, cols, $rowIndex) => {
                         dblclick: (evnt) => $xeTable.handleResizeDblclickEvent(evnt, params)
                     }
                 })
-                : null
+                : renderEmptyElement($xeTable)
         ]);
     });
 };
@@ -352,19 +354,28 @@ export default {
             const tableInternalData = $xeTable;
             const { column } = params;
             const { $parent: $xetable, fixedType } = this;
-            const { visibleColumn } = tableInternalData;
-            const { refTableBody, refLeftContainer, refRightContainer } = $xetable.$refs;
+            const { elemStore, visibleColumn } = tableInternalData;
+            const { refLeftContainer, refRightContainer } = $xetable.$refs;
             const tableEl = $xeTable.$el;
             const resizeBarElem = $xetable.$refs.refCellResizeBar;
             const resizeTipElem = $xetable.$refs.refCellResizeTip;
             const wrapperElem = this.$el;
             const { clientX: dragClientX } = evnt;
             const dragBtnElem = evnt.target;
+            let resizeColumn = column;
+            if (column.children && column.children.length) {
+                XEUtils.eachTree(column.children, childColumn => {
+                    resizeColumn = childColumn;
+                });
+            }
             const cell = dragBtnElem.parentNode;
             const cellParams = Object.assign(params, { cell });
             const resizableOpts = $xeTable.computeResizableOpts;
             let dragLeft = 0;
-            const tableBodyElem = refTableBody.$el;
+            const bodyScrollElem = getRefElem(elemStore['main-body-scroll']);
+            if (!bodyScrollElem) {
+                return;
+            }
             const pos = getOffsetPos(dragBtnElem, tableEl);
             const dragBtnWidth = dragBtnElem.clientWidth;
             const dragBtnOffsetWidth = Math.floor(dragBtnWidth / 2);
@@ -399,10 +410,10 @@ export default {
                 evnt.preventDefault();
                 const offsetX = evnt.clientX - dragClientX;
                 let left = dragPosLeft + offsetX;
-                const scrollLeft = fixedType ? 0 : tableBodyElem.scrollLeft;
+                const scrollLeft = fixedType ? 0 : bodyScrollElem.scrollLeft;
                 if (isLeftFixed) {
                     // 左固定列（不允许超过右侧固定列、不允许超过右边距）
-                    left = Math.min(left, (refRightContainer ? refRightContainer.offsetLeft : tableBodyElem.clientWidth) - fixedOffsetWidth - minInterval);
+                    left = Math.min(left, (refRightContainer ? refRightContainer.offsetLeft : bodyScrollElem.clientWidth) - fixedOffsetWidth - minInterval);
                 }
                 else if (isRightFixed) {
                     // 右侧固定列（不允许超过左侧固定列、不允许超过左边距）
@@ -410,11 +421,11 @@ export default {
                     left = Math.min(left, dragPosLeft + cell.clientWidth - minInterval);
                 }
                 else {
-                    dragMinLeft = Math.max(tableBodyElem.scrollLeft, dragMinLeft);
-                    // left = Math.min(left, tableBodyElem.clientWidth + tableBodyElem.scrollLeft - 40)
+                    dragMinLeft = Math.max(bodyScrollElem.scrollLeft, dragMinLeft);
+                    // left = Math.min(left, bodyScrollElem.clientWidth + bodyScrollElem.scrollLeft - 40)
                 }
                 dragLeft = Math.max(left, dragMinLeft);
-                const resizeBarLeft = dragLeft - scrollLeft;
+                const resizeBarLeft = Math.max(1, dragLeft - scrollLeft);
                 resizeBarElem.style.left = `${resizeBarLeft}px`;
                 if (resizableOpts.showDragTip && resizeTipElem) {
                     const tableWidth = tableEl.clientWidth;
@@ -424,14 +435,14 @@ export default {
                     const resizeTipHeight = resizeTipElem.clientHeight;
                     let resizeTipLeft = -resizeTipWidth;
                     if (resizeBarLeft < resizeTipWidth + resizeBarWidth) {
-                        resizeTipLeft = resizeTipWidth + resizeBarWidth - resizeBarLeft;
+                        resizeTipLeft = 0;
                     }
                     else if (resizeBarLeft > tableWidth) {
                         resizeTipLeft += tableWidth - resizeBarLeft;
                     }
                     resizeTipElem.style.left = `${resizeTipLeft}px`;
                     resizeTipElem.style.top = `${Math.min(tableEl.clientHeight - resizeTipHeight, Math.max(0, evnt.clientY - wrapperRect.y - resizeTipHeight / 2))}px`;
-                    resizeTipElem.textContent = getI18n('vxe.table.resizeColTip', [column.renderWidth + (isRightFixed ? dragPosLeft - dragLeft : dragLeft - dragPosLeft)]);
+                    resizeTipElem.textContent = getI18n('vxe.table.resizeColTip', [resizeColumn.renderWidth + (isRightFixed ? dragPosLeft - dragLeft : dragLeft - dragPosLeft)]);
                 }
             };
             $xetable._isResize = true;
@@ -441,11 +452,11 @@ export default {
             document.onmouseup = function (evnt) {
                 document.onmousemove = domMousemove;
                 document.onmouseup = domMouseup;
-                const resizeWidth = column.renderWidth + (isRightFixed ? dragPosLeft - dragLeft : dragLeft - dragPosLeft);
-                column.resizeWidth = resizeWidth;
+                const resizeWidth = resizeColumn.renderWidth + (isRightFixed ? dragPosLeft - dragLeft : dragLeft - dragPosLeft);
+                resizeColumn.resizeWidth = resizeWidth;
                 if (resizableOpts.dragMode === 'fixed') {
                     visibleColumn.forEach((item) => {
-                        if (item.id !== column.id) {
+                        if (item.id !== resizeColumn.id) {
                             if (!item.resizeWidth) {
                                 item.resizeWidth = item.renderWidth;
                             }

package/es/table/src/methods.js

@@ -196,7 +196,7 @@ function cacheColumnMap($xeTable) {
             fullColumnFieldData[field] = rest;
         }
         else {
-            if (storage || (columnOpts.drag && (isCrossDrag || isSelfToChildDrag))) {
+            if ((storage && !type) || (columnOpts.drag && (isCrossDrag || isSelfToChildDrag))) {
                 errLog('vxe.error.reqProp', [`${column.getTitle() || type || ''} -> column.field`]);
             }
         }
@@ -3437,17 +3437,23 @@ const Methods = {
         if (isDblclickAutoWidth && el) {
             const { fullColumnIdData } = internalData;
             const { column } = params;
-            const colid = column.id;
+            let resizeColumn = column;
+            if (column.children && column.children.length) {
+                XEUtils.eachTree(column.children, childColumn => {
+                    resizeColumn = childColumn;
+                });
+            }
+            const colid = resizeColumn.id;
             const colRest = fullColumnIdData[colid];
             const dragBtnElem = evnt.target;
             const cell = dragBtnElem.parentNode;
             const cellParams = Object.assign(params, { cell });
             const colMinWidth = getColReMinWidth(cellParams);
-            let resizeWidth = calcColumnAutoWidth(column, el);
+            let resizeWidth = calcColumnAutoWidth(resizeColumn, el);
             if (colRest) {
                 resizeWidth = Math.max(resizeWidth, colRest.width);
             }
-            column.resizeWidth = Math.max(colMinWidth, resizeWidth);
+            resizeColumn.resizeWidth = Math.max(colMinWidth, resizeWidth);
             reactData._isResize = false;
             internalData._lastResizeTime = Date.now();
             $xeTable.analyColumnWidth();
@@ -4852,7 +4858,7 @@ const Methods = {
                 }
                 vLen++;
             });
-        const isSelected = rootList.length > 0 && sLen >= vLen;
+        const isSelected = vLen > 0 ? sLen >= vLen : sLen >= rootList.length;
         const halfSelect = !isSelected && (sLen >= 1 || hLen >= 1);
         reactData.isAllSelected = isSelected;
         reactData.isIndeterminate = halfSelect;

package/es/table/style.css

@@ -1738,20 +1738,23 @@
 }
 
 .vxe-table--header-inner-wrapper,
+.vxe-table--body-inner-wrapper,
 .vxe-table--footer-inner-wrapper {
+  position: relative;
   width: 100%;
   height: 100%;
+  scrollbar-width: none;
+}
+
+.vxe-table--header-inner-wrapper,
+.vxe-table--footer-inner-wrapper {
   overflow-y: hidden;
   overflow-x: scroll;
-  scrollbar-width: none;
 }
 
 .vxe-table--body-inner-wrapper {
-  width: 100%;
-  height: 100%;
   overflow-y: scroll;
   overflow-x: scroll;
-  scrollbar-width: none;
 }
 
 .vxe-loading--custom-wrapper {