vxe-table 3.10.16 → 3.11.1

package/es/table/src/methods.js

@@ -331,63 +331,114 @@ function updateRowDropOrigin($xeTable, row) {
         });
     }
 }
-function clearRowDropTarget($xeTable) {
+const updateRowDropTipContent = ($xeTable, tdEl) => {
+    const reactData = $xeTable;
+    const props = $xeTable;
+    const { dragConfig } = props;
+    const { dragRow } = reactData;
+    const rowDragOpts = $xeTable.computeRowDragOpts;
+    const { tooltipMethod } = rowDragOpts;
+    const rTooltipMethod = tooltipMethod || (dragConfig ? dragConfig.rowTooltipMethod : null);
+    let tipContent = '';
+    if (rTooltipMethod) {
+        tipContent = `${rTooltipMethod({
+            row: dragRow
+        }) || ''}`;
+    }
+    else {
+        tipContent = getI18n('vxe.table.dragTip', [tdEl.textContent || '']);
+    }
+    reactData.dragTipText = tipContent;
+};
+const updateColDropOrigin = ($xeTable, column) => {
     const el = $xeTable.$el;
     if (el) {
-        const clss = 'row--drag-active-target';
-        XEUtils.arrayEach(el.querySelectorAll(`.${clss}`), (elem) => {
-            removeClass(elem, clss);
+        const clss = 'col--drag-origin';
+        XEUtils.arrayEach(el.querySelectorAll(`[colid="${column.id}"]`), (elem) => {
+            addClass(elem, clss);
         });
     }
-}
-function updateRowDropTarget($xeTable, row, dragPos) {
+};
+const clearColDropOrigin = ($xeTable) => {
     const el = $xeTable.$el;
     if (el) {
-        const clss = 'row--drag-active-target';
-        const rowid = getRowid($xeTable, row);
-        XEUtils.arrayEach(el.querySelectorAll(`[rowid="${rowid}"]`), (elem) => {
-            addClass(elem, clss);
-            elem.setAttribute('drag-pos', dragPos);
+        const clss = 'col--drag-origin';
+        XEUtils.arrayEach(el.querySelectorAll(`.${clss}`), (elem) => {
+            elem.draggable = false;
+            removeClass(elem, clss);
         });
     }
-}
-function showRowDropTip(evnt, $xeTable) {
-    const rdTipEl = $xeTable.$refs.refRowDragTipElem;
-    if (!rdTipEl) {
-        return;
+};
+const updateColDropTipContent = ($xeTable, tdEl) => {
+    const reactData = $xeTable;
+    const { dragCol } = reactData;
+    const columnDragOpts = $xeTable.computeColumnDragOpts;
+    const { tooltipMethod } = columnDragOpts;
+    let tipContent = '';
+    if (tooltipMethod) {
+        tipContent = `${tooltipMethod({
+            column: dragCol
+        }) || ''}`;
     }
-    const el = $xeTable.$el;
+    else {
+        tipContent = getI18n('vxe.table.dragTip', [tdEl.textContent || '']);
+    }
+    reactData.dragTipText = tipContent;
+};
+function showDropTip($xeTable, evnt, trEl, thEl, dragPos) {
+    const reactData = $xeTable;
+    const el = $xeTable.$refs.refElem;
     if (!el) {
         return;
     }
+    const { scrollbarWidth, scrollbarHeight } = reactData;
+    const wrapperRect = el.getBoundingClientRect();
+    if (trEl) {
+        const rdLineEl = $xeTable.$refs.refDragRowLineElem;
+        if (rdLineEl) {
+            const trRect = trEl.getBoundingClientRect();
+            let top = Math.max(1, trRect.y - wrapperRect.y);
+            if (dragPos === 'bottom') {
+                top = Math.min(wrapperRect.height - 1, trRect.y - wrapperRect.y + trRect.height);
+            }
+            rdLineEl.style.top = `${top}px`;
+            rdLineEl.style.width = `${wrapperRect.width - scrollbarWidth}px`;
+            rdLineEl.style.display = 'block';
+        }
+    }
+    else if (thEl) {
+        const cdLineEl = $xeTable.$refs.refDragColLineElem;
+        if (cdLineEl) {
+            const thRect = thEl.getBoundingClientRect();
+            let left = Math.max(1, thRect.x - wrapperRect.x);
+            if (dragPos === 'right') {
+                left = Math.min(wrapperRect.width - 2, thRect.x - wrapperRect.x + thRect.width);
+            }
+            cdLineEl.style.left = `${left}px`;
+            cdLineEl.style.height = `${wrapperRect.height - scrollbarHeight}px`;
+            cdLineEl.style.display = 'block';
+        }
+    }
+    const rdTipEl = $xeTable.$refs.refDragTipElem;
     if (rdTipEl) {
-        const wrapperRect = el.getBoundingClientRect();
         rdTipEl.style.display = 'block';
         rdTipEl.style.top = `${Math.min(el.clientHeight - el.scrollTop - rdTipEl.clientHeight, evnt.clientY - wrapperRect.y)}px`;
         rdTipEl.style.left = `${Math.min(el.clientWidth - el.scrollLeft - rdTipEl.clientWidth - 16, evnt.clientX - wrapperRect.x)}px`;
     }
 }
-const hideRowDropTip = ($xeTable) => {
-    const rdTipEl = $xeTable.$refs.refRowDragTipElem;
+const hideDropTip = ($xeTable) => {
+    const rdTipEl = $xeTable.$refs.refDragTipElem;
+    const rdLineEl = $xeTable.$refs.refDragRowLineElem;
+    const cdLineEl = $xeTable.$refs.refDragColLineElem;
     if (rdTipEl) {
         rdTipEl.style.display = '';
     }
-};
-const updateRowDropTipContent = ($xeTable, tdEl) => {
-    const reactData = $xeTable;
-    const { dragRow } = reactData;
-    const dragOpts = $xeTable.computeDragOpts;
-    const { rowTooltipMethod } = dragOpts;
-    let tipContent = '';
-    if (rowTooltipMethod) {
-        tipContent = `${rowTooltipMethod({
-            row: dragRow
-        }) || ''}`;
+    if (rdLineEl) {
+        rdLineEl.style.display = '';
     }
-    else {
-        tipContent = getI18n('vxe.table.dragTip', [tdEl.textContent || '']);
+    if (cdLineEl) {
+        cdLineEl.style.display = '';
     }
-    reactData.dragTipText = tipContent;
 };
 const Methods = {
     callSlot(slotFunc, params, h, vNodes) {
@@ -556,6 +607,7 @@ const Methods = {
         editStore.removeMaps = {};
         const sYLoad = this.updateScrollYStatus(fullData);
         this.scrollYLoad = sYLoad;
+        this.isDragRowMove = false;
         // 全量数据
         this.tableFullData = fullData;
         this.tableFullTreeData = treeData;
@@ -739,6 +791,7 @@ const Methods = {
         const tableFullColumn = getColumnList(collectColumn);
         this.tableFullColumn = tableFullColumn;
         this._isLoading = true;
+        this.isDragColMove = false;
         this.initColumnSort();
         return Promise.resolve(this.restoreCustomStorage()).then(() => {
             this._isLoading = false;
@@ -3013,7 +3066,7 @@ const Methods = {
                                     // 如果点击了当前表格之外
                                     !getEventTargetNode(evnt, $el).flag) {
                                     setTimeout(() => {
-                                        this.clearEdit(evnt).then(() => {
+                                        this.handleClearEdit(evnt).then(() => {
                                             // 如果存在校验，点击了表格之外则清除
                                             if (!this.isActivated && editRules && validOpts.autoClear) {
                                                 this.validErrorMaps = {};
@@ -3083,8 +3136,8 @@ const Methods = {
         if (isEsc) {
             this.preventEvent(evnt, 'event.keydown', null, () => {
                 this.emitEvent('keydown-start', {}, evnt);
-                if (keyboardConfig && mouseConfig && mouseOpts.area && this.handleKeyboardEvent) {
-                    this.handleKeyboardEvent(evnt);
+                if (keyboardConfig && mouseConfig && mouseOpts.area && this.handleKeyboardCellAreaEvent) {
+                    this.handleKeyboardCellAreaEvent(evnt);
                 }
                 else if (actived.row || filterStore.visible || ctxMenuStore.visible) {
                     evnt.stopPropagation();
@@ -3095,7 +3148,7 @@ const Methods = {
                         // 如果是激活编辑状态，则取消编辑
                         if (actived.row) {
                             const params = actived.args;
-                            this.clearEdit(evnt);
+                            this.handleClearEdit(evnt);
                             // 如果配置了选中功能，则为选中状态
                             if (mouseConfig && mouseOpts.selected) {
                                 this.$nextTick(() => this.handleSelected(params, evnt));
@@ -3155,8 +3208,8 @@ const Methods = {
                         this.moveCtxMenu(evnt, keyCode, ctxMenuStore, 'selected', 39, true, this.ctxMenuList);
                     }
                 }
-                else if (keyboardConfig && mouseConfig && mouseOpts.area && this.handleKeyboardEvent) {
-                    this.handleKeyboardEvent(evnt);
+                else if (keyboardConfig && mouseConfig && mouseOpts.area && this.handleKeyboardCellAreaEvent) {
+                    this.handleKeyboardCellAreaEvent(evnt);
                 }
                 else if (keyboardConfig && isSpacebar && keyboardOpts.isChecked && selected.row && selected.column && (selected.column.type === 'checkbox' || selected.column.type === 'radio')) {
                     // 空格键支持选中复选框
@@ -3192,7 +3245,7 @@ const Methods = {
                         // 如果是激活编辑状态，则取消编辑
                         if (actived.row) {
                             const params = actived.args;
-                            this.clearEdit(evnt);
+                            this.handleClearEdit(evnt);
                             // 如果配置了选中功能，则为选中状态
                             if (mouseConfig && mouseOpts.selected) {
                                 this.$nextTick(() => this.handleSelected(params, evnt));
@@ -4708,6 +4761,9 @@ const Methods = {
             this.emitEvent('sort-change', params, evnt);
         }
     },
+    /**
+     * 行拖拽
+     */
     handleRowDragDragstartEvent(evnt) {
         const img = new Image();
         if (evnt.dataTransfer) {
@@ -4719,26 +4775,29 @@ const Methods = {
         const props = $xeTable;
         const reactData = $xeTable;
         const internalData = $xeTable;
-        const { treeConfig } = props;
-        const dragOpts = $xeTable.computeDragOpts;
-        const { dragEndMethod } = dragOpts;
+        const { treeConfig, dragConfig } = props;
+        const rowDragOpts = $xeTable.computeRowDragOpts;
+        const { dragEndMethod } = rowDragOpts;
         const treeOpts = $xeTable.computeTreeOpts;
         const { transform } = treeOpts;
         const { dragRow } = reactData;
         const { afterFullData, afterTreeFullData, tableFullData, tableFullTreeData, prevDragRow, prevDragPos } = internalData;
+        const dEndMethod = dragEndMethod || (dragConfig ? dragConfig.dragEndMethod : null);
+        const dragOffsetIndex = prevDragPos === 'bottom' ? 1 : 0;
         if (prevDragRow && dragRow) {
             // 判断是否有拖动
             if (prevDragRow !== dragRow) {
-                Promise.resolve(dragEndMethod
-                    ? dragEndMethod({
+                Promise.resolve(dEndMethod
+                    ? dEndMethod({
                         oldRow: dragRow,
-                        newRow: prevDragRow
+                        newRow: prevDragRow,
+                        dragPos: prevDragPos,
+                        offsetIndex: dragOffsetIndex
                     })
                     : true).then((status) => {
                     if (!status) {
                         return;
                     }
-                    const dragOffsetIndex = prevDragPos === 'bottom' ? 1 : 0;
                     let oafIndex = -1;
                     let nafIndex = -1;
                     if (treeConfig) {
@@ -4776,18 +4835,19 @@ const Methods = {
                     if (!(treeConfig && transform)) {
                         $xeTable.updateAfterDataIndex();
                     }
-                    $xeTable.updateFooter();
                     $xeTable.checkSelectionStatus();
                     if (reactData.scrollYLoad) {
                         $xeTable.updateScrollYSpace();
                     }
                     $xeTable.$nextTick().then(() => {
                         $xeTable.updateCellAreas();
-                        return $xeTable.recalculate();
+                        $xeTable.recalculate();
                     });
                     $xeTable.dispatchEvent('row-dragend', {
                         oldRow: dragRow,
                         newRow: prevDragRow,
+                        dragPos: prevDragPos,
+                        offsetIndex: dragOffsetIndex,
                         _index: {
                             newIndex: nafIndex,
                             oldIndex: oafIndex
@@ -4797,10 +4857,10 @@ const Methods = {
                 });
             }
         }
-        hideRowDropTip($xeTable);
+        hideDropTip($xeTable);
         clearRowDropOrigin($xeTable);
-        clearRowDropTarget($xeTable);
         reactData.dragRow = null;
+        reactData.dragCol = null;
         setTimeout(() => {
             reactData.isDragRowMove = false;
         }, 500);
@@ -4809,50 +4869,57 @@ const Methods = {
         const $xeTable = this;
         const internalData = $xeTable;
         const reactData = $xeTable;
+        const { dragRow } = reactData;
+        if (!dragRow) {
+            evnt.preventDefault();
+            return;
+        }
         const trEl = evnt.currentTarget;
         const rowid = trEl.getAttribute('rowid');
         const row = $xeTable.getRowById(rowid);
-        clearRowDropTarget($xeTable);
         if (row) {
             evnt.preventDefault();
             evnt.preventDefault();
             const { dragRow } = reactData;
             const offsetY = evnt.clientY - trEl.getBoundingClientRect().y;
             const dragPos = offsetY < trEl.clientHeight / 2 ? 'top' : 'bottom';
-            updateRowDropTarget($xeTable, row, dragPos);
             internalData.prevDragRow = row;
             internalData.prevDragPos = dragPos;
+            showDropTip($xeTable, evnt, trEl, null, dragPos);
             $xeTable.dispatchEvent('row-dragover', {
                 oldRow: dragRow,
                 targetRow: row,
                 dragPos
             }, evnt);
         }
-        showRowDropTip(evnt, $xeTable);
     },
     handleCellDragMousedownEvent(evnt, params) {
         var _a;
         const $xeTable = this;
+        const props = $xeTable;
         const reactData = $xeTable;
         evnt.stopPropagation();
-        const dragOpts = $xeTable.computeDragOpts;
-        const { dragStartMethod } = dragOpts;
+        const { dragConfig } = props;
+        const rowDragOpts = $xeTable.computeRowDragOpts;
+        const { dragStartMethod } = rowDragOpts;
         const { row } = params;
         const dragEl = evnt.currentTarget;
-        const tdEl = (_a = dragEl.parentNode) === null || _a === void 0 ? void 0 : _a.parentNode;
-        const trEl = tdEl.parentNode;
+        const tdEl = (_a = dragEl.parentElement) === null || _a === void 0 ? void 0 : _a.parentElement;
+        const trEl = tdEl.parentElement;
+        const dStartMethod = dragStartMethod || (dragConfig ? dragConfig.dragStartMethod : null);
         reactData.isDragRowMove = false;
         clearRowDropOrigin($xeTable);
-        if (dragStartMethod && !dragStartMethod(params)) {
+        if (dStartMethod && !dStartMethod(params)) {
             trEl.draggable = false;
             reactData.dragRow = null;
-            hideRowDropTip($xeTable);
+            reactData.dragCol = null;
+            hideDropTip($xeTable);
             return;
         }
         reactData.dragRow = row;
+        reactData.dragCol = null;
         trEl.draggable = true;
         updateRowDropOrigin($xeTable, row);
-        showRowDropTip(evnt, $xeTable);
         updateRowDropTipContent($xeTable, tdEl);
         $xeTable.dispatchEvent('row-dragstart', params, evnt);
     },
@@ -4860,10 +4927,162 @@ const Methods = {
         const $xeTable = this;
         const reactData = $xeTable;
         clearRowDropOrigin($xeTable);
-        hideRowDropTip($xeTable);
+        hideDropTip($xeTable);
         reactData.dragRow = null;
+        reactData.dragCol = null;
         reactData.isDragRowMove = false;
     },
+    /**
+     * 列拖拽
+     */
+    handleHeaderCellDragDragstartEvent(evnt) {
+        const img = new Image();
+        if (evnt.dataTransfer) {
+            evnt.dataTransfer.setDragImage(img, 0, 0);
+        }
+    },
+    handleHeaderCellDragDragendEvent(evnt) {
+        const $xeTable = this;
+        const props = $xeTable;
+        const reactData = $xeTable;
+        const internalData = $xeTable;
+        const { mouseConfig } = props;
+        const columnDragOpts = $xeTable.computeColumnDragOpts;
+        const { dragEndMethod } = columnDragOpts;
+        const { dragCol } = reactData;
+        const { collectColumn, prevDragCol, prevDragPos } = internalData;
+        const dragOffsetIndex = prevDragPos === 'right' ? 1 : 0;
+        if (prevDragCol && dragCol) {
+            // 判断是否有拖动
+            if (prevDragCol !== dragCol) {
+                Promise.resolve(dragEndMethod
+                    ? dragEndMethod({
+                        oldColumn: dragCol,
+                        newColumn: prevDragCol,
+                        dragPos: prevDragPos,
+                        offsetIndex: dragOffsetIndex
+                    })
+                    : true).then((status) => {
+                    if (!status) {
+                        return;
+                    }
+                    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) {
+                            $xeTable.clearSelected();
+                        }
+                        if ($xeTable.clearCellAreas) {
+                            $xeTable.clearCellAreas();
+                            $xeTable.clearCopyCellArea();
+                        }
+                    }
+                    $xeTable.analyColumnWidth();
+                    $xeTable.$nextTick().then(() => {
+                        $xeTable.updateCellAreas();
+                        $xeTable.refreshColumn(true);
+                    });
+                    $xeTable.dispatchEvent('column-dragend', {
+                        oldColumn: dragCol,
+                        newColumn: prevDragCol,
+                        dragPos: prevDragPos,
+                        offsetIndex: dragOffsetIndex,
+                        _index: {
+                            newIndex: nafIndex,
+                            oldIndex: oafIndex
+                        }
+                    }, evnt);
+                }).catch(() => {
+                });
+            }
+        }
+        hideDropTip($xeTable);
+        clearColDropOrigin($xeTable);
+        reactData.dragRow = null;
+        reactData.dragCol = null;
+        setTimeout(() => {
+            reactData.isDragColMove = false;
+        }, 500);
+    },
+    handleHeaderCellDragDragoverEvent(evnt) {
+        const $xeTable = this;
+        const reactData = $xeTable;
+        const internalData = $xeTable;
+        const { dragCol } = reactData;
+        if (!dragCol) {
+            evnt.preventDefault();
+            return;
+        }
+        const thEl = evnt.currentTarget;
+        const colid = thEl.getAttribute('colid');
+        const column = $xeTable.getColumnById(colid);
+        if (column) {
+            evnt.preventDefault();
+            const { dragCol } = reactData;
+            const offsetX = evnt.clientX - thEl.getBoundingClientRect().x;
+            const dragPos = offsetX < thEl.clientWidth / 2 ? 'left' : 'right';
+            internalData.prevDragCol = column;
+            internalData.prevDragPos = dragPos;
+            showDropTip($xeTable, evnt, null, thEl, dragPos);
+            $xeTable.dispatchEvent('column-dragover', {
+                oldColumn: dragCol,
+                targetColumn: column,
+                dragPos
+            }, evnt);
+        }
+    },
+    handleHeaderCellDragMousedownEvent(evnt, params) {
+        var _a;
+        const $xeTable = this;
+        const reactData = $xeTable;
+        evnt.stopPropagation();
+        const columnDragOpts = $xeTable.computeColumnDragOpts;
+        const { dragStartMethod } = columnDragOpts;
+        const { column } = params;
+        const dragEl = evnt.currentTarget;
+        const thEl = (_a = dragEl.parentElement) === null || _a === void 0 ? void 0 : _a.parentElement;
+        reactData.isDragColMove = false;
+        clearColDropOrigin($xeTable);
+        if (dragStartMethod && !dragStartMethod(params)) {
+            thEl.draggable = false;
+            reactData.dragRow = null;
+            reactData.dragCol = null;
+            hideDropTip($xeTable);
+            return;
+        }
+        reactData.dragCol = column;
+        reactData.dragRow = null;
+        thEl.draggable = true;
+        updateColDropOrigin($xeTable, column);
+        updateColDropTipContent($xeTable, thEl);
+        $xeTable.dispatchEvent('column-dragstart', params, evnt);
+    },
+    handleHeaderCellDragMouseupEvent() {
+        const $xeTable = this;
+        const reactData = $xeTable;
+        clearColDropOrigin($xeTable);
+        hideDropTip($xeTable);
+        reactData.dragRow = null;
+        reactData.dragCol = null;
+        reactData.isDragColMove = false;
+    },
     setPendingRow(rows, status) {
         const pendingMaps = Object.assign({}, this.pendingRowMaps);
         const pendingList = [...this.pendingRowList];
@@ -6341,8 +6560,8 @@ const Methods = {
         }
     },
     updateCellAreas() {
-        if (this.mouseConfig && this.mouseOpts.area && this.handleUpdateCellAreas) {
-            return this.handleUpdateCellAreas();
+        if (this.mouseConfig && this.mouseOpts.area && this.handleRecalculateCellAreas) {
+            return this.handleRecalculateCellAreas();
         }
         return this.$nextTick();
     },

package/es/table/src/props.js

@@ -159,8 +159,12 @@ export default {
     cellConfig: Object,
     // 行配置信息
     rowConfig: Object,
-    // 可拖拽配置项
+    // 已废弃，被 rowDragConfig 替换
     dragConfig: Object,
+    // 行拖拽排序配置项
+    rowDragConfig: Object,
+    // 列拖拽排序配置项
+    columnDragConfig: Object,
     // 列调整配置项
     resizableConfig: Object,
     // 序号配置项