vxe-table 3.11.26 → 3.11.27-beta.0

package/es/table/src/methods.js

@@ -10,6 +10,7 @@ const { getConfig, getI18n, renderer, formats, interceptor, createEvent } = VxeU
 // const isWebkit = browse['-webkit'] && !browse.edge
 // const debounceScrollYDuration = browse.msie ? 80 : 20
 const customStorageKey = 'VXE_CUSTOM_STORE';
+const tpImg = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=';
 // 获取所有的列，排除分组
 const getColumnList = (columns) => {
     const result = [];
@@ -446,11 +447,19 @@ function showDropTip($xeTable, evnt, trEl, thEl, showLine, dragPos) {
         if (cdLineEl) {
             if (showLine) {
                 const thRect = thEl.getBoundingClientRect();
+                const offsetTop = Math.max(0, thRect.y - wrapperRect.y);
                 cdLineEl.style.display = 'block';
+                cdLineEl.style.top = `${offsetTop}px`;
                 cdLineEl.style.left = `${Math.max(1, thRect.x - wrapperRect.x)}px`;
                 cdLineEl.style.width = `${thRect.width}px`;
-                cdLineEl.style.height = `${wrapperRect.height - scrollbarHeight}px`;
+                if (prevDragToChild) {
+                    cdLineEl.style.height = `${thRect.height}px`;
+                }
+                else {
+                    cdLineEl.style.height = `${wrapperRect.height - offsetTop - scrollbarHeight}px`;
+                }
                 cdLineEl.setAttribute('drag-pos', dragPos);
+                cdLineEl.setAttribute('drag-to-child', prevDragToChild ? 'y' : 'n');
             }
             else {
                 cdLineEl.style.display = '';
@@ -941,12 +950,12 @@ const Methods = {
             if (!cacheItem) {
                 cacheItem = { row, rowid, seq, index: -1, _index: -1, $index: -1, items, parent, level, height: 0 };
             }
+            cacheItem.row = row;
+            cacheItem.items = items;
+            cacheItem.parent = parent;
+            cacheItem.level = level;
+            cacheItem.index = treeConfig && parent ? -1 : index;
             if (isSource) {
-                cacheItem.row = row;
-                cacheItem.items = items;
-                cacheItem.parent = parent;
-                cacheItem.level = level;
-                cacheItem.index = treeConfig && parent ? -1 : index;
                 fullDataRowIdMaps[rowid] = cacheItem;
             }
             fullAllDataRowIdMaps[rowid] = cacheItem;
@@ -1030,11 +1039,20 @@ const Methods = {
      * 牺牲数据组装的耗时，用来换取使用过程中的流畅
      */
     cacheColumnMap() {
-        const { tableFullColumn, collectColumn, fullColumnMap, showOverflow, columnOpts, rowOpts } = this;
-        const fullColumnIdData = this.fullColumnIdData = {};
-        const fullColumnFieldData = this.fullColumnFieldData = {};
+        const $xeTable = this;
+        const props = $xeTable;
+        const reactData = $xeTable;
+        const internalData = $xeTable;
+        const { tableFullColumn, collectColumn } = internalData;
+        const fullColumnIdData = internalData.fullColumnIdData = {};
+        const fullColumnFieldData = internalData.fullColumnFieldData = {};
+        const mouseOpts = $xeTable.computeMouseOpts;
+        const columnOpts = $xeTable.computeColumnOpts;
+        const columnDragOpts = $xeTable.computeColumnDragOpts;
+        const { isCrossDrag, isSelfToChildDrag } = columnDragOpts;
+        const rowOpts = $xeTable.computeRowOpts;
         const isGroup = collectColumn.some(hasChildrenList);
-        let isAllOverflow = !!showOverflow;
+        let isAllOverflow = !!props.showOverflow;
         let expandColumn;
         let treeNodeColumn;
         let checkboxColumn;
@@ -1043,15 +1061,18 @@ const Methods = {
         let hasFixed;
         const handleFunc = (column, index, items, path, parent) => {
             const { id: colid, field, fixed, type, treeNode } = column;
-            const rest = { column, colid, index, items, parent: parent || null, width: 0 };
+            const rest = { $index: -1, _index: -1, column, colid, index, items, parent: parent || null, width: 0 };
             if (field) {
-                if (process.env.NODE_ENV === 'development') {
-                    if (fullColumnFieldData[field]) {
-                        warnLog('vxe.error.colRepet', ['field', field]);
-                    }
+                if (fullColumnFieldData[field]) {
+                    errLog('vxe.error.colRepet', ['field', field]);
                 }
                 fullColumnFieldData[field] = rest;
             }
+            else {
+                if (isCrossDrag || isSelfToChildDrag) {
+                    errLog('vxe.error.emptyProp', ['column.field']);
+                }
+            }
             if (!hasFixed && fixed) {
                 hasFixed = fixed;
             }
@@ -1096,27 +1117,6 @@ const Methods = {
                     }
                 }
             }
-            if (process.env.NODE_ENV === 'development') {
-                if (this.showOverflow && column.showOverflow === false) {
-                    warnLog('vxe.error.errConflicts', [`table.show-overflow=${this.showOverflow}`, `column.show-overflow=${column.showOverflow}`]);
-                }
-                if (this.showHeaderOverflow && column.showHeaderOverflow === false) {
-                    warnLog('vxe.error.errConflicts', [`table.show-header-overflow=${this.showHeaderOverflow}`, `column.show-header-overflow=${column.showHeaderOverflow}`]);
-                }
-                if (this.showFooterOverflow && column.showFooterOverflow === false) {
-                    warnLog('vxe.error.errConflicts', [`table.show-footer-overflow=${this.showFooterOverflow}`, `column.show-footer-overflow=${column.showFooterOverflow}`]);
-                }
-            }
-            if (process.env.NODE_ENV === 'development') {
-                if (htmlColumn) {
-                    if (!columnOpts.useKey) {
-                        errLog('vxe.error.reqProp', ['column-config.useKey', 'column.type=html']);
-                    }
-                    if (!rowOpts.useKey) {
-                        errLog('vxe.error.reqProp', ['row-config.useKey', 'column.type=html']);
-                    }
-                }
-            }
             if (isAllOverflow && column.showOverflow === false) {
                 isAllOverflow = false;
             }
@@ -1124,9 +1124,7 @@ const Methods = {
                 errLog('vxe.error.colRepet', ['colId', colid]);
             }
             fullColumnIdData[colid] = rest;
-            fullColumnMap.set(column, rest);
         };
-        fullColumnMap.clear();
         if (isGroup) {
             XEUtils.eachTree(collectColumn, (column, index, items, path, parent, nodes) => {
                 column.level = nodes.length;
@@ -1137,14 +1135,24 @@ const Methods = {
             tableFullColumn.forEach(handleFunc);
         }
         if (process.env.NODE_ENV === 'development') {
-            if (expandColumn && this.mouseOpts.area) {
+            if (expandColumn && mouseOpts.area) {
                 errLog('vxe.error.errConflicts', ['mouse-config.area', 'column.type=expand']);
             }
         }
-        this.isGroup = isGroup;
-        this.treeNodeColumn = treeNodeColumn;
-        this.expandColumn = expandColumn;
-        this.isAllOverflow = isAllOverflow;
+        if (process.env.NODE_ENV === 'development') {
+            if (htmlColumn) {
+                if (!columnOpts.useKey) {
+                    errLog('vxe.error.reqProp', ['column-config.useKey & column.type=html']);
+                }
+                if (!rowOpts.useKey) {
+                    errLog('vxe.error.reqProp', ['row-config.useKey & column.type=html']);
+                }
+            }
+        }
+        reactData.isGroup = isGroup;
+        reactData.treeNodeColumn = treeNodeColumn;
+        reactData.expandColumn = expandColumn;
+        reactData.isAllOverflow = isAllOverflow;
     },
     /**
      * 根据 tr 元素获取对应的 row 信息
@@ -2668,6 +2676,10 @@ const Methods = {
             const $xeTable = this;
             const internalData = $xeTable;
             const { rceTimeout } = internalData;
+            const el = $xeTable.$refs.refElem;
+            if (!el || !el.clientWidth) {
+                $xeTable.autoCellWidth();
+            }
             if (rceTimeout) {
                 clearTimeout(rceTimeout);
                 $xeTable.$nextTick(() => {
@@ -5078,8 +5090,9 @@ const Methods = {
      * 行拖拽
      */
     handleRowDragDragstartEvent(evnt) {
-        const img = new Image();
         if (evnt.dataTransfer) {
+            const img = new Image();
+            img.src = tpImg;
             evnt.dataTransfer.setDragImage(img, 0, 0);
         }
     },
@@ -5137,8 +5150,8 @@ const Methods = {
                                         return;
                                     }
                                     if (oldAllMaps[newRowid]) {
+                                        isSelfToChildStatus = true;
                                         if (!isSelfToChildDrag) {
-                                            isSelfToChildStatus = true;
                                             if (VxeUI.modal) {
                                                 VxeUI.modal.message({
                                                     status: 'error',
@@ -5216,7 +5229,7 @@ const Methods = {
                     }
                     reactData.isDragRowMove = true;
                     $xeTable.handleTableData(treeConfig && transform);
-                    $xeTable.cacheRowMap(true);
+                    $xeTable.cacheRowMap();
                     $xeTable.updateScrollYStatus();
                     if (!(treeConfig && transform)) {
                         $xeTable.updateAfterDataIndex();
@@ -5245,6 +5258,7 @@ const Methods = {
         }
         hideDropTip($xeTable);
         clearRowDropOrigin($xeTable);
+        internalData.prevDragToChild = false;
         reactData.dragRow = null;
         reactData.dragCol = null;
         setTimeout(() => {
@@ -5335,8 +5349,9 @@ const Methods = {
      * 列拖拽
      */
     handleHeaderCellDragDragstartEvent(evnt) {
-        const img = new Image();
         if (evnt.dataTransfer) {
+            const img = new Image();
+            img.src = tpImg;
             evnt.dataTransfer.setDragImage(img, 0, 0);
         }
     },
@@ -5347,17 +5362,19 @@ const Methods = {
         const internalData = $xeTable;
         const { mouseConfig } = props;
         const columnDragOpts = $xeTable.computeColumnDragOpts;
-        const { dragEndMethod } = columnDragOpts;
+        const { isCrossDrag, isSelfToChildDrag, isToChildDrag, dragEndMethod } = columnDragOpts;
         const { dragCol } = reactData;
-        const { collectColumn, prevDragCol, prevDragPos } = internalData;
+        const { collectColumn, prevDragCol, prevDragPos, prevDragToChild } = internalData;
         const dragOffsetIndex = prevDragPos === 'right' ? 1 : 0;
         if (prevDragCol && dragCol) {
             // 判断是否有拖动
             if (prevDragCol !== dragCol) {
+                const oldColumn = dragCol;
+                const newColumn = prevDragCol;
                 Promise.resolve(dragEndMethod
                     ? dragEndMethod({
-                        oldColumn: dragCol,
-                        newColumn: prevDragCol,
+                        oldColumn,
+                        newColumn,
                         dragPos: prevDragPos,
                         offsetIndex: dragOffsetIndex
                     })
@@ -5365,24 +5382,102 @@ const Methods = {
                     if (!status) {
                         return;
                     }
+                    let oafIndex = -1;
+                    let nafIndex = -1;
+                    const oldAllMaps = {};
+                    XEUtils.eachTree([oldColumn], column => {
+                        oldAllMaps[column.id] = column;
+                    });
+                    let isSelfToChildStatus = false;
+                    if (oldColumn.parentId && newColumn.parentId) {
+                        // 子到子
+                        if (!isCrossDrag) {
+                            return;
+                        }
+                        if (oldAllMaps[newColumn.id]) {
+                            isSelfToChildStatus = true;
+                            if (!isSelfToChildDrag) {
+                                if (VxeUI.modal) {
+                                    VxeUI.modal.message({
+                                        status: 'error',
+                                        content: getI18n('vxe.error.treeDragChild')
+                                    });
+                                }
+                                return;
+                            }
+                        }
+                    }
+                    else if (oldColumn.parentId) {
+                        // 子到根
+                        if (!isCrossDrag) {
+                            return;
+                        }
+                    }
+                    else if (newColumn.parentId) {
+                        // 根到子
+                        if (!isCrossDrag) {
+                            return;
+                        }
+                        if (oldAllMaps[newColumn.id]) {
+                            isSelfToChildStatus = true;
+                            if (!isSelfToChildDrag) {
+                                if (VxeUI.modal) {
+                                    VxeUI.modal.message({
+                                        status: 'error',
+                                        content: getI18n('vxe.error.treeDragChild')
+                                    });
+                                }
+                                return;
+                            }
+                        }
+                    }
+                    else {
+                        // 根到根
+                    }
+                    const oldewMatchRest = XEUtils.findTree(collectColumn, item => item.id === oldColumn.id);
+                    // 改变层级
+                    if (isSelfToChildStatus && isSelfToChildDrag) {
+                        if (oldewMatchRest) {
+                            const { items: oCols, index: oIndex } = oldewMatchRest;
+                            const childList = oldColumn.children || [];
+                            childList.forEach(column => {
+                                column.parentId = oldColumn.parentId;
+                            });
+                            oCols.splice(oIndex, 1, ...childList);
+                            oldColumn.children = [];
+                        }
+                    }
+                    else {
+                        if (oldewMatchRest) {
+                            const { items: oCols, index: oIndex, parent: oParent } = oldewMatchRest;
+                            oCols.splice(oIndex, 1);
+                            if (!oParent) {
+                                oafIndex = oIndex;
+                            }
+                        }
+                    }
+                    const newMatchRest = XEUtils.findTree(collectColumn, item => item.id === newColumn.id);
+                    if (newMatchRest) {
+                        const { items: nCols, index: nIndex, parent: nParent } = newMatchRest;
+                        // 转子级
+                        if (isToChildDrag && prevDragToChild) {
+                            oldColumn.parentId = newColumn.id;
+                            newColumn.children = (newColumn.children || []).concat([oldColumn]);
+                        }
+                        else {
+                            oldColumn.parentId = newColumn.parentId;
+                            nCols.splice(nIndex + dragOffsetIndex, 0, oldColumn);
+                        }
+                        if (!nParent) {
+                            nafIndex = nIndex;
+                        }
+                    }
                     XEUtils.eachTree(collectColumn, (column, index, items, path, parent) => {
                         if (!parent) {
                             const sortIndex = index + 1;
                             column.renderSortNumber = sortIndex;
                         }
                     });
-                    const oafIndex = XEUtils.findIndexOf(collectColumn, item => item.id === dragCol.id);
-                    const nafIndex = XEUtils.findIndexOf(collectColumn, item => item.id === prevDragCol.id) + dragOffsetIndex;
-                    const newTargetCol = collectColumn[nafIndex];
-                    if (newTargetCol) {
-                        // 插入最后位置
-                        dragCol.renderSortNumber = newTargetCol.renderSortNumber;
-                        newTargetCol.renderSortNumber = dragCol.renderSortNumber + 0.5;
-                    }
-                    else {
-                        // 插入新位置
-                        dragCol.renderSortNumber = collectColumn.length + 1.5;
-                    }
                     reactData.isDragColMove = true;
                     if (mouseConfig) {
                         if ($xeTable.clearSelected) {
@@ -5393,14 +5488,12 @@ const Methods = {
                             $xeTable.clearCopyCellArea();
                         }
                     }
-                    $xeTable.analyColumnWidth();
-                    $xeTable.$nextTick().then(() => {
+                    $xeTable.refreshColumn(true).then(() => {
                         $xeTable.updateCellAreas();
-                        $xeTable.refreshColumn(true);
                     });
                     $xeTable.dispatchEvent('column-dragend', {
-                        oldColumn: dragCol,
-                        newColumn: prevDragCol,
+                        oldColumn,
+                        newColumn,
                         dragPos: prevDragPos,
                         offsetIndex: dragOffsetIndex,
                         _index: {
@@ -5415,6 +5508,7 @@ const Methods = {
         }
         hideDropTip($xeTable);
         clearColDropOrigin($xeTable);
+        internalData.prevDragToChild = false;
         reactData.dragRow = null;
         reactData.dragCol = null;
         setTimeout(() => {
@@ -5426,10 +5520,13 @@ const Methods = {
         const reactData = $xeTable;
         const internalData = $xeTable;
         const { dragCol } = reactData;
+        const columnDragOpts = $xeTable.computeColumnDragOpts;
+        const { isToChildDrag, isCrossDrag } = columnDragOpts;
         if (!dragCol) {
             evnt.preventDefault();
             return;
         }
+        const hasCtrlKey = evnt.ctrlKey;
         const thEl = evnt.currentTarget;
         const colid = thEl.getAttribute('colid');
         const column = $xeTable.getColumnById(colid);
@@ -5438,11 +5535,11 @@ const Methods = {
             const { dragCol } = reactData;
             const offsetX = evnt.clientX - thEl.getBoundingClientRect().x;
             const dragPos = offsetX < thEl.clientWidth / 2 ? 'left' : 'right';
-            if (dragCol.id === column.id || column.parentId) {
+            if ((dragCol && dragCol.id === column.id) || (!isCrossDrag && column.parentId)) {
                 showDropTip($xeTable, evnt, null, thEl, false, dragPos);
                 return;
             }
-            internalData.prevDragToChild = false;
+            internalData.prevDragToChild = !!(isToChildDrag && hasCtrlKey);
             internalData.prevDragCol = column;
             internalData.prevDragPos = dragPos;
             showDropTip($xeTable, evnt, null, thEl, true, dragPos);

package/es/table/src/util.js

@@ -123,7 +123,6 @@ export function handleFieldOrColumn(_vm, fieldOrColumn) {
 export function assembleColumn(_vm) {
     const { $el, $xetable, $xecolumn, columnConfig } = _vm;
     const groupConfig = $xecolumn ? $xecolumn.columnConfig : null;
-    columnConfig.slots = _vm.$scopedSlots;
     if (groupConfig) {
         if (process.env.NODE_ENV === 'development') {
             if ($xecolumn.$options._componentTag === 'vxe-table-column') {

package/es/table/style.css

@@ -2675,6 +2675,11 @@
 .vxe-table--render-default .vxe-table--drag-col-line[drag-pos=right] {
   border-right-color: var(--vxe-ui-font-primary-color);
 }
+.vxe-table--render-default .vxe-table--drag-col-line[drag-to-child=y] {
+  border-left-color: transparent;
+  border-right-color: transparent;
+  border-bottom-color: var(--vxe-ui-status-success-color);
+}
 .vxe-table--render-default .vxe-table--drag-col-line.is--guides {
   background-color: var(--vxe-ui-table-drag-over-background-color);
 }