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

package/es/table/src/header.js

@@ -1,7 +1,7 @@
 import { defineComponent, TransitionGroup, h, ref, inject, nextTick, watch, onMounted, onUnmounted } from 'vue';
 import XEUtils from 'xe-utils';
 import { VxeUI } from '../../ui';
-import { convertHeaderColumnToRows, getColReMinWidth } from './util';
+import { convertHeaderColumnToRows, getColReMinWidth, getRefElem } from './util';
 import { hasClass, getOffsetPos, addClass, removeClass } from '../../ui/src/dom';
 const { getI18n, renderer, renderEmptyElement } = VxeUI;
 const renderType = 'header';
@@ -20,7 +20,7 @@ export default defineComponent({
     setup(props) {
         const $xeTable = inject('$xeTable', {});
         const { xID, props: tableProps, reactData: tableReactData, internalData: tableInternalData } = $xeTable;
-        const { refElem: tableRefElem, refTableBody, refLeftContainer, refRightContainer, refCellResizeBar, refCellResizeTip } = $xeTable.getRefMaps();
+        const { refElem: tableRefElem, refLeftContainer, refRightContainer, refCellResizeBar, refCellResizeTip } = $xeTable.getRefMaps();
         const { computeColumnOpts, computeColumnDragOpts, computeResizableOpts } = $xeTable.getComputeMaps();
         const headerColumn = ref([]);
         const refElem = ref();
@@ -37,9 +37,8 @@ export default defineComponent({
         const resizeMousedownEvent = (evnt, params) => {
             const { column } = params;
             const { fixedType } = props;
-            const { visibleColumn } = tableInternalData;
+            const { elemStore, visibleColumn } = tableInternalData;
             const resizableOpts = computeResizableOpts.value;
-            const tableBody = refTableBody.value;
             const tableEl = tableRefElem.value;
             const leftContainerElem = refLeftContainer.value;
             const rightContainerElem = refRightContainer.value;
@@ -48,10 +47,19 @@ export default defineComponent({
             const { clientX: dragClientX } = evnt;
             const wrapperElem = refElem.value;
             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 });
             let dragLeft = 0;
-            const tableBodyElem = tableBody.$el;
+            const bodyScrollElem = getRefElem(elemStore['main-body-scroll']);
+            if (!bodyScrollElem) {
+                return;
+            }
             const pos = getOffsetPos(dragBtnElem, wrapperElem);
             const dragBtnWidth = dragBtnElem.clientWidth;
             const dragBtnOffsetWidth = Math.floor(dragBtnWidth / 2);
@@ -81,15 +89,15 @@ export default defineComponent({
                 }
             }
             // 处理拖动事件
-            const updateEvent = function (evnt) {
+            const updateEvent = (evnt) => {
                 evnt.stopPropagation();
                 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, (rightContainerElem ? rightContainerElem.offsetLeft : tableBodyElem.clientWidth) - fixedOffsetWidth - minInterval);
+                    left = Math.min(left, (rightContainerElem ? rightContainerElem.offsetLeft : bodyScrollElem.clientWidth) - fixedOffsetWidth - minInterval);
                 }
                 else if (isRightFixed) {
                     // 右侧固定列（不允许超过左侧固定列、不允许超过左边距）
@@ -97,11 +105,11 @@ export default defineComponent({
                     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;
@@ -111,14 +119,14 @@ export default defineComponent({
                     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)]);
                 }
             };
             tableReactData._isResize = true;
@@ -128,11 +136,11 @@ export default defineComponent({
             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;
                             }
@@ -217,6 +225,8 @@ export default defineComponent({
                         thOns.onMouseup = $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)) {
@@ -225,7 +235,7 @@ export default defineComponent({
                 return h('th', Object.assign(Object.assign(Object.assign({ 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,
@@ -251,7 +261,7 @@ export default defineComponent({
                     /**
                      * 列宽拖动
                      */
-                    !fixedHiddenColumn && !isColGroup && (XEUtils.isBoolean(column.resizable) ? column.resizable : (columnOpts.resizable || allResizable))
+                    !fixedHiddenColumn && showResizable
                         ? h('div', {
                             class: ['vxe-resizable', {
                                     'is--line': !border || border === 'none'
@@ -259,7 +269,7 @@ export default defineComponent({
                             onMousedown: (evnt) => resizeMousedownEvent(evnt, params),
                             onDblclick: (evnt) => $xeTable.handleResizeDblclickEvent(evnt, params)
                         })
-                        : null
+                        : renderEmptyElement($xeTable)
                 ]);
             });
         };

package/es/table/src/table.js

@@ -1097,7 +1097,7 @@ export default defineComponent({
                     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`]);
                     }
                 }
@@ -6520,17 +6520,23 @@ export default defineComponent({
                 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();
@@ -6768,7 +6774,7 @@ export default defineComponent({
                         }
                         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 {