vxe-table 4.8.16 → 4.9.1

package/lib/table/src/table.js

@@ -275,6 +275,8 @@ var _default = exports.default = (0, _vue.defineComponent)({
       scrollVMLoading: false,
       isDragRowMove: false,
       dragRow: null,
+      isDragColMove: false,
+      dragCol: null,
       dragTipText: '',
       _isResize: false,
       _isLoading: false
@@ -378,7 +380,9 @@ var _default = exports.default = (0, _vue.defineComponent)({
     const refRightContainer = (0, _vue.ref)();
     const refCellResizeBar = (0, _vue.ref)();
     const refEmptyPlaceholder = (0, _vue.ref)();
-    const refRowDragTipElem = (0, _vue.ref)();
+    const refDragTipElem = (0, _vue.ref)();
+    const refDragRowLineElem = (0, _vue.ref)();
+    const refDragColLineElem = (0, _vue.ref)();
     const refScrollXVirtualElem = (0, _vue.ref)();
     const refScrollYVirtualElem = (0, _vue.ref)();
     const refScrollXHandleElem = (0, _vue.ref)();
@@ -448,8 +452,11 @@ var _default = exports.default = (0, _vue.defineComponent)({
     const computeRowOpts = (0, _vue.computed)(() => {
       return Object.assign({}, getConfig().table.rowConfig, props.rowConfig);
     });
-    const computeDragOpts = (0, _vue.computed)(() => {
-      return Object.assign({}, getConfig().table.dragConfig, props.dragConfig);
+    const computeRowDragOpts = (0, _vue.computed)(() => {
+      return Object.assign({}, getConfig().table.rowDragConfig, props.rowDragConfig);
+    });
+    const computeColumnDragOpts = (0, _vue.computed)(() => {
+      return Object.assign({}, getConfig().table.columnDragConfig, props.columnDragConfig);
     });
     const computeResizeOpts = (0, _vue.computed)(() => {
       return Object.assign({}, getConfig().table.resizeConfig, props.resizeConfig);
@@ -696,7 +703,8 @@ var _default = exports.default = (0, _vue.defineComponent)({
       computeColumnOpts,
       computeCellOpts,
       computeRowOpts,
-      computeDragOpts,
+      computeRowDragOpts,
+      computeColumnDragOpts,
       computeResizeOpts,
       computeResizableOpts,
       computeSeqOpts,
@@ -1885,8 +1893,7 @@ var _default = exports.default = (0, _vue.defineComponent)({
       const cellOffsetWidth = computeCellOffsetWidth.value;
       const mouseOpts = computeMouseOpts.value;
       const keyboardOpts = computeKeyboardOpts.value;
-      const bodyWrapperRef = elemStore['main-body-wrapper'];
-      const bodyWrapperElem = bodyWrapperRef ? bodyWrapperRef.value : null;
+      const bodyWrapperElem = (0, _util.getRefElem)(elemStore['main-body-wrapper']);
       if (emptyPlaceholderElem) {
         emptyPlaceholderElem.style.top = `${headerHeight}px`;
         emptyPlaceholderElem.style.height = bodyWrapperElem ? `${bodyWrapperElem.offsetHeight - scrollbarHeight}px` : '';
@@ -1931,10 +1938,8 @@ var _default = exports.default = (0, _vue.defineComponent)({
           fixedWrapperElem = isFixedLeft ? refLeftContainer.value : refRightContainer.value;
         }
         layoutList.forEach(layout => {
-          const wrapperRef = elemStore[`${name}-${layout}-wrapper`];
-          const wrapperElem = wrapperRef ? wrapperRef.value : null;
-          const tableRef = elemStore[`${name}-${layout}-table`];
-          const tableElem = tableRef ? tableRef.value : null;
+          const wrapperElem = (0, _util.getRefElem)(elemStore[`${name}-${layout}-wrapper`]);
+          const tableElem = (0, _util.getRefElem)(elemStore[`${name}-${layout}-table`]);
           if (layout === 'header') {
             // 表头体样式处理
             // 横向滚动渲染
@@ -1954,13 +1959,11 @@ var _default = exports.default = (0, _vue.defineComponent)({
             if (tableElem) {
               tableElem.style.width = tWidth ? `${tWidth + scrollbarWidth}px` : '';
             }
-            const repairRef = elemStore[`${name}-${layout}-repair`];
-            const repairElem = repairRef ? repairRef.value : null;
+            const repairElem = (0, _util.getRefElem)(elemStore[`${name}-${layout}-repair`]);
             if (repairElem) {
               repairElem.style.width = `${tableWidth}px`;
             }
-            const listRef = elemStore[`${name}-${layout}-list`];
-            const listElem = listRef ? listRef.value : null;
+            const listElem = (0, _util.getRefElem)(elemStore[`${name}-${layout}-list`]);
             if (isGroup && listElem) {
               _xeUtils.default.arrayEach(listElem.querySelectorAll('.col--group'), thElem => {
                 const colNode = tableMethods.getColumnNode(thElem);
@@ -1991,8 +1994,7 @@ var _default = exports.default = (0, _vue.defineComponent)({
               });
             }
           } else if (layout === 'body') {
-            const emptyBlockRef = elemStore[`${name}-${layout}-emptyBlock`];
-            const emptyBlockElem = emptyBlockRef ? emptyBlockRef.value : null;
+            const emptyBlockElem = (0, _util.getRefElem)(elemStore[`${name}-${layout}-emptyBlock`]);
             if ((0, _dom.isNodeElement)(wrapperElem)) {
               let bodyMaxHeight = 0;
               const bodyMinHeight = customMinHeight - headerHeight - footerHeight;
@@ -2080,8 +2082,7 @@ var _default = exports.default = (0, _vue.defineComponent)({
               tableElem.style.width = tWidth ? `${tWidth + scrollbarWidth}px` : '';
             }
           }
-          const colgroupRef = elemStore[`${name}-${layout}-colgroup`];
-          const colgroupElem = colgroupRef ? colgroupRef.value : null;
+          const colgroupElem = (0, _util.getRefElem)(elemStore[`${name}-${layout}-colgroup`]);
           if (colgroupElem) {
             _xeUtils.default.arrayEach(colgroupElem.children, colElem => {
               const colid = colElem.getAttribute('name');
@@ -2109,8 +2110,7 @@ var _default = exports.default = (0, _vue.defineComponent)({
                 const showTitle = cellOverflow === 'title';
                 const showTooltip = cellOverflow === true || cellOverflow === 'tooltip';
                 let hasEllipsis = showTitle || showTooltip || showEllipsis;
-                const listRef = elemStore[`${name}-${layout}-list`];
-                const listElem = listRef ? listRef.value : null;
+                const listElem = (0, _util.getRefElem)(elemStore[`${name}-${layout}-list`]);
                 // 纵向虚拟滚动不支持动态行高
                 if (scrollYLoad && !hasEllipsis) {
                   hasEllipsis = true;
@@ -2844,6 +2844,7 @@ var _default = exports.default = (0, _vue.defineComponent)({
       editStore.removeMaps = {};
       const sYLoad = updateScrollYStatus(fullData);
       reactData.scrollYLoad = sYLoad;
+      reactData.isDragRowMove = false;
       // 全量数据
       internalData.tableFullData = fullData;
       internalData.tableFullTreeData = treeData;
@@ -3129,6 +3130,7 @@ var _default = exports.default = (0, _vue.defineComponent)({
       const tableFullColumn = getColumnList(collectColumn);
       internalData.tableFullColumn = tableFullColumn;
       reactData._isLoading = true;
+      reactData.isDragColMove = false;
       initColumnSort();
       return Promise.resolve(restoreCustomStorage()).then(() => {
         reactData._isLoading = false;
@@ -5696,8 +5698,8 @@ var _default = exports.default = (0, _vue.defineComponent)({
           mouseConfig
         } = props;
         const mouseOpts = computeMouseOpts.value;
-        if (mouseConfig && mouseOpts.area && $xeTable.handleUpdateCellAreas) {
-          return $xeTable.handleUpdateCellAreas();
+        if (mouseConfig && mouseOpts.area && $xeTable.handleRecalculateCellAreas) {
+          return $xeTable.handleRecalculateCellAreas();
         }
         return (0, _vue.nextTick)();
       },
@@ -5907,7 +5909,7 @@ var _default = exports.default = (0, _vue.defineComponent)({
                   // 如果点击了当前表格之外
                   !(0, _dom.getEventTargetNode)(evnt, el).flag) {
                     setTimeout(() => {
-                      $xeTable.clearEdit(evnt).then(() => {
+                      $xeTable.handleClearEdit(evnt).then(() => {
                         // 如果存在校验，点击了表格之外则清除
                         if (!internalData.isActivated && editRules && validOpts.autoClear) {
                           reactData.validErrorMaps = {};
@@ -5995,8 +5997,8 @@ var _default = exports.default = (0, _vue.defineComponent)({
       if (isEsc) {
         tablePrivateMethods.preventEvent(evnt, 'event.keydown', null, () => {
           dispatchEvent('keydown-start', {}, evnt);
-          if (keyboardConfig && mouseConfig && mouseOpts.area && $xeTable.handleKeyboardEvent) {
-            $xeTable.handleKeyboardEvent(evnt);
+          if (keyboardConfig && mouseConfig && mouseOpts.area && $xeTable.handleKeyboardCellAreaEvent) {
+            $xeTable.handleKeyboardCellAreaEvent(evnt);
           } else if (actived.row || filterStore.visible || ctxMenuStore.visible) {
             evnt.stopPropagation();
             // 如果按下了 Esc 键，关闭快捷菜单、筛选
@@ -6008,7 +6010,7 @@ var _default = exports.default = (0, _vue.defineComponent)({
               // 如果是激活编辑状态，则取消编辑
               if (actived.row) {
                 const params = actived.args;
-                $xeTable.clearEdit(evnt);
+                $xeTable.handleClearEdit(evnt);
                 // 如果配置了选中功能，则为选中状态
                 if (mouseOpts.selected) {
                   (0, _vue.nextTick)(() => $xeTable.handleSelected(params, evnt));
@@ -6082,8 +6084,8 @@ var _default = exports.default = (0, _vue.defineComponent)({
             } else {
               $xeTable.moveCtxMenu(evnt, ctxMenuStore, 'selected', isRightArrow, true, menuList);
             }
-          } else if (keyboardConfig && mouseConfig && mouseOpts.area && $xeTable.handleKeyboardEvent) {
-            $xeTable.handleKeyboardEvent(evnt);
+          } else if (keyboardConfig && mouseConfig && mouseOpts.area && $xeTable.handleKeyboardCellAreaEvent) {
+            $xeTable.handleKeyboardCellAreaEvent(evnt);
           } else if (isEsc) {
             // 如果按下了 Esc 键，关闭快捷菜单、筛选
             if ($xeTable.closeMenu) {
@@ -6094,7 +6096,7 @@ var _default = exports.default = (0, _vue.defineComponent)({
               // 如果是激活编辑状态，则取消编辑
               if (actived.row) {
                 const params = actived.args;
-                $xeTable.clearEdit(evnt);
+                $xeTable.handleClearEdit(evnt);
                 // 如果配置了选中功能，则为选中状态
                 if (mouseOpts.selected) {
                   (0, _vue.nextTick)(() => $xeTable.handleSelected(params, evnt));
@@ -6130,7 +6132,7 @@ var _default = exports.default = (0, _vue.defineComponent)({
               // 如果是激活编辑状态，则取消编辑
               if (actived.row) {
                 const params = actived.args;
-                $xeTable.clearEdit(evnt);
+                $xeTable.handleClearEdit(evnt);
                 // 如果配置了选中功能，则为选中状态
                 if (mouseOpts.selected) {
                   (0, _vue.nextTick)(() => $xeTable.handleSelected(params, evnt));
@@ -6379,8 +6381,8 @@ var _default = exports.default = (0, _vue.defineComponent)({
       if (!el || !el.clientWidth) {
         return (0, _vue.nextTick)();
       }
-      tableMethods.updateCellAreas();
       tableMethods.recalculate(true);
+      tableMethods.updateCellAreas();
     };
     const handleTargetEnterEvent = isClear => {
       const $tooltip = refTooltip.value;
@@ -6413,65 +6415,120 @@ var _default = exports.default = (0, _vue.defineComponent)({
         });
       }
     };
-    const clearRowDropTarget = () => {
+    const updateRowDropTipContent = tdEl => {
+      const {
+        dragConfig
+      } = props;
+      const {
+        dragRow
+      } = reactData;
+      const rowDragOpts = computeRowDragOpts.value;
+      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 = column => {
       const el = refElem.value;
       if (el) {
-        const clss = 'row--drag-active-target';
-        _xeUtils.default.arrayEach(el.querySelectorAll(`.${clss}`), elem => {
-          (0, _dom.removeClass)(elem, clss);
+        const clss = 'col--drag-origin';
+        _xeUtils.default.arrayEach(el.querySelectorAll(`[colid="${column.id}"]`), elem => {
+          (0, _dom.addClass)(elem, clss);
         });
       }
     };
-    const updateRowDropTarget = (row, dragPos) => {
+    const clearColDropOrigin = () => {
       const el = refElem.value;
       if (el) {
-        const clss = 'row--drag-active-target';
-        const rowid = (0, _util.getRowid)($xeTable, row);
-        _xeUtils.default.arrayEach(el.querySelectorAll(`[rowid="${rowid}"]`), elem => {
-          (0, _dom.addClass)(elem, clss);
-          elem.setAttribute('drag-pos', dragPos);
+        const clss = 'col--drag-origin';
+        _xeUtils.default.arrayEach(el.querySelectorAll(`.${clss}`), elem => {
+          elem.draggable = false;
+          (0, _dom.removeClass)(elem, clss);
         });
       }
     };
-    const showRowDropTip = evnt => {
-      const rdTipEl = refRowDragTipElem.value;
-      if (!rdTipEl) {
-        return;
+    const updateColDropTipContent = tdEl => {
+      const {
+        dragCol
+      } = reactData;
+      const columnDragOpts = computeColumnDragOpts.value;
+      const {
+        tooltipMethod
+      } = columnDragOpts;
+      let tipContent = '';
+      if (tooltipMethod) {
+        tipContent = `${tooltipMethod({
+          column: dragCol
+        }) || ''}`;
+      } else {
+        tipContent = getI18n('vxe.table.dragTip', [tdEl.textContent || '']);
       }
+      reactData.dragTipText = tipContent;
+    };
+    const showDropTip = (evnt, trEl, thEl, dragPos) => {
       const el = refElem.value;
       if (!el) {
         return;
       }
+      const {
+        scrollbarWidth,
+        scrollbarHeight
+      } = reactData;
+      const wrapperRect = el.getBoundingClientRect();
+      if (trEl) {
+        const rdLineEl = refDragRowLineElem.value;
+        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 = refDragColLineElem.value;
+        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 = refDragTipElem.value;
       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 = () => {
-      const rdTipEl = refRowDragTipElem.value;
+    const hideDropTip = () => {
+      const rdTipEl = refDragTipElem.value;
+      const rdLineEl = refDragRowLineElem.value;
+      const cdLineEl = refDragColLineElem.value;
       if (rdTipEl) {
         rdTipEl.style.display = '';
       }
-    };
-    const updateRowDropTipContent = tdEl => {
-      const {
-        dragRow
-      } = reactData;
-      const dragOpts = computeDragOpts.value;
-      const {
-        rowTooltipMethod
-      } = dragOpts;
-      let tipContent = '';
-      if (rowTooltipMethod) {
-        tipContent = `${rowTooltipMethod({
-          row: dragRow
-        }) || ''}`;
-      } else {
-        tipContent = getI18n('vxe.table.dragTip', [tdEl.textContent || '']);
+      if (rdLineEl) {
+        rdLineEl.style.display = '';
+      }
+      if (cdLineEl) {
+        cdLineEl.style.display = '';
       }
-      reactData.dragTipText = tipContent;
     };
     /**
      * 处理显示 tooltip
@@ -7793,6 +7850,9 @@ var _default = exports.default = (0, _vue.defineComponent)({
           dispatchEvent('sort-change', params, evnt);
         }
       },
+      /**
+       * 行拖拽
+       */
       handleRowDragDragstartEvent(evnt) {
         const img = new Image();
         if (evnt.dataTransfer) {
@@ -7801,12 +7861,13 @@ var _default = exports.default = (0, _vue.defineComponent)({
       },
       handleRowDragDragendEvent(evnt) {
         const {
-          treeConfig
+          treeConfig,
+          dragConfig
         } = props;
-        const dragOpts = computeDragOpts.value;
+        const rowDragOpts = computeRowDragOpts.value;
         const {
           dragEndMethod
-        } = dragOpts;
+        } = rowDragOpts;
         const treeOpts = computeTreeOpts.value;
         const {
           transform
@@ -7822,17 +7883,20 @@ var _default = exports.default = (0, _vue.defineComponent)({
           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) {
@@ -7841,7 +7905,7 @@ var _default = exports.default = (0, _vue.defineComponent)({
                 const otfIndex = $xeTable.findRowIndexOf(tableFullTreeData, dragRow);
                 afterTreeFullData.splice(oafIndex, 1);
                 tableFullTreeData.splice(otfIndex, 1);
-                // 插新位置
+                // 插入新位置
                 const pafIndex = $xeTable.findRowIndexOf(afterTreeFullData, prevDragRow);
                 const ptfIndex = $xeTable.findRowIndexOf(tableFullTreeData, prevDragRow);
                 nafIndex = pafIndex + dragOffsetIndex;
@@ -7854,7 +7918,7 @@ var _default = exports.default = (0, _vue.defineComponent)({
                 const otfIndex = $xeTable.findRowIndexOf(tableFullData, dragRow);
                 afterFullData.splice(oafIndex, 1);
                 tableFullData.splice(otfIndex, 1);
-                // 插新位置
+                // 插入新位置
                 const pafIndex = $xeTable.findRowIndexOf(afterFullData, prevDragRow);
                 const ptfIndex = $xeTable.findRowIndexOf(tableFullData, prevDragRow);
                 nafIndex = pafIndex + dragOffsetIndex;
@@ -7864,23 +7928,24 @@ var _default = exports.default = (0, _vue.defineComponent)({
               }
               reactData.isDragRowMove = true;
               $xeTable.cacheRowMap();
-              $xeTable.updateScrollYStatus();
+              updateScrollYStatus();
               $xeTable.handleTableData(treeConfig && transform);
               if (!(treeConfig && transform)) {
                 $xeTable.updateAfterDataIndex();
               }
-              $xeTable.updateFooter();
               $xeTable.checkSelectionStatus();
               if (reactData.scrollYLoad) {
                 $xeTable.updateScrollYSpace();
               }
               (0, _vue.nextTick)().then(() => {
                 $xeTable.updateCellAreas();
-                return $xeTable.recalculate();
+                $xeTable.recalculate();
               });
               dispatchEvent('row-dragend', {
                 oldRow: dragRow,
                 newRow: prevDragRow,
+                dragPos: prevDragPos,
+                offsetIndex: dragOffsetIndex,
                 _index: {
                   newIndex: nafIndex,
                   oldIndex: oafIndex
@@ -7889,19 +7954,25 @@ var _default = exports.default = (0, _vue.defineComponent)({
             }).catch(() => {});
           }
         }
-        hideRowDropTip();
+        hideDropTip();
         clearRowDropOrigin();
-        clearRowDropTarget();
         reactData.dragRow = null;
+        reactData.dragCol = null;
         setTimeout(() => {
           reactData.isDragRowMove = false;
         }, 500);
       },
       handleRowDragDragoverEvent(evnt) {
+        const {
+          dragRow
+        } = reactData;
+        if (!dragRow) {
+          evnt.preventDefault();
+          return;
+        }
         const trEl = evnt.currentTarget;
         const rowid = trEl.getAttribute('rowid');
         const row = $xeTable.getRowById(rowid);
-        clearRowDropTarget();
         if (row) {
           evnt.preventDefault();
           evnt.preventDefault();
@@ -7910,51 +7981,210 @@ var _default = exports.default = (0, _vue.defineComponent)({
           } = reactData;
           const offsetY = evnt.clientY - trEl.getBoundingClientRect().y;
           const dragPos = offsetY < trEl.clientHeight / 2 ? 'top' : 'bottom';
-          updateRowDropTarget(row, dragPos);
           internalData.prevDragRow = row;
           internalData.prevDragPos = dragPos;
+          showDropTip(evnt, trEl, null, dragPos);
           dispatchEvent('row-dragover', {
             oldRow: dragRow,
             targetRow: row,
             dragPos
           }, evnt);
         }
-        showRowDropTip(evnt);
       },
       handleCellDragMousedownEvent(evnt, params) {
         var _a;
         evnt.stopPropagation();
-        const dragOpts = computeDragOpts.value;
+        const {
+          dragConfig
+        } = props;
+        const rowDragOpts = computeRowDragOpts.value;
         const {
           dragStartMethod
-        } = dragOpts;
+        } = 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();
-        if (dragStartMethod && !dragStartMethod(params)) {
+        if (dStartMethod && !dStartMethod(params)) {
           trEl.draggable = false;
           reactData.dragRow = null;
-          hideRowDropTip();
+          reactData.dragCol = null;
+          hideDropTip();
           return;
         }
         reactData.dragRow = row;
+        reactData.dragCol = null;
         trEl.draggable = true;
         updateRowDropOrigin(row);
-        showRowDropTip(evnt);
         updateRowDropTipContent(tdEl);
         dispatchEvent('row-dragstart', params, evnt);
       },
       handleCellDragMouseupEvent() {
         clearRowDropOrigin();
-        hideRowDropTip();
+        hideDropTip();
         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 {
+          mouseConfig
+        } = props;
+        const columnDragOpts = computeColumnDragOpts.value;
+        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.default.eachTree(collectColumn, (column, index, items, path, parent) => {
+                if (!parent) {
+                  const sortIndex = index + 1;
+                  column.renderSortNumber = sortIndex;
+                }
+              });
+              const oafIndex = _xeUtils.default.findIndexOf(collectColumn, item => item.id === dragCol.id);
+              const nafIndex = _xeUtils.default.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();
+                }
+              }
+              tablePrivateMethods.analyColumnWidth();
+              (0, _vue.nextTick)().then(() => {
+                $xeTable.updateCellAreas();
+                tableMethods.refreshColumn(true);
+              });
+              dispatchEvent('column-dragend', {
+                oldColumn: dragCol,
+                newColumn: prevDragCol,
+                dragPos: prevDragPos,
+                offsetIndex: dragOffsetIndex,
+                _index: {
+                  newIndex: nafIndex,
+                  oldIndex: oafIndex
+                }
+              }, evnt);
+            }).catch(() => {});
+          }
+        }
+        hideDropTip();
+        clearColDropOrigin();
+        reactData.dragRow = null;
+        reactData.dragCol = null;
+        setTimeout(() => {
+          reactData.isDragColMove = false;
+        }, 500);
+      },
+      handleHeaderCellDragDragoverEvent(evnt) {
+        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(evnt, null, thEl, dragPos);
+          dispatchEvent('column-dragover', {
+            oldColumn: dragCol,
+            targetColumn: column,
+            dragPos
+          }, evnt);
+        }
+      },
+      handleHeaderCellDragMousedownEvent(evnt, params) {
+        var _a;
+        evnt.stopPropagation();
+        const columnDragOpts = computeColumnDragOpts.value;
+        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();
+        if (dragStartMethod && !dragStartMethod(params)) {
+          thEl.draggable = false;
+          reactData.dragRow = null;
+          reactData.dragCol = null;
+          hideDropTip();
+          return;
+        }
+        reactData.dragCol = column;
+        reactData.dragRow = null;
+        thEl.draggable = true;
+        updateColDropOrigin(column);
+        updateColDropTipContent(thEl);
+        dispatchEvent('column-dragstart', params, evnt);
+      },
+      handleHeaderCellDragMouseupEvent() {
+        clearColDropOrigin();
+        hideDropTip();
+        reactData.dragRow = null;
+        reactData.dragCol = null;
+        reactData.isDragColMove = false;
+      },
       /**
        * 横向 X 可视渲染事件处理
        */
@@ -8146,8 +8376,7 @@ var _default = exports.default = (0, _vue.defineComponent)({
           containerList.forEach(name => {
             const layoutList = ['header', 'body', 'footer'];
             layoutList.forEach(layout => {
-              const xSpaceRef = elemStore[`${name}-${layout}-xSpace`];
-              const xSpaceElem = xSpaceRef ? xSpaceRef.value : null;
+              const xSpaceElem = (0, _util.getRefElem)(elemStore[`${name}-${layout}-xSpace`]);
               if (xSpaceElem) {
                 xSpaceElem.style.width = scrollXLoad ? `${tableWidth + (layout === 'header' ? scrollbarWidth : 0)}px` : '';
               }
@@ -8210,14 +8439,12 @@ var _default = exports.default = (0, _vue.defineComponent)({
         }
         containerList.forEach(name => {
           const layoutList = ['header', 'body', 'footer'];
-          const tableRef = elemStore[`${name}-body-table`];
-          const tableElem = tableRef ? tableRef.value : null;
+          const tableElem = (0, _util.getRefElem)(elemStore[`${name}-body-table`]);
           if (tableElem) {
             tableElem.style.marginTop = marginTop;
           }
           layoutList.forEach(layout => {
-            const ySpaceRef = elemStore[`${name}-${layout}-ySpace`];
-            const ySpaceElem = ySpaceRef ? ySpaceRef.value : null;
+            const ySpaceElem = (0, _util.getRefElem)(elemStore[`${name}-${layout}-ySpace`]);
             if (ySpaceElem) {
               ySpaceElem.style.height = ySpaceHeight;
             }
@@ -8397,6 +8624,52 @@ var _default = exports.default = (0, _vue.defineComponent)({
       }
       return (0, _utils.getFuncText)(props.emptyText) || getI18n('vxe.table.emptyText');
     };
+    const renderDragTipContents = () => {
+      const {
+        dragConfig
+      } = props;
+      const {
+        dragRow,
+        dragCol,
+        dragTipText
+      } = reactData;
+      const columnDragOpts = computeColumnDragOpts.value;
+      const rowDragOpts = computeRowDragOpts.value;
+      const rowDragSlots = rowDragOpts.slots || {};
+      const rTipSlot = rowDragSlots.tip || (dragConfig && dragConfig.slots ? dragConfig.slots.rowTip : null);
+      const columnDragSlots = columnDragOpts.slots || {};
+      const cTipSlot = columnDragSlots.tip;
+      if (dragRow && rTipSlot) {
+        return callSlot(rTipSlot, {
+          row: dragRow
+        });
+      }
+      if (dragCol && cTipSlot) {
+        return callSlot(cTipSlot, {
+          column: dragCol
+        });
+      }
+      return [(0, _vue.h)('span', dragTipText)];
+    };
+    const renderDragTip = () => {
+      const rowOpts = computeRowOpts.value;
+      const columnOpts = computeColumnOpts.value;
+      if (rowOpts.drag || columnOpts.drag) {
+        return (0, _vue.h)('div', {
+          class: 'vxe-table--drag-wrapper'
+        }, [(0, _vue.h)('div', {
+          ref: refDragRowLineElem,
+          class: 'vxe-table--drag-row-line'
+        }), (0, _vue.h)('div', {
+          ref: refDragColLineElem,
+          class: 'vxe-table--drag-col-line'
+        }), (0, _vue.h)('div', {
+          ref: refDragTipElem,
+          class: 'vxe-table--drag-sort-tip'
+        }, renderDragTipContents())]);
+      }
+      return renderEmptyElement($xeTable);
+    };
     function handleUupdateResize() {
       const el = refElem.value;
       if (el && el.clientWidth && el.clientHeight) {
@@ -8434,9 +8707,7 @@ var _default = exports.default = (0, _vue.defineComponent)({
         columnStore,
         filterStore,
         customStore,
-        tooltipStore,
-        dragRow,
-        dragTipText
+        tooltipStore
       } = reactData;
       const {
         leftList,
@@ -8448,18 +8719,17 @@ var _default = exports.default = (0, _vue.defineComponent)({
       const checkboxOpts = computeCheckboxOpts.value;
       const treeOpts = computeTreeOpts.value;
       const rowOpts = computeRowOpts.value;
-      const dragOpts = computeDragOpts.value;
       const columnOpts = computeColumnOpts.value;
       const vSize = computeSize.value;
       const tableBorder = computeTableBorder.value;
       const mouseOpts = computeMouseOpts.value;
+      const areaOpts = computeAreaOpts.value;
       const validTipOpts = computeValidTipOpts.value;
       const loadingOpts = computeLoadingOpts.value;
       const isMenu = computeIsMenu.value;
       const currLoading = reactData._isLoading || loading;
       const virtualScrollBars = computeVirtualScrollBars.value;
-      const dragSlots = dragOpts.slots || {};
-      const rowTipSlot = dragSlots.rowTip;
+      const isArea = mouseConfig && mouseOpts.area;
       return (0, _vue.h)('div', {
         ref: refElem,
         class: ['vxe-table', 'vxe-table--render-default', `tid_${xID}`, `border--${tableBorder}`, {
@@ -8469,7 +8739,9 @@ var _default = exports.default = (0, _vue.defineComponent)({
           'old-cell-valid': editRules && getConfig().cellVaildMode === 'obsolete',
           'cell--highlight': highlightCell,
           'cell--selected': mouseConfig && mouseOpts.selected,
-          'cell--area': mouseConfig && mouseOpts.area,
+          'cell--area': isArea,
+          'header-cell--area': isArea && areaOpts.selectCellByHeader,
+          'body-cell--area': isArea && areaOpts.selectCellByBody,
           'row--highlight': rowOpts.isHover || highlightHoverRow,
           'column--highlight': columnOpts.isHover || highlightHoverColumn,
           'checkbox--range': checkboxOpts.range,
@@ -8637,14 +8909,9 @@ var _default = exports.default = (0, _vue.defineComponent)({
         ref: refTableMenu
       }) : renderEmptyElement($xeTable),
       /**
-       * 拖拽提示
+       * 拖拽排序提示
        */
-      rowOpts.drag && (dragRow || dragTipText) ? (0, _vue.h)('div', {
-        ref: refRowDragTipElem,
-        class: 'vxe-table--row-drag-tip'
-      }, rowTipSlot ? dragRow ? callSlot(rowTipSlot, {
-        row: dragRow
-      }) : [renderEmptyElement($xeTable)] : dragTipText ? [(0, _vue.h)('span', dragTipText)] : [renderEmptyElement($xeTable)]) : renderEmptyElement($xeTable),
+      renderDragTip(),
       /**
        * 提示相关
        */
@@ -8924,7 +9191,7 @@ var _default = exports.default = (0, _vue.defineComponent)({
           if (rowOpts.height && !props.showOverflow) {
             (0, _log.warnLog)('vxe.error.notProp', ['table.show-overflow']);
           }
-          if (!$xeTable.handleUpdateCellAreas) {
+          if (!$xeTable.handleRecalculateCellAreas) {
             if (props.clipConfig) {
               (0, _log.warnLog)('vxe.error.notProp', ['clip-config']);
             }
@@ -8936,6 +9203,9 @@ var _default = exports.default = (0, _vue.defineComponent)({
               return;
             }
           }
+          if (props.dragConfig) {
+            (0, _log.warnLog)('vxe.error.delProp', ['drag-config', 'row-drag-config']);
+          }
           if (props.treeConfig && treeOpts.children) {
             (0, _log.warnLog)('vxe.error.delProp', ['tree-config.children', 'tree-config.childrenField']);
           }