vxe-table 3.11.39 → 3.12.0-beta.1

package/es/table/src/body.js

@@ -352,15 +352,9 @@ function renderRows(h, _vm, $xeTable, fixedType, tableData, tableColumn) {
         }
         // 拖拽行事件
         if (rowOpts.drag && (!treeConfig || transform)) {
-            trOn.dragstart = (evnt) => {
-                $xeTable.handleRowDragDragstartEvent(evnt);
-            };
-            trOn.dragover = (evnt) => {
-                $xeTable.handleRowDragDragoverEvent(evnt);
-            };
-            trOn.dragend = (evnt) => {
-                $xeTable.handleRowDragDragendEvent(evnt);
-            };
+            trOn.dragstart = $xeTable.handleRowDragDragstartEvent;
+            trOn.dragend = $xeTable.handleRowDragDragendEvent;
+            trOn.dragover = $xeTable.handleRowDragDragoverEvent;
         }
         const trClass = [
             'vxe-body--row',
@@ -506,13 +500,14 @@ export default {
         const { tId, $scopedSlots } = $xeTable;
         const { fixedColumn, fixedType, tableColumn } = props;
         const { showOverflow: allColumnOverflow, spanMethod, footerSpanMethod, mouseConfig } = tableProps;
-        const { tableData, scrollXLoad, scrollYLoad, isAllOverflow, isDragRowMove, expandColumn } = tableReactData;
-        const { visibleColumn } = tableInternalData;
+        const { tableData, scrollXLoad, scrollYLoad, isAllOverflow, isDragRowMove, expandColumn, dragRow, dragCol } = tableReactData;
+        const { visibleColumn, fullAllDataRowIdData, fullColumnIdData } = tableInternalData;
         const rowOpts = $xeTable.computeRowOpts;
         const sYOpts = $xeTable.computeSYOpts;
         const emptyOpts = $xeTable.computeEmptyOpts;
         const mouseOpts = $xeTable.computeMouseOpts;
         const rowDragOpts = $xeTable.computeRowDragOpts;
+        let renderDataList = tableData;
         let renderColumnList = tableColumn;
         if (fixedType) {
             // 如果是使用优化模式
@@ -529,6 +524,54 @@ export default {
                 renderColumnList = visibleColumn;
             }
         }
+        // 行拖拽
+        if (scrollYLoad && dragRow) {
+            if (renderDataList.length > 2) {
+                const dRowRest = fullAllDataRowIdData[getRowid($xeTable, dragRow)];
+                if (dRowRest) {
+                    const drIndex = dRowRest._index;
+                    const firstRow = renderDataList[0];
+                    const lastRow = renderDataList[renderDataList.length - 1];
+                    const firstRowRest = fullAllDataRowIdData[getRowid($xeTable, firstRow)];
+                    const lastRowRest = fullAllDataRowIdData[getRowid($xeTable, lastRow)];
+                    if (firstRowRest && lastRowRest) {
+                        const frIndex = firstRowRest._index;
+                        const lrIndex = lastRowRest._index;
+                        if (drIndex < frIndex) {
+                            renderDataList = [dragRow].concat(renderDataList);
+                        }
+                        else if (drIndex > lrIndex) {
+                            renderDataList = renderDataList.concat([dragRow]);
+                        }
+                    }
+                }
+            }
+        }
+        if (!fixedType) {
+            // 列拖拽
+            if (scrollXLoad && dragCol) {
+                if (renderColumnList.length > 2) {
+                    const dCowRest = fullColumnIdData[dragCol.id];
+                    if (dCowRest) {
+                        const dcIndex = dCowRest._index;
+                        const firstCol = renderColumnList[0];
+                        const lastCol = renderColumnList[renderColumnList.length - 1];
+                        const firstColRest = fullColumnIdData[firstCol.id];
+                        const lastColRest = fullColumnIdData[lastCol.id];
+                        if (firstColRest && lastColRest) {
+                            const fcIndex = firstColRest._index;
+                            const lcIndex = lastColRest._index;
+                            if (dcIndex < fcIndex) {
+                                renderColumnList = [dragCol].concat(renderColumnList);
+                            }
+                            else if (dcIndex > lcIndex) {
+                                renderColumnList = renderColumnList.concat([dragCol]);
+                            }
+                        }
+                    }
+                }
+            }
+        }
         let emptyContent;
         if ($scopedSlots.empty) {
             emptyContent = $scopedSlots.empty.call(this, { $table: $xeTable, $grid: $xeTable.xegrid }, h);
@@ -599,10 +642,10 @@ export default {
                             tag: 'tbody',
                             name: `vxe-body--row-list${isDragRowMove ? '' : '-disabled'}`
                         }
-                    }, renderRows(h, this, $xeTable, fixedType, tableData, renderColumnList))
+                    }, renderRows(h, this, $xeTable, fixedType, renderDataList, renderColumnList))
                     : h('tbody', {
                         ref: 'tbody'
-                    }, renderRows(h, this, $xeTable, fixedType, tableData, renderColumnList))
+                    }, renderRows(h, this, $xeTable, fixedType, renderDataList, renderColumnList))
             ]),
             h('div', {
                 class: 'vxe-table--checkbox-range'

package/es/table/src/footer.js

@@ -219,13 +219,13 @@ export default {
         const { tId } = $xeTable;
         const { fixedType, fixedColumn, tableColumn } = props;
         const { spanMethod, footerSpanMethod, showFooterOverflow: allColumnFooterOverflow } = tableProps;
-        const { visibleColumn } = tableInternalData;
-        const { scrollbarWidth } = tableReactData;
+        const { visibleColumn, fullColumnIdData } = tableInternalData;
+        const { scrollXLoad, scrollYLoad, scrollbarWidth, dragCol } = tableReactData;
         let renderColumnList = tableColumn;
         // 如果是使用优化模式
         if (fixedType) {
             // 如果是使用优化模式
-            if (allColumnFooterOverflow) {
+            if (scrollXLoad || scrollYLoad || allColumnFooterOverflow) {
                 // 如果不支持优化模式
                 if (spanMethod || footerSpanMethod) {
                     renderColumnList = visibleColumn;
@@ -238,6 +238,31 @@ export default {
                 renderColumnList = visibleColumn;
             }
         }
+        if (!fixedType) {
+            // 列拖拽
+            if (scrollXLoad && dragCol) {
+                if (renderColumnList.length > 2) {
+                    const dCowRest = fullColumnIdData[dragCol.id];
+                    if (dCowRest) {
+                        const dcIndex = dCowRest._index;
+                        const firstCol = renderColumnList[0];
+                        const lastCol = renderColumnList[renderColumnList.length - 1];
+                        const firstColRest = fullColumnIdData[firstCol.id];
+                        const lastColRest = fullColumnIdData[lastCol.id];
+                        if (firstColRest && lastColRest) {
+                            const fcIndex = firstColRest._index;
+                            const lcIndex = lastColRest._index;
+                            if (dcIndex < fcIndex) {
+                                renderColumnList = [dragCol].concat(renderColumnList);
+                            }
+                            else if (dcIndex > lcIndex) {
+                                renderColumnList = renderColumnList.concat([dragCol]);
+                            }
+                        }
+                    }
+                }
+            }
+        }
         const ons = {};
         if (!fixedType) {
             ons.scroll = this.scrollEvent;

package/es/table/src/header.js

@@ -75,6 +75,7 @@ const renderRows = (h, _vm, cols, $rowIndex) => {
                     'is--sortable': column.sortable,
                     'col--filter': !!column.filters,
                     'is--filter-active': hasFilter,
+                    'is--drag-active': !column.fixed && !isDisabledDrag,
                     'is--drag-disabled': isDisabledDrag,
                     'col--current': currentColumn === column
                 }, getClass(headerClassName, params), getClass(headerCellClassName, params)],
@@ -202,9 +203,9 @@ export default {
         const { fixedType, fixedColumn, tableColumn } = props;
         const { headerColumn } = this;
         const { showHeaderOverflow: allColumnHeaderOverflow, spanMethod, footerSpanMethod } = tableProps;
-        const { isGroup, scrollbarWidth } = tableReactData;
-        const { visibleColumn } = tableInternalData;
-        let headerGroups = headerColumn;
+        const { isGroup, scrollXLoad, scrollYLoad, scrollbarWidth, dragCol } = tableReactData;
+        const { visibleColumn, fullColumnIdData } = tableInternalData;
+        let renderHeaderList = headerColumn;
         let renderColumnList = tableColumn;
         if (isGroup) {
             renderColumnList = visibleColumn;
@@ -212,7 +213,7 @@ export default {
         else {
             if (fixedType) {
                 // 如果是使用优化模式
-                if (allColumnHeaderOverflow) {
+                if (scrollXLoad || scrollYLoad || allColumnHeaderOverflow) {
                     // 如果不支持优化模式
                     if (spanMethod || footerSpanMethod) {
                         renderColumnList = visibleColumn;
@@ -225,7 +226,36 @@ export default {
                     renderColumnList = visibleColumn;
                 }
             }
-            headerGroups = [renderColumnList];
+            renderHeaderList = [renderColumnList];
+        }
+        if (!fixedType) {
+            // 列拖拽
+            if (scrollXLoad && dragCol) {
+                if (renderColumnList.length > 2) {
+                    const dCowRest = fullColumnIdData[dragCol.id];
+                    if (dCowRest) {
+                        const dcIndex = dCowRest._index;
+                        const firstCol = renderColumnList[0];
+                        const lastCol = renderColumnList[renderColumnList.length - 1];
+                        const firstColRest = fullColumnIdData[firstCol.id];
+                        const lastColRest = fullColumnIdData[lastCol.id];
+                        if (firstColRest && lastColRest) {
+                            const fcIndex = firstColRest._index;
+                            const lcIndex = lastColRest._index;
+                            console.log(dragCol.id, dcIndex, fcIndex, lcIndex, renderColumnList.length);
+                            if (dcIndex < fcIndex) {
+                                renderColumnList = [dragCol].concat(renderColumnList);
+                                renderHeaderList = [[dragCol].concat(renderHeaderList[0])].concat(renderHeaderList.slice(1));
+                            }
+                            else if (dcIndex > lcIndex) {
+                                renderColumnList = renderColumnList.concat([dragCol]);
+                                renderHeaderList = [renderHeaderList[0].concat([dragCol])].concat(renderHeaderList.slice(1));
+                            }
+                            console.log(renderColumnList.length);
+                        }
+                    }
+                }
+            }
         }
         return h('div', {
             class: ['vxe-table--header-wrapper', fixedType ? `fixed-${fixedType}--wrapper` : 'body--wrapper'],
@@ -275,7 +305,7 @@ export default {
                  */
                 h('thead', {
                     ref: 'thead'
-                }, renderHeads(h, this, headerGroups))
+                }, renderHeads(h, this, renderHeaderList))
             ]),
             /**
              * 其他

package/es/table/src/methods.js

@@ -7,8 +7,6 @@ import { getRowUniqueId, clearTableAllStatus, getRowkey, getRowid, rowToVisible,
 import { getSlotVNs } from '../../ui/src/vn';
 import { warnLog, errLog } from '../../ui/src/log';
 const { getConfig, getI18n, renderer, formats, interceptor, createEvent } = VxeUI;
-// const isWebkit = browse['-webkit'] && !browse.edge
-// const debounceScrollYDuration = browse.msie ? 80 : 20
 const customStorageKey = 'VXE_CUSTOM_STORE';
 // 获取所有的列，排除分组
 const getColumnList = (columns) => {
@@ -280,7 +278,7 @@ const calcCellHeight = ($xeTable) => {
     const { showOverflow } = props;
     const { tableData, scrollXLoad, scrollYLoad } = reactData;
     const { fullAllDataRowIdData } = internalData;
-    const el = $xeTable.$el;
+    const el = $xeTable.$refs.refElem;
     if (!showOverflow && (scrollXLoad || scrollYLoad) && el) {
         let paddingTop = 0;
         let paddingBottom = 0;
@@ -288,28 +286,27 @@ const calcCellHeight = ($xeTable) => {
         tableData.forEach((row) => {
             const rowid = getRowid($xeTable, row);
             const rowRest = fullAllDataRowIdData[rowid];
-            const trList = el.querySelectorAll(`.vxe-body--row[rowid="${rowid}"]`);
-            if (rowRest && trList.length) {
+            const cellList = el.querySelectorAll(`.vxe-body--row[rowid="${rowid}"]>.vxe-body--column>.vxe-cell`);
+            if (rowRest && cellList.length) {
                 let height = 0;
-                for (let i = 0; i < trList.length; i++) {
-                    const trEl = trList[i];
-                    const tdList = trEl.children;
-                    for (let j = 0; j < tdList.length; j++) {
-                        const tdEl = tdList[j];
-                        const cellElem = tdEl.querySelector('.vxe-cell');
-                        if (!calcPadding) {
-                            paddingTop = XEUtils.toNumber(getComputedStyle(tdEl).paddingTop);
-                            paddingBottom = XEUtils.toNumber(getComputedStyle(tdEl).paddingBottom);
-                            calcPadding = true;
-                        }
-                        let cellHeight = paddingTop + paddingBottom;
-                        if (cellElem) {
-                            cellHeight += cellElem.offsetHeight;
-                        }
-                        height = Math.max(height, cellHeight);
+                for (let i = 0; i < cellList.length; i++) {
+                    const cellElem = cellList[i];
+                    const tdEl = cellElem.parentElement;
+                    if (!tdEl || !tdEl.clientWidth) {
+                        break;
                     }
+                    if (!calcPadding) {
+                        paddingTop = XEUtils.toNumber(getComputedStyle(tdEl).paddingTop);
+                        paddingBottom = XEUtils.toNumber(getComputedStyle(tdEl).paddingBottom);
+                        calcPadding = true;
+                    }
+                    let cellHeight = paddingTop + paddingBottom;
+                    if (cellElem) {
+                        cellHeight += cellElem.clientHeight;
+                    }
+                    height = Math.max(height, cellHeight);
                 }
-                rowRest.height = height;
+                rowRest.height = scrollXLoad ? Math.max(rowRest.height, height) : height;
             }
         });
     }
@@ -424,15 +421,22 @@ function showDropTip($xeTable, evnt, trEl, thEl, showLine, dragPos) {
     const { scrollbarWidth, scrollbarHeight } = reactData;
     const { prevDragToChild } = internalData;
     const wrapperRect = el.getBoundingClientRect();
+    const tableWidth = el.clientWidth;
+    const tableHeight = el.clientHeight;
     if (trEl) {
         const rdLineEl = $xeTable.$refs.refDragRowLineElem;
         if (rdLineEl) {
             if (showLine) {
                 const trRect = trEl.getBoundingClientRect();
+                let trHeight = trEl.clientHeight;
+                const offsetTop = Math.max(1, trRect.y - wrapperRect.y);
+                if (offsetTop + trHeight > tableHeight - scrollbarHeight) {
+                    trHeight = tableHeight - offsetTop - scrollbarHeight;
+                }
                 rdLineEl.style.display = 'block';
-                rdLineEl.style.top = `${Math.max(1, trRect.y - wrapperRect.y)}px`;
-                rdLineEl.style.height = `${trRect.height}px`;
-                rdLineEl.style.width = `${wrapperRect.width - scrollbarWidth}px`;
+                rdLineEl.style.top = `${offsetTop}px`;
+                rdLineEl.style.height = `${trHeight}px`;
+                rdLineEl.style.width = `${tableWidth - scrollbarWidth}px`;
                 rdLineEl.setAttribute('drag-pos', dragPos);
                 rdLineEl.setAttribute('drag-to-child', prevDragToChild ? 'y' : 'n');
             }
@@ -445,17 +449,32 @@ function showDropTip($xeTable, evnt, trEl, thEl, showLine, dragPos) {
         const cdLineEl = $xeTable.$refs.refDragColLineElem;
         if (cdLineEl) {
             if (showLine) {
+                const leftContainerElem = $xeTable.$refs.leftContainer;
+                const leftContainerWidth = leftContainerElem ? leftContainerElem.clientWidth : 0;
+                const rightContainerElem = $xeTable.$refs.rightContainer;
+                const rightContainerWidth = rightContainerElem ? rightContainerElem.clientWidth : 0;
                 const thRect = thEl.getBoundingClientRect();
+                let thWidth = thEl.clientWidth;
                 const offsetTop = Math.max(0, thRect.y - wrapperRect.y);
+                const startX = leftContainerWidth;
+                let offsetLeft = thRect.x - wrapperRect.x;
+                if (offsetLeft < startX) {
+                    thWidth -= startX - offsetLeft;
+                    offsetLeft = startX;
+                }
+                const endX = tableWidth - rightContainerWidth - (rightContainerWidth ? 0 : scrollbarWidth);
+                if (offsetLeft + thWidth > endX) {
+                    thWidth = endX - offsetLeft;
+                }
                 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.left = `${offsetLeft}px`;
+                cdLineEl.style.width = `${thWidth}px`;
                 if (prevDragToChild) {
                     cdLineEl.style.height = `${thRect.height}px`;
                 }
                 else {
-                    cdLineEl.style.height = `${wrapperRect.height - offsetTop - scrollbarHeight}px`;
+                    cdLineEl.style.height = `${tableHeight - offsetTop - scrollbarHeight}px`;
                 }
                 cdLineEl.setAttribute('drag-pos', dragPos);
                 cdLineEl.setAttribute('drag-to-child', prevDragToChild ? 'y' : 'n');
@@ -895,7 +914,7 @@ const Methods = {
         return Promise.resolve(this.restoreCustomStorage()).then(() => {
             this._isLoading = false;
             this.cacheColumnMap();
-            this.parseColumns().then(() => {
+            this.parseColumns(true).then(() => {
                 if (this.scrollXLoad) {
                     this.loadScrollXData(true);
                 }
@@ -2444,15 +2463,11 @@ const Methods = {
     /**
      * 刷新列配置
      */
-    refreshColumn(initOrder) {
-        if (initOrder) {
-            const columnList = XEUtils.orderBy(this.collectColumn, 'renderSortNumber');
-            this.collectColumn = columnList;
-            const tableFullColumn = getColumnList(columnList);
-            this.tableFullColumn = tableFullColumn;
-            this.cacheColumnMap();
+    refreshColumn(initSort) {
+        if (initSort) {
+            this.handleUpdateColumn();
         }
-        return this.parseColumns().then(() => {
+        return this.parseColumns(true).then(() => {
             return this.refreshScroll();
         }).then(() => {
             return this.recalculate();
@@ -2462,7 +2477,7 @@ const Methods = {
      * 刷新列信息
      * 将固定的列左边、右边分别靠边
      */
-    parseColumns() {
+    parseColumns(isReset) {
         const $xeTable = this;
         const props = $xeTable;
         const internalData = $xeTable;
@@ -2560,10 +2575,12 @@ const Methods = {
                     warnLog('vxe.error.scrollErrProp', ['footer-span-method']);
                 }
             }
-            const { visibleSize } = handleVirtualXVisible(this);
-            scrollXStore.startIndex = 0;
-            scrollXStore.endIndex = visibleSize;
-            scrollXStore.visibleSize = visibleSize;
+            if (isReset) {
+                const { visibleSize } = handleVirtualXVisible(this);
+                scrollXStore.startIndex = 0;
+                scrollXStore.endIndex = visibleSize;
+                scrollXStore.visibleSize = visibleSize;
+            }
         }
         // 如果列被显示/隐藏，则清除合并状态
         // 如果列被设置为固定，则清除合并状态
@@ -2581,12 +2598,15 @@ const Methods = {
         });
         this.visibleColumn = visibleColumn;
         this.handleTableColumn();
-        return this.updateFooter().then(() => {
-            return this.recalculate();
-        }).then(() => {
-            this.updateCellAreas();
-            return this.recalculate();
-        });
+        if (isReset) {
+            return this.updateFooter().then(() => {
+                return this.recalculate();
+            }).then(() => {
+                this.updateCellAreas();
+                return this.recalculate();
+            });
+        }
+        return this.updateFooter();
     },
     /**
      * 指定列宽的列进行拆分
@@ -2881,48 +2901,6 @@ const Methods = {
             this.checkScrolling();
         }
     },
-    calcCellHeight() {
-        const $xeTable = this;
-        const props = $xeTable;
-        const reactData = $xeTable;
-        const internalData = $xeTable;
-        const { showOverflow } = props;
-        const { tableData, scrollXLoad, scrollYLoad } = reactData;
-        const { fullAllDataRowIdData } = internalData;
-        const el = $xeTable.$el;
-        if (!showOverflow && (scrollXLoad || scrollYLoad) && el) {
-            let paddingTop = 0;
-            let paddingBottom = 0;
-            let calcPadding = false;
-            tableData.forEach((row) => {
-                const rowid = getRowid($xeTable, row);
-                const rowRest = fullAllDataRowIdData[rowid];
-                const trList = el.querySelectorAll(`.vxe-body--row[rowid="${rowid}"]`);
-                if (rowRest && trList.length) {
-                    let height = 0;
-                    for (let i = 0; i < trList.length; i++) {
-                        const trEl = trList[i];
-                        const tdList = trEl.children;
-                        for (let j = 0; j < tdList.length; j++) {
-                            const tdEl = tdList[j];
-                            const cellElem = tdEl.querySelector('.vxe-cell');
-                            if (!calcPadding) {
-                                paddingTop = XEUtils.toNumber(getComputedStyle(tdEl).paddingTop);
-                                paddingBottom = XEUtils.toNumber(getComputedStyle(tdEl).paddingBottom);
-                                calcPadding = true;
-                            }
-                            let cellHeight = paddingTop + paddingBottom;
-                            if (cellElem) {
-                                cellHeight += cellElem.offsetHeight;
-                            }
-                            height = Math.max(height, cellHeight);
-                        }
-                    }
-                    rowRest.height = scrollXLoad ? Math.max(rowRest.height, height) : height;
-                }
-            });
-        }
-    },
     updateHeight() {
         this.customHeight = calcTableHeight(this, 'height');
         this.customMinHeight = calcTableHeight(this, 'minHeight');
@@ -2986,7 +2964,7 @@ const Methods = {
                     else {
                         if (fixedType) {
                             // 如果是使用优化模式
-                            if (allColumnHeaderOverflow) {
+                            if (scrollXLoad || scrollYLoad || allColumnHeaderOverflow) {
                                 // 如果不支持优化模式
                                 if (spanMethod || footerSpanMethod) {
                                     renderColumnList = visibleColumn;
@@ -3113,7 +3091,7 @@ const Methods = {
                     let renderColumnList = tableColumn;
                     if (fixedType) {
                         // 如果是使用优化模式
-                        if (allColumnFooterOverflow) {
+                        if (scrollXLoad || scrollYLoad || allColumnFooterOverflow) {
                             // 如果不支持优化模式
                             if (spanMethod || footerSpanMethod) {
                                 renderColumnList = visibleColumn;
@@ -5164,7 +5142,8 @@ const Methods = {
         const triggerFilter = getEventTargetNode(evnt, cell, 'vxe-cell--filter').flag;
         let triggerDrag = false;
         if (!(triggerInput || triggerCheckbox || triggerSort || triggerFilter)) {
-            if (columnOpts.drag && trigger === 'cell' && !(disabledMethod && disabledMethod(params))) {
+            const { column } = params;
+            if (columnOpts.drag && !column.fixed && trigger === 'cell' && !(disabledMethod && disabledMethod(params))) {
                 triggerDrag = true;
                 $xeTable.handleHeaderCellDragMousedownEvent(evnt, params);
             }
@@ -5486,7 +5465,7 @@ const Methods = {
             evnt.dataTransfer.setDragImage(img, 0, 0);
         }
     },
-    handleHeaderCellDragDragendEvent(evnt) {
+    handleColDragSwapEvent(evnt, isSyncColumn, dragCol, prevDragCol, prevDragPos, prevDragToChild) {
         const $xeTable = this;
         const props = $xeTable;
         const reactData = $xeTable;
@@ -5494,15 +5473,14 @@ const Methods = {
         const { mouseConfig } = props;
         const columnDragOpts = $xeTable.computeColumnDragOpts;
         const { isCrossDrag, isSelfToChildDrag, isToChildDrag, dragEndMethod } = columnDragOpts;
-        const { dragCol } = reactData;
-        const { collectColumn, prevDragCol, prevDragPos, prevDragToChild } = internalData;
+        const { collectColumn } = internalData;
         const dragOffsetIndex = prevDragPos === 'right' ? 1 : 0;
         if (prevDragCol && dragCol) {
             // 判断是否有拖动
             if (prevDragCol !== dragCol) {
                 const oldColumn = dragCol;
                 const newColumn = prevDragCol;
-                Promise.resolve(dragEndMethod
+                return Promise.resolve(dragEndMethod
                     ? dragEndMethod({
                         oldColumn,
                         newColumn,
@@ -5619,9 +5597,6 @@ const Methods = {
                             $xeTable.clearCopyCellArea();
                         }
                     }
-                    $xeTable.refreshColumn(true).then(() => {
-                        $xeTable.updateCellAreas();
-                    });
                     $xeTable.dispatchEvent('column-dragend', {
                         oldColumn,
                         newColumn,
@@ -5632,11 +5607,26 @@ const Methods = {
                             oldIndex: oafIndex
                         }
                     }, evnt);
-                    $xeTable.saveCustomStore('update:sort');
+                    if (isSyncColumn) {
+                        $xeTable.handleUpdateColumn();
+                        $xeTable.parseColumns(false).then(() => {
+                            $xeTable.updateCellAreas();
+                            return $xeTable.saveCustomStore('update:sort');
+                        });
+                    }
                 }).catch(() => {
                 });
             }
         }
+        return Promise.resolve();
+    },
+    handleHeaderCellDragDragendEvent(evnt) {
+        const $xeTable = this;
+        const reactData = $xeTable;
+        const internalData = $xeTable;
+        const { dragCol } = reactData;
+        const { prevDragCol, prevDragPos, prevDragToChild } = internalData;
+        $xeTable.handleColDragSwapEvent(evnt, true, dragCol, prevDragCol, prevDragPos, prevDragToChild);
         hideDropTip($xeTable);
         clearColDropOrigin($xeTable);
         internalData.prevDragToChild = false;
@@ -5644,6 +5634,9 @@ const Methods = {
         reactData.dragCol = null;
         setTimeout(() => {
             reactData.isDragColMove = false;
+            $xeTable.recalculate().then(() => {
+                $xeTable.loadScrollXData();
+            });
         }, 500);
     },
     handleHeaderCellDragDragoverEvent(evnt) {
@@ -5663,10 +5656,10 @@ const Methods = {
         const column = $xeTable.getColumnById(colid);
         if (column) {
             evnt.preventDefault();
-            const { dragCol } = reactData;
-            const offsetX = evnt.clientX - thEl.getBoundingClientRect().x;
+            const { clientX } = evnt;
+            const offsetX = clientX - thEl.getBoundingClientRect().x;
             const dragPos = offsetX < thEl.clientWidth / 2 ? 'left' : 'right';
-            if ((dragCol && dragCol.id === column.id) || (!isCrossDrag && column.parentId)) {
+            if (column.fixed || (dragCol && dragCol.id === column.id) || (!isCrossDrag && column.parentId)) {
                 showDropTip($xeTable, evnt, null, thEl, false, dragPos);
                 return;
             }
@@ -5679,6 +5672,36 @@ const Methods = {
                 targetColumn: column,
                 dragPos
             }, evnt);
+            // 边缘滚动
+            const el = $xeTable.$refs.refElem;
+            if (!el) {
+                return;
+            }
+            const xHandleEl = $xeTable.$refs.refScrollXHandleElem;
+            const tableBody = $xeTable.$refs.tableBody;
+            const tableBodyElem = tableBody ? tableBody.$el : null;
+            const scrollTargetEl = xHandleEl || tableBodyElem;
+            if (scrollTargetEl) {
+                const wrapperRect = el.getBoundingClientRect();
+                const tableWidth = el.clientWidth;
+                const leftContainerElem = $xeTable.$refs.leftContainer;
+                const leftContainerWidth = leftContainerElem ? leftContainerElem.clientWidth : 0;
+                const rightContainerElem = $xeTable.$refs.rightContainer;
+                const rightContainerWidth = rightContainerElem ? rightContainerElem.clientWidth : 0;
+                const srartX = wrapperRect.x + leftContainerWidth;
+                const endX = wrapperRect.x + tableWidth - rightContainerWidth;
+                const distSize = 28;
+                const startDistSize = clientX - srartX;
+                const endDistSize = endX - clientX;
+                if (startDistSize > 0 && startDistSize <= distSize) {
+                    const scrollRatio = Math.floor(tableWidth / (startDistSize > distSize / 2 ? 240 : 120));
+                    scrollTargetEl.scrollLeft -= scrollRatio * (distSize - startDistSize);
+                }
+                else if (endDistSize > 0 && endDistSize <= distSize) {
+                    const scrollRatio = Math.floor(tableWidth / (endDistSize > distSize / 2 ? 240 : 120));
+                    scrollTargetEl.scrollLeft += scrollRatio * (distSize - endDistSize);
+                }
+            }
         }
     },
     handleHeaderCellDragMousedownEvent(evnt, params) {
@@ -6925,6 +6948,15 @@ const Methods = {
         });
         this.tableColumn = tableColumn;
     },
+    handleUpdateColumn() {
+        const $xeTable = this;
+        const internalData = $xeTable;
+        const columnList = XEUtils.orderBy(internalData.collectColumn, 'renderSortNumber');
+        internalData.collectColumn = columnList;
+        const tableFullColumn = getColumnList(columnList);
+        internalData.tableFullColumn = tableFullColumn;
+        $xeTable.cacheColumnMap();
+    },
     updateScrollXData() {
         const $xeTable = this;
         const props = $xeTable;