vxe-table 4.8.0 → 4.8.1

package/lib/index.umd.js

@@ -1998,7 +1998,7 @@ function eqEmptyValue(cellValue) {
 ;// CONCATENATED MODULE: ./packages/ui/index.ts
 
 
-const version = "4.8.0";
+const version = "4.8.1";
 core_.VxeUI.version = version;
 core_.VxeUI.tableVersion = version;
 core_.VxeUI.setConfig({
@@ -2035,6 +2035,9 @@ core_.VxeUI.setConfig({
       // trigger: 'default'
       strict: true
     },
+    dragConfig: {
+      showIcon: true
+    },
     checkboxConfig: {
       // trigger: 'default',
       strict: true
@@ -2384,7 +2387,7 @@ var es_array_push = __webpack_require__(4114);
 const {
   log: log_log
 } = core_.VxeUI;
-const log_version = `table v${"4.8.0"}`;
+const log_version = `table v${"4.8.1"}`;
 const warnLog = log_log.create('warn', log_version);
 const errLog = log_log.create('error', log_version);
 ;// CONCATENATED MODULE: ./packages/table/src/columnInfo.ts
@@ -2483,6 +2486,7 @@ class ColumnInfo {
       filterRecoverMethod: _vm.filterRecoverMethod,
       filterRender: _vm.filterRender,
       treeNode: _vm.treeNode,
+      dragSort: _vm.dragSort,
       cellType: _vm.cellType,
       cellRender: _vm.cellRender,
       editRender: _vm.editRender,
@@ -3316,7 +3320,8 @@ const {
   getI18n: cell_getI18n,
   getIcon: cell_getIcon,
   renderer: cell_renderer,
-  formats: cell_formats
+  formats: cell_formats,
+  renderEmptyElement
 } = core_.VxeUI;
 function renderTitlePrefixIcon(params) {
   const {
@@ -3350,6 +3355,41 @@ function renderTitleSuffixIcon(params) {
     }
   })] : [];
 }
+function renderCellDragIcon(params) {
+  const {
+    $table
+  } = params;
+  return (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('span', {
+    key: 'dg',
+    class: 'vxe-cell--drag-handle',
+    onMousedown(evnt) {
+      $table.handleCellDragMousedownEvent(evnt, params);
+    },
+    onMouseup: $table.handleCellDragMouseupEvent
+  }, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('i', {
+    class: 'vxe-table-icon-drag-handle'
+  })]);
+}
+function renderCellBaseVNs(params, content) {
+  const {
+    $table,
+    column
+  } = params;
+  const {
+    dragSort
+  } = column;
+  const vns = external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().isArray(content) ? content : [content];
+  const {
+    computeRowOpts,
+    computeDragOpts
+  } = $table.getComputeMaps();
+  const rowOpts = computeRowOpts.value;
+  const dragOpts = computeDragOpts.value;
+  if (dragSort && rowOpts.drag && dragOpts.showIcon) {
+    vns.unshift(renderCellDragIcon(params));
+  }
+  return vns;
+}
 function renderTitleContent(params, content) {
   const {
     $table,
@@ -3588,7 +3628,7 @@ const Cell = {
     const renderOpts = editRender || cellRender;
     const defaultSlot = slots ? slots.default : null;
     if (defaultSlot) {
-      return $table.callSlot(defaultSlot, params);
+      return renderCellBaseVNs(params, $table.callSlot(defaultSlot, params));
     }
     if (renderOpts) {
       const compConf = cell_renderer.get(renderOpts.name);
@@ -3597,21 +3637,21 @@ const Cell = {
         const rtDefault = compConf.renderTableDefault || compConf.renderDefault;
         const renderFn = editRender ? rtCell : rtDefault;
         if (renderFn) {
-          return getSlotVNs(renderFn(renderOpts, Object.assign({
+          return renderCellBaseVNs(params, getSlotVNs(renderFn(renderOpts, Object.assign({
             $type: editRender ? 'edit' : 'cell'
-          }, params)));
+          }, params))));
         }
       }
     }
     const cellValue = $table.getCellLabel(row, column);
     const cellPlaceholder = editRender ? editRender.placeholder : '';
-    return [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('span', {
+    return renderCellBaseVNs(params, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('span', {
       class: 'vxe-cell--label'
     }, [
     // 如果设置占位符
     editRender && eqEmptyValue(cellValue) ? (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('span', {
       class: 'vxe-cell--placeholder'
-    }, formatText(getFuncText(cellPlaceholder), 1)) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('span', formatText(cellValue, 1))])];
+    }, formatText(getFuncText(cellPlaceholder), 1)) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('span', formatText(cellValue, 1))])]);
   },
   renderTreeCell(params) {
     return Cell.renderTreeIcon(params, Cell.renderDefaultCell(params));
@@ -3739,13 +3779,13 @@ const Cell = {
     } = column;
     const defaultSlot = slots ? slots.default : null;
     if (defaultSlot) {
-      return $table.callSlot(defaultSlot, params);
+      return renderCellBaseVNs(params, $table.callSlot(defaultSlot, params));
     }
     const {
       seq
     } = params;
     const seqMethod = seqOpts.seqMethod;
-    return [formatText(seqMethod ? seqMethod(params) : treeConfig ? seq : (seqOpts.startIndex || 0) + seq, 1)];
+    return renderCellBaseVNs(params, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('span', `${formatText(seqMethod ? seqMethod(params) : treeConfig ? seq : (seqOpts.startIndex || 0) + seq, 1)}`)]);
   },
   renderTreeIndexCell(params) {
     return Cell.renderTreeIcon(params, Cell.renderSeqCell(params));
@@ -3823,7 +3863,7 @@ const Cell = {
       visible: isVisible
     };
     if (radioSlot) {
-      return $table.callSlot(radioSlot, radioParams);
+      return renderCellBaseVNs(params, $table.callSlot(radioSlot, radioParams));
     }
     const radioVNs = [];
     if (isVisible) {
@@ -3836,13 +3876,13 @@ const Cell = {
         class: 'vxe-radio--label'
       }, defaultSlot ? $table.callSlot(defaultSlot, radioParams) : external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().get(row, labelField)));
     }
-    return [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('span', {
+    return renderCellBaseVNs(params, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('span', {
       class: ['vxe-cell--radio', {
         'is--checked': isChecked,
         'is--disabled': isDisabled
       }],
       ...ons
-    }, radioVNs)];
+    }, radioVNs)]);
   },
   renderTreeRadioCell(params) {
     return Cell.renderTreeIcon(params, Cell.renderRadioCell(params));
@@ -3979,7 +4019,7 @@ const Cell = {
       indeterminate
     };
     if (checkboxSlot) {
-      return $table.callSlot(checkboxSlot, checkboxParams);
+      return renderCellBaseVNs(params, $table.callSlot(checkboxSlot, checkboxParams));
     }
     const checkVNs = [];
     if (isVisible) {
@@ -3992,7 +4032,7 @@ const Cell = {
         class: 'vxe-checkbox--label'
       }, defaultSlot ? $table.callSlot(defaultSlot, checkboxParams) : external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().get(row, labelField)));
     }
-    return [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('span', {
+    return renderCellBaseVNs(params, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('span', {
       class: ['vxe-cell--checkbox', {
         'is--checked': isChecked,
         'is--disabled': isDisabled,
@@ -4000,7 +4040,7 @@ const Cell = {
         'is--hidden': !isVisible
       }],
       ...ons
-    }, checkVNs)];
+    }, checkVNs)]);
   },
   renderTreeSelectionCell(params) {
     return Cell.renderTreeIcon(params, Cell.renderCheckboxCell(params));
@@ -4072,7 +4112,7 @@ const Cell = {
       indeterminate: isIndeterminate
     };
     if (checkboxSlot) {
-      return $table.callSlot(checkboxSlot, checkboxParams);
+      return renderCellBaseVNs(params, $table.callSlot(checkboxSlot, checkboxParams));
     }
     const checkVNs = [];
     if (isVisible) {
@@ -4085,7 +4125,7 @@ const Cell = {
         }, defaultSlot ? $table.callSlot(defaultSlot, checkboxParams) : external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().get(row, labelField)));
       }
     }
-    return [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('span', {
+    return renderCellBaseVNs(params, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('span', {
       class: ['vxe-cell--checkbox', {
         'is--checked': isChecked,
         'is--disabled': isDisabled,
@@ -4093,7 +4133,7 @@ const Cell = {
         'is--hidden': !isVisible
       }],
       ...ons
-    }, checkVNs)];
+    }, checkVNs)]);
   },
   renderTreeSelectionCellByProp(params) {
     return Cell.renderTreeIcon(params, Cell.renderCheckboxCellByProp(params));
@@ -4136,7 +4176,7 @@ const Cell = {
     let isAceived = false;
     let isLazyLoading = false;
     if (iconSlot) {
-      return $table.callSlot(iconSlot, params);
+      return renderCellBaseVNs(params, $table.callSlot(iconSlot, params));
     }
     if (!isHidden) {
       const rowid = getRowid($table, row);
@@ -4145,7 +4185,7 @@ const Cell = {
         isLazyLoading = !!rowExpandLazyLoadedMaps[rowid];
       }
     }
-    return [showIcon && (!visibleMethod || visibleMethod(params)) ? (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('span', {
+    return renderCellBaseVNs(params, [showIcon && (!visibleMethod || visibleMethod(params)) ? (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('span', {
       class: ['vxe-table--expanded', {
         'is--active': isAceived
       }],
@@ -4154,9 +4194,9 @@ const Cell = {
       }
     }, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('i', {
       class: ['vxe-table--expand-btn', isLazyLoading ? iconLoaded || cell_getIcon().TABLE_EXPAND_LOADED : isAceived ? iconOpen || cell_getIcon().TABLE_EXPAND_OPEN : iconClose || cell_getIcon().TABLE_EXPAND_CLOSE]
-    })]) : null, defaultSlot || labelField ? (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('span', {
+    })]) : renderEmptyElement($table), defaultSlot || labelField ? (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('span', {
       class: 'vxe-table--expand-label'
-    }, defaultSlot ? $table.callSlot(defaultSlot, params) : external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().get(row, labelField)) : null];
+    }, defaultSlot ? $table.callSlot(defaultSlot, params) : external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().get(row, labelField)) : renderEmptyElement($table)]);
   },
   renderExpandData(params) {
     const {
@@ -4195,12 +4235,12 @@ const Cell = {
     } = column;
     const defaultSlot = slots ? slots.default : null;
     if (defaultSlot) {
-      return $table.callSlot(defaultSlot, params);
+      return renderCellBaseVNs(params, $table.callSlot(defaultSlot, params));
     }
-    return [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('span', {
+    return renderCellBaseVNs(params, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('span', {
       class: 'vxe-cell--html',
       innerHTML: getDefaultCellLabel(params)
-    })];
+    })]);
   },
   renderTreeHTMLCell(params) {
     return Cell.renderTreeIcon(params, Cell.renderHTMLCell(params));
@@ -4505,8 +4545,10 @@ const columnProps = {
   filterRecoverMethod: Function,
   // 筛选模板配置项
   filterRender: Object,
-  // 指定为树节点
+  // 设置为树节点
   treeNode: Boolean,
+  // 指定为树节点
+  dragSort: Boolean,
   // 是否可视
   visible: {
     type: Boolean,
@@ -5079,7 +5121,7 @@ const lineOffsetSizes = {
           'col--valid-error': !!errorValidItem,
           'col--current': currentColumn === column
         }, getPropClass(compCellClassName, params), getPropClass(className, params), getPropClass(allCellClassName, params)],
-        key: columnKey || columnOpts.useKey ? colid : $columnIndex,
+        key: columnKey || columnOpts.useKey || rowOpts.useKey ? colid : $columnIndex,
         ...attrs,
         style: Object.assign({
           height: cellHeight
@@ -5126,7 +5168,7 @@ const lineOffsetSizes = {
         let rowIndex = $rowIndex;
         // 确保任何情况下 rowIndex 都精准指向真实 data 索引
         rowIndex = $xeTable.getRowIndex(row);
-        // 事件绑定
+        // 当前行事件
         if (rowOpts.isHover || highlightHoverRow) {
           trOn.onMouseenter = evnt => {
             if (isVMScrollProcess()) {
@@ -5144,6 +5186,12 @@ const lineOffsetSizes = {
             $xeTable.clearHoverRow();
           };
         }
+        // 拖拽行事件
+        if (rowOpts.drag) {
+          trOn.onDragstart = $xeTable.handleRowDragDragstartEvent;
+          trOn.onDragend = $xeTable.handleRowDragDragendEvent;
+          trOn.onDragover = $xeTable.handleRowDragDragoverEvent;
+        }
         const rowid = getRowid($xeTable, row);
         const rest = fullAllDataRowIdData[rowid];
         let rowLevel = 0;
@@ -5193,7 +5241,7 @@ const lineOffsetSizes = {
           }, getPropClass(rowClassName, params)],
           rowid: rowid,
           style: rowStyle ? external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().isFunction(rowStyle) ? rowStyle(params) : rowStyle : null,
-          key: rowKey || rowOpts.useKey || treeConfig ? rowid : $rowIndex,
+          key: rowKey || rowOpts.useKey || rowOpts.drag || treeConfig ? rowid : $rowIndex,
           ...trOn
         }, tableColumn.map((column, $columnIndex) => {
           return renderColumn(seq, rowid, fixedType, rowLevel, row, rowIndex, $rowIndex, _rowIndex, column, $columnIndex, tableColumn, tableData);
@@ -5498,7 +5546,8 @@ const lineOffsetSizes = {
         tableData,
         mergeList,
         scrollYLoad,
-        isAllOverflow
+        isAllOverflow,
+        isDragRowMove
       } = tableReactData;
       const {
         visibleColumn
@@ -5506,6 +5555,7 @@ const lineOffsetSizes = {
       const {
         slots
       } = tableContext;
+      const rowOpts = computeRowOpts.value;
       const sYOpts = computeSYOpts.value;
       const emptyOpts = computeEmptyOpts.value;
       const keyboardOpts = computeKeyboardOpts.value;
@@ -5587,7 +5637,12 @@ const lineOffsetSizes = {
       /**
        * 内容
        */
-      (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('tbody', {
+      rowOpts.drag ? (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)(external_commonjs_vue_commonjs2_vue_root_Vue_.TransitionGroup, {
+        name: `vxe-body--row-list${isDragRowMove ? '' : '-disabled'}`,
+        tag: 'tbody'
+      }, {
+        default: () => renderRows(fixedType, tableData, tableColumn)
+      }) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('tbody', {
         ref: refBodyTBody
       }, renderRows(fixedType, tableData, tableColumn))]), (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
         class: 'vxe-table--checkbox-range'
@@ -6553,6 +6608,8 @@ const {
   cellConfig: Object,
   // 行配置信息
   rowConfig: Object,
+  // 可拖拽配置项
+  dragConfig: Object,
   // 列调整配置项
   resizableConfig: Object,
   // 序号配置项
@@ -6619,7 +6676,7 @@ const {
   params: Object
 });
 ;// CONCATENATED MODULE: ./packages/table/src/emits.ts
-/* harmony default export */ var emits = (['update:data', 'keydown-start', 'keydown', 'keydown-end', 'paste', 'copy', 'cut', 'current-change', 'radio-change', 'checkbox-change', 'checkbox-all', 'checkbox-range-start', 'checkbox-range-change', 'checkbox-range-end', 'checkbox-range-select', 'cell-click', 'cell-dblclick', 'cell-menu', 'cell-mouseenter', 'cell-mouseleave', 'cell-selected', 'cell-delete-value', 'cell-backspace-value', 'header-cell-click', 'header-cell-dblclick', 'header-cell-menu', 'footer-cell-click', 'footer-cell-dblclick', 'footer-cell-menu', 'clear-merge', 'sort-change', 'clear-sort', 'filter-change', 'filter-visible', 'clear-filter', 'resizable-change', 'toggle-row-expand', 'toggle-tree-expand', 'menu-click', 'edit-closed', 'edit-actived', 'edit-activated', 'edit-disabled', 'valid-error', 'scroll', 'custom', 'change-fnr', 'open-fnr', 'show-fnr', 'hide-fnr', 'fnr-change', 'fnr-find', 'fnr-find-all', 'fnr-replace', 'fnr-replace-all', 'cell-area-copy', 'cell-area-cut', 'cell-area-paste', 'cell-area-merge', 'clear-cell-area-selection', 'clear-cell-area-merge', 'header-cell-area-selection', 'cell-area-selection-invalid', 'cell-area-selection-start', 'cell-area-selection-drag', 'cell-area-selection-end', 'cell-area-extension-start', 'cell-area-extension-drag', 'cell-area-extension-end', 'cell-area-selection-all-start', 'cell-area-selection-all-end', 'cell-area-arrows-start', 'cell-area-arrows-end', 'active-cell-change-start', 'active-cell-change-end']);
+/* harmony default export */ var emits = (['update:data', 'keydown-start', 'keydown', 'keydown-end', 'paste', 'copy', 'cut', 'current-change', 'radio-change', 'checkbox-change', 'checkbox-all', 'checkbox-range-start', 'checkbox-range-change', 'checkbox-range-end', 'checkbox-range-select', 'cell-click', 'cell-dblclick', 'cell-menu', 'cell-mouseenter', 'cell-mouseleave', 'cell-selected', 'cell-delete-value', 'cell-backspace-value', 'header-cell-click', 'header-cell-dblclick', 'header-cell-menu', 'footer-cell-click', 'footer-cell-dblclick', 'footer-cell-menu', 'clear-merge', 'sort-change', 'clear-sort', 'filter-change', 'filter-visible', 'clear-filter', 'resizable-change', 'toggle-row-expand', 'toggle-tree-expand', 'menu-click', 'edit-closed', 'row-dragstart', 'row-dragover', 'row-dragend', 'edit-actived', 'edit-activated', 'edit-disabled', 'valid-error', 'scroll', 'custom', 'change-fnr', 'open-fnr', 'show-fnr', 'hide-fnr', 'fnr-change', 'fnr-find', 'fnr-find-all', 'fnr-replace', 'fnr-replace-all', 'cell-area-copy', 'cell-area-cut', 'cell-area-paste', 'cell-area-merge', 'clear-cell-area-selection', 'clear-cell-area-merge', 'header-cell-area-selection', 'cell-area-selection-invalid', 'cell-area-selection-start', 'cell-area-selection-drag', 'cell-area-selection-end', 'cell-area-extension-start', 'cell-area-extension-drag', 'cell-area-extension-end', 'cell-area-selection-all-start', 'cell-area-selection-all-end', 'cell-area-arrows-start', 'cell-area-arrows-end', 'active-cell-change-start', 'active-cell-change-end']);
 ;// CONCATENATED MODULE: ./packages/table/module/custom/panel.ts
 
 
@@ -8740,6 +8797,9 @@ const customStorageKey = 'VXE_CUSTOM_STORE';
         isFooter: false
       },
       scrollVMLoading: false,
+      isDragRowMove: false,
+      dragRow: null,
+      dragTipText: '',
       _isResize: false,
       _isLoading: false
     });
@@ -8814,6 +8874,7 @@ const customStorageKey = 'VXE_CUSTOM_STORE';
       columnStatusMaps: {},
       // 行选取状态
       rowStatusMaps: {},
+      // prevDragRow: null,
       inited: false,
       tooltipTimeout: null,
       initStatus: false,
@@ -8841,6 +8902,7 @@ const customStorageKey = 'VXE_CUSTOM_STORE';
     const refRightContainer = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.ref)();
     const refCellResizeBar = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.ref)();
     const refEmptyPlaceholder = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.ref)();
+    const refRowDragTipElem = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.ref)();
     const refScrollXVirtualElem = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.ref)();
     const refScrollYVirtualElem = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.ref)();
     const refScrollXHandleElem = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.ref)();
@@ -8890,6 +8952,9 @@ const customStorageKey = 'VXE_CUSTOM_STORE';
     const computeRowOpts = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.computed)(() => {
       return Object.assign({}, table_getConfig().table.rowConfig, props.rowConfig);
     });
+    const computeDragOpts = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.computed)(() => {
+      return Object.assign({}, table_getConfig().table.dragConfig, props.dragConfig);
+    });
     const computeResizeOpts = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.computed)(() => {
       return Object.assign({}, table_getConfig().table.resizeConfig, props.resizeConfig);
     });
@@ -9137,6 +9202,7 @@ const customStorageKey = 'VXE_CUSTOM_STORE';
       computeColumnOpts,
       computeCellOpts,
       computeRowOpts,
+      computeDragOpts,
       computeResizeOpts,
       computeResizableOpts,
       computeSeqOpts,
@@ -11707,7 +11773,7 @@ const customStorageKey = 'VXE_CUSTOM_STORE';
     const handleCheckAllEvent = (evnt, value) => {
       handleCheckedAllCheckboxRow(value);
       if (evnt) {
-        tableMethods.dispatchEvent('checkbox-all', {
+        dispatchEvent('checkbox-all', {
           records: tableMethods.getCheckboxRecords(),
           reserves: tableMethods.getCheckboxReserveRecords(),
           indeterminates: tableMethods.getCheckboxIndeterminateRecords(),
@@ -11786,14 +11852,22 @@ const customStorageKey = 'VXE_CUSTOM_STORE';
       leading: false,
       trailing: true
     });
-    const scrollXEvent = evnt => {
-      const wrapperEl = evnt.currentTarget;
+    const handleSyncScrollX = scrollLeft => {
       const tableHeader = refTableHeader.value;
       const tableBody = refTableBody.value;
       const tableFooter = refTableFooter.value;
       const bodyElem = tableBody.$el;
       const headerElem = tableHeader ? tableHeader.$el : null;
       const footerElem = tableFooter ? tableFooter.$el : null;
+      setScrollLeft(bodyElem, scrollLeft);
+      setScrollLeft(headerElem, scrollLeft);
+      setScrollLeft(footerElem, scrollLeft);
+      setScrollLeft(bodyElem, scrollLeft);
+      setScrollLeft(headerElem, scrollLeft);
+      setScrollLeft(footerElem, scrollLeft);
+    };
+    const scrollXEvent = evnt => {
+      const wrapperEl = evnt.currentTarget;
       const {
         scrollTop,
         scrollLeft
@@ -11802,9 +11876,7 @@ const customStorageKey = 'VXE_CUSTOM_STORE';
       const isRollY = false;
       internalData.lastScrollLeft = scrollLeft;
       reactData.lastScrollTime = Date.now();
-      setScrollLeft(bodyElem, scrollLeft);
-      setScrollLeft(headerElem, scrollLeft);
-      setScrollLeft(footerElem, scrollLeft);
+      handleSyncScrollX(scrollLeft);
       $xeTable.triggerScrollXEvent(evnt);
       $xeTable.handleScrollEvent(evnt, isRollY, isRollX, {
         type: 'table',
@@ -11819,14 +11891,19 @@ const customStorageKey = 'VXE_CUSTOM_STORE';
       leading: false,
       trailing: true
     });
-    const scrollYEvent = evnt => {
-      const wrapperEl = evnt.currentTarget;
+    const handleSyncScrollY = scrollTop => {
       const tableBody = refTableBody.value;
       const leftBody = refTableLeftBody.value;
       const rightBody = refTableRightBody.value;
       const bodyElem = tableBody.$el;
       const leftElem = leftBody ? leftBody.$el : null;
       const rightElem = rightBody ? rightBody.$el : null;
+      setScrollTop(bodyElem, scrollTop);
+      setScrollTop(leftElem, scrollTop);
+      setScrollTop(rightElem, scrollTop);
+    };
+    const scrollYEvent = evnt => {
+      const wrapperEl = evnt.currentTarget;
       const {
         scrollTop,
         scrollLeft
@@ -11835,9 +11912,7 @@ const customStorageKey = 'VXE_CUSTOM_STORE';
       const isRollY = true;
       internalData.lastScrollTop = scrollTop;
       reactData.lastScrollTime = Date.now();
-      setScrollTop(bodyElem, scrollTop);
-      setScrollTop(leftElem, scrollTop);
-      setScrollTop(rightElem, scrollTop);
+      handleSyncScrollY(scrollTop);
       $xeTable.triggerScrollYEvent(evnt);
       $xeTable.handleScrollEvent(evnt, isRollY, isRollX, {
         type: 'table',
@@ -11847,13 +11922,14 @@ const customStorageKey = 'VXE_CUSTOM_STORE';
       });
     };
     let keyCtxTimeout;
+    const dispatchEvent = (type, params, evnt) => {
+      emit(type, createEvent(evnt, {
+        $table: $xeTable,
+        $grid: $xeGrid
+      }, params));
+    };
     tableMethods = {
-      dispatchEvent(type, params, evnt) {
-        emit(type, createEvent(evnt, {
-          $table: $xeTable,
-          $grid: $xeGrid
-        }, params));
-      },
+      dispatchEvent,
       /**
        * 重置表格的一切数据状态
        */
@@ -13371,7 +13447,7 @@ const customStorageKey = 'VXE_CUSTOM_STORE';
           visible: false
         });
         if (visible) {
-          $xeTable.dispatchEvent('filter-visible', {
+          dispatchEvent('filter-visible', {
             column,
             property: column.field,
             field: column.field,
@@ -14313,7 +14389,7 @@ const customStorageKey = 'VXE_CUSTOM_STORE';
                 tablePrivateMethods.preventEvent(evnt, 'event.clearAreas', {}, () => {
                   $xeTable.clearCellAreas();
                   $xeTable.clearCopyCellArea();
-                  $xeTable.dispatchEvent('clear-cell-area-selection', {
+                  dispatchEvent('clear-cell-area-selection', {
                     cellAreas
                   }, evnt);
                 });
@@ -14375,7 +14451,7 @@ const customStorageKey = 'VXE_CUSTOM_STORE';
       const isEsc = table_globalEvents.hasKey(evnt, GLOBAL_EVENT_KEYS.ESCAPE);
       if (isEsc) {
         tablePrivateMethods.preventEvent(evnt, 'event.keydown', null, () => {
-          tableMethods.dispatchEvent('keydown-start', {}, evnt);
+          dispatchEvent('keydown-start', {}, evnt);
           if (keyboardConfig && mouseConfig && mouseOpts.area && $xeTable.handleKeyboardEvent) {
             $xeTable.handleKeyboardEvent(evnt);
           } else if (actived.row || filterStore.visible || ctxMenuStore.visible) {
@@ -14397,8 +14473,8 @@ const customStorageKey = 'VXE_CUSTOM_STORE';
               }
             }
           }
-          tableMethods.dispatchEvent('keydown', {}, evnt);
-          tableMethods.dispatchEvent('keydown-end', {}, evnt);
+          dispatchEvent('keydown', {}, evnt);
+          dispatchEvent('keydown-end', {}, evnt);
         });
       }
     };
@@ -14590,7 +14666,7 @@ const customStorageKey = 'VXE_CUSTOM_STORE';
                 }
                 // 如果按下 del 键，更新表尾数据
                 tableMethods.updateFooter();
-                $xeTable.dispatchEvent('cell-delete-value', params, evnt);
+                dispatchEvent('cell-delete-value', params, evnt);
               }
             }
           } else if (hasBackspaceKey && keyboardConfig && keyboardOpts.isBack && isEnableConf(editConfig) && (selected.row || selected.column)) {
@@ -14616,7 +14692,7 @@ const customStorageKey = 'VXE_CUSTOM_STORE';
                     setCellValue(selected.row, selected.column, null);
                     $xeTable.handleEdit(selected.args, evnt);
                   }
-                  $xeTable.dispatchEvent('cell-backspace-value', params, evnt);
+                  dispatchEvent('cell-backspace-value', params, evnt);
                 }
               }
             }
@@ -14671,7 +14747,7 @@ const customStorageKey = 'VXE_CUSTOM_STORE';
               }
             }
           }
-          tableMethods.dispatchEvent('keydown', {}, evnt);
+          dispatchEvent('keydown', {}, evnt);
         });
       }
     };
@@ -14698,7 +14774,7 @@ const customStorageKey = 'VXE_CUSTOM_STORE';
             $xeTable.handlePasteCellAreaEvent(evnt);
           }
         }
-        tableMethods.dispatchEvent('paste', {}, evnt);
+        dispatchEvent('paste', {}, evnt);
       }
     };
     const handleGlobalCopyEvent = evnt => {
@@ -14724,7 +14800,7 @@ const customStorageKey = 'VXE_CUSTOM_STORE';
             $xeTable.handleCopyCellAreaEvent(evnt);
           }
         }
-        tableMethods.dispatchEvent('copy', {}, evnt);
+        dispatchEvent('copy', {}, evnt);
       }
     };
     const handleGlobalCutEvent = evnt => {
@@ -14750,7 +14826,7 @@ const customStorageKey = 'VXE_CUSTOM_STORE';
             $xeTable.handleCutCellAreaEvent(evnt);
           }
         }
-        tableMethods.dispatchEvent('cut', {}, evnt);
+        dispatchEvent('cut', {}, evnt);
       }
     };
     const handleGlobalResizeEvent = () => {
@@ -14775,6 +14851,50 @@ const customStorageKey = 'VXE_CUSTOM_STORE';
         }
       }
     };
+    const clearRowDropOrigin = () => {
+      const el = refElem.value;
+      if (el) {
+        const clss = 'row--drag-origin';
+        external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().arrayEach(el.querySelectorAll(`.${clss}`), elem => {
+          elem.draggable = false;
+          removeClass(elem, clss);
+        });
+      }
+    };
+    const clearRowDropTarget = () => {
+      const el = refElem.value;
+      if (el) {
+        const clss = 'row--drag-active-target';
+        external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().arrayEach(el.querySelectorAll(`.${clss}`), elem => {
+          removeClass(elem, clss);
+        });
+      }
+    };
+    const showRowDropTip = evnt => {
+      const rdTipEl = refRowDragTipElem.value;
+      if (!rdTipEl) {
+        return;
+      }
+      const el = refElem.value;
+      if (!el) {
+        return;
+      }
+      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;
+      if (rdTipEl) {
+        rdTipEl.style.display = '';
+      }
+    };
+    const updateRowDropTipContent = tdEl => {
+      reactData.dragTipText = tdEl.textContent || '';
+    };
     /**
      * 处理显示 tooltip
      * @param {Event} evnt 事件
@@ -15674,7 +15794,7 @@ const customStorageKey = 'VXE_CUSTOM_STORE';
         if (sortOpts.trigger === 'cell' && !(triggerResizable || triggerSort || triggerFilter)) {
           tablePrivateMethods.triggerSortEvent(evnt, column, getNextSortOrder(column));
         }
-        tableMethods.dispatchEvent('header-cell-click', Object.assign({
+        dispatchEvent('header-cell-click', Object.assign({
           triggerResizable,
           triggerSort,
           triggerFilter,
@@ -15685,7 +15805,7 @@ const customStorageKey = 'VXE_CUSTOM_STORE';
         }
       },
       triggerHeaderCellDblclickEvent(evnt, params) {
-        tableMethods.dispatchEvent('header-cell-dblclick', Object.assign({
+        dispatchEvent('header-cell-dblclick', Object.assign({
           cell: evnt.currentTarget
         }, params), evnt);
       },
@@ -15786,7 +15906,7 @@ const customStorageKey = 'VXE_CUSTOM_STORE';
             }
           }
         }
-        tableMethods.dispatchEvent('cell-click', params, evnt);
+        dispatchEvent('cell-click', params, evnt);
       },
       /**
        * 列双击点击事件
@@ -15818,7 +15938,7 @@ const customStorageKey = 'VXE_CUSTOM_STORE';
             }
           }
         }
-        tableMethods.dispatchEvent('cell-dblclick', params, evnt);
+        dispatchEvent('cell-dblclick', params, evnt);
       },
       handleToggleCheckRowEvent(evnt, params) {
         const {
@@ -15874,7 +15994,7 @@ const customStorageKey = 'VXE_CUSTOM_STORE';
               tableMethods.setAllCheckboxRow(false);
               const rangeRows = _rowIndex < _firstRowIndex ? afterFullData.slice(_rowIndex, _firstRowIndex + 1) : afterFullData.slice(_firstRowIndex, _rowIndex + 1);
               handleCheckedCheckboxRow(rangeRows, true, false);
-              tableMethods.dispatchEvent('checkbox-range-select', Object.assign({
+              dispatchEvent('checkbox-range-select', Object.assign({
                 rangeRecords: rangeRows
               }, params), evnt);
               return;
@@ -15886,7 +16006,7 @@ const customStorageKey = 'VXE_CUSTOM_STORE';
         })) {
           tablePrivateMethods.handleSelectRow(params, value);
           tablePrivateMethods.checkSelectionStatus();
-          tableMethods.dispatchEvent('checkbox-change', Object.assign({
+          dispatchEvent('checkbox-change', Object.assign({
             records: tableMethods.getCheckboxRecords(),
             reserves: tableMethods.getCheckboxReserveRecords(),
             indeterminates: tableMethods.getCheckboxIndeterminateRecords(),
@@ -15940,7 +16060,7 @@ const customStorageKey = 'VXE_CUSTOM_STORE';
           }
         }
         if (isChange) {
-          tableMethods.dispatchEvent('radio-change', {
+          dispatchEvent('radio-change', {
             oldValue,
             newValue,
             ...params
@@ -15978,7 +16098,7 @@ const customStorageKey = 'VXE_CUSTOM_STORE';
         })) {
           tableMethods.setCurrentRow(newValue);
           if (isChange) {
-            tableMethods.dispatchEvent('current-change', {
+            dispatchEvent('current-change', {
               oldValue,
               newValue,
               ...params
@@ -16012,7 +16132,7 @@ const customStorageKey = 'VXE_CUSTOM_STORE';
           const columnIndex = tableMethods.getColumnIndex(column);
           const $columnIndex = tableMethods.getVMColumnIndex(column);
           tableMethods.setRowExpand(row, expanded);
-          tableMethods.dispatchEvent('toggle-row-expand', {
+          dispatchEvent('toggle-row-expand', {
             expanded,
             column,
             columnIndex,
@@ -16049,7 +16169,7 @@ const customStorageKey = 'VXE_CUSTOM_STORE';
           const columnIndex = tableMethods.getColumnIndex(column);
           const $columnIndex = tableMethods.getVMColumnIndex(column);
           tableMethods.setTreeExpand(row, expanded);
-          tableMethods.dispatchEvent('toggle-tree-expand', {
+          dispatchEvent('toggle-tree-expand', {
             expanded,
             column,
             columnIndex,
@@ -16093,9 +16213,152 @@ const customStorageKey = 'VXE_CUSTOM_STORE';
           if (mouseConfig && mouseOpts.area && $xeTable.handleSortEvent) {
             $xeTable.handleSortEvent(evnt, params);
           }
-          tableMethods.dispatchEvent('sort-change', params, evnt);
+          dispatchEvent('sort-change', params, evnt);
         }
       },
+      handleRowDragDragstartEvent(evnt) {
+        const img = new Image();
+        if (evnt.dataTransfer) {
+          evnt.dataTransfer.setDragImage(img, 0, 0);
+        }
+      },
+      handleRowDragDragendEvent(evnt) {
+        const {
+          treeConfig
+        } = props;
+        const rowOpts = computeRowOpts.value;
+        const {
+          dragEndMethod
+        } = rowOpts;
+        const treeOpts = computeTreeOpts.value;
+        const {
+          transform
+        } = treeOpts;
+        const {
+          dragRow
+        } = reactData;
+        const {
+          afterFullData,
+          tableFullData,
+          prevDragRow,
+          prevDragPos
+        } = internalData;
+        if (prevDragRow && dragRow) {
+          // 判断是否有拖动
+          if (prevDragRow !== dragRow) {
+            Promise.resolve(dragEndMethod ? dragEndMethod({
+              oldRow: dragRow,
+              newRow: prevDragRow
+            }) : true).then(status => {
+              if (!status) {
+                return;
+              }
+              const dragOffsetIndex = prevDragPos === 'bottom' ? 1 : 0;
+              // 移出源位置
+              const oafIndex = $xeTable.findRowIndexOf(afterFullData, dragRow);
+              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);
+              const nafIndex = pafIndex + dragOffsetIndex;
+              const ntfIndex = ptfIndex + dragOffsetIndex;
+              afterFullData.splice(nafIndex, 0, dragRow);
+              tableFullData.splice(ntfIndex, 0, dragRow);
+              reactData.isDragRowMove = true;
+              $xeTable.cacheRowMap();
+              $xeTable.updateScrollYStatus();
+              $xeTable.handleTableData(treeConfig && transform);
+              if (!(treeConfig && transform)) {
+                $xeTable.updateAfterDataIndex();
+              }
+              $xeTable.updateFooter();
+              $xeTable.checkSelectionStatus();
+              if (reactData.scrollYLoad) {
+                $xeTable.updateScrollYSpace();
+              }
+              (0,external_commonjs_vue_commonjs2_vue_root_Vue_.nextTick)().then(() => {
+                $xeTable.updateCellAreas();
+                return $xeTable.recalculate();
+              });
+              dispatchEvent('row-dragend', {
+                oldRow: dragRow,
+                newRow: prevDragRow,
+                _index: {
+                  newIndex: nafIndex,
+                  oldIndex: oafIndex
+                }
+              }, evnt);
+            }).catch(() => {});
+          }
+        }
+        hideRowDropTip();
+        clearRowDropOrigin();
+        clearRowDropTarget();
+        reactData.dragRow = null;
+        setTimeout(() => {
+          reactData.isDragRowMove = false;
+        }, 500);
+      },
+      handleRowDragDragoverEvent(evnt) {
+        const trEl = evnt.currentTarget;
+        const rowid = trEl.getAttribute('rowid');
+        const row = $xeTable.getRowById(rowid);
+        clearRowDropTarget();
+        if (row) {
+          evnt.preventDefault();
+          evnt.preventDefault();
+          const {
+            dragRow
+          } = reactData;
+          const offsetY = evnt.clientY - trEl.getBoundingClientRect().y;
+          const dragPos = offsetY < trEl.clientHeight / 2 ? 'top' : 'bottom';
+          addClass(trEl, 'row--drag-active-target');
+          trEl.setAttribute('drag-pos', dragPos);
+          internalData.prevDragRow = row;
+          internalData.prevDragPos = dragPos;
+          dispatchEvent('row-dragover', {
+            oldRow: dragRow,
+            targetRow: row,
+            dragPos
+          }, evnt);
+        }
+        showRowDropTip(evnt);
+      },
+      handleCellDragMousedownEvent(evnt, params) {
+        evnt.stopPropagation();
+        const rowOpts = computeRowOpts.value;
+        const {
+          dragStartMethod
+        } = rowOpts;
+        const {
+          row
+        } = params;
+        const dragEl = evnt.currentTarget;
+        const tdEl = dragEl.parentNode?.parentNode;
+        const trEl = tdEl.parentNode;
+        reactData.isDragRowMove = false;
+        clearRowDropOrigin();
+        if (dragStartMethod && !dragStartMethod(params)) {
+          trEl.draggable = false;
+          reactData.dragRow = null;
+          hideRowDropTip();
+          return;
+        }
+        reactData.dragRow = row;
+        trEl.draggable = true;
+        addClass(trEl, 'row--drag-origin');
+        showRowDropTip(evnt);
+        updateRowDropTipContent(tdEl);
+        dispatchEvent('row-dragstart', params, evnt);
+      },
+      handleCellDragMouseupEvent() {
+        clearRowDropOrigin();
+        hideRowDropTip();
+        reactData.dragRow = null;
+        reactData.isDragRowMove = false;
+      },
       /**
        * 横向 X 可视渲染事件处理
        */
@@ -16127,7 +16390,7 @@ const customStorageKey = 'VXE_CUSTOM_STORE';
         const bodyWidth = bodyElem ? bodyElem.clientWidth : 0;
         const scrollHeight = bodyElem ? bodyElem.scrollHeight : 0;
         const scrollWidth = bodyElem ? bodyElem.scrollWidth : 0;
-        $xeTable.dispatchEvent('scroll', {
+        const evntParams = {
           bodyHeight,
           bodyWidth,
           scrollHeight,
@@ -16135,7 +16398,8 @@ const customStorageKey = 'VXE_CUSTOM_STORE';
           isX: isRollX,
           isY: isRollY,
           ...params
-        }, evnt);
+        };
+        dispatchEvent('scroll', evntParams, evnt);
       },
       /**
        * 纵向 Y 可视渲染事件处理
@@ -16312,14 +16576,14 @@ const customStorageKey = 'VXE_CUSTOM_STORE';
       },
       updateScrollXData() {
         // reactData.tableColumn = []
-        (0,external_commonjs_vue_commonjs2_vue_root_Vue_.nextTick)(() => {
+        return (0,external_commonjs_vue_commonjs2_vue_root_Vue_.nextTick)().then(() => {
           handleTableColumn();
           tablePrivateMethods.updateScrollXSpace();
         });
       },
       updateScrollYData() {
         // reactData.tableData = []
-        (0,external_commonjs_vue_commonjs2_vue_root_Vue_.nextTick)(() => {
+        return (0,external_commonjs_vue_commonjs2_vue_root_Vue_.nextTick)().then(() => {
           tablePrivateMethods.handleTableData();
           calcCellHeight();
           tablePrivateMethods.updateScrollYSpace();
@@ -16712,6 +16976,13 @@ const customStorageKey = 'VXE_CUSTOM_STORE';
         key: 'tm',
         ref: refTableMenu
       }) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_.createCommentVNode)(),
+      /**
+       * 拖拽提示
+       */
+      rowOpts.drag ? (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
+        ref: refRowDragTipElem,
+        class: 'vxe-table--row-drag-hint'
+      }, table_getI18n('vxe.table.dragTip', [reactData.dragTipText])) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_.createCommentVNode)(),
       /**
        * 提示相关
        */
@@ -18043,7 +18314,8 @@ edit_hook_hooks.add('tableEditModule', {
       computeMouseOpts,
       computeEditOpts,
       computeCheckboxOpts,
-      computeTreeOpts
+      computeTreeOpts,
+      computeValidOpts
     } = $xeTable.getComputeMaps();
     let editMethods = {};
     let editPrivateMethods = {};
@@ -18707,6 +18979,7 @@ edit_hook_hooks.add('tableEditModule', {
           row,
           column
         } = actived;
+        const validOpts = computeValidOpts.value;
         if (row || column) {
           syncActivedCell();
           actived.args = null;
@@ -18722,9 +18995,11 @@ edit_hook_hooks.add('tableEditModule', {
             $columnIndex: $xeTable.getVMColumnIndex(column)
           }, evnt || null);
         }
-        if (hook_getConfig().cellVaildMode === 'obsolete') {
-          if ($xeTable.clearValidate) {
-            return $xeTable.clearValidate();
+        if (validOpts.autoClear) {
+          if (validOpts.msgMode !== 'full' || hook_getConfig().cellVaildMode === 'obsolete') {
+            if ($xeTable.clearValidate) {
+              return $xeTable.clearValidate();
+            }
           }
         }
         focused.row = null;
@@ -25220,6 +25495,7 @@ const Grid = VxeGrid;
       impSuccess: '成功导入 {0} 条记录',
       expLoading: '正在导出中',
       expSuccess: '导出成功',
+      expError: '导出失败',
       expFilename: '导出_{0}',
       expOriginFilename: '导出_源_{0}',
       customTitle: '列设置',
@@ -25228,7 +25504,8 @@ const Grid = VxeGrid;
       customClose: '关闭',
       customCancel: '取消',
       customRestore: '恢复默认',
-      maxFixedCol: '最大冻结列的数量不能超过 {0} 个'
+      maxFixedCol: '最大冻结列的数量不能超过 {0} 个',
+      dragTip: '移动：{0}'
     },
     grid: {
       selectOneRecord: '请至少选择一条记录！',
@@ -25279,7 +25556,7 @@ const Grid = VxeGrid;
       cstmCancel: '取消',
       cstmConfirm: '确定',
       cstmConfirmRestore: '请确认是否恢复成默认列配置？',
-      cstmDragTarget: '移动目标：{0}',
+      cstmDragTarget: '移动：{0}',
       setting: {
         colSort: '排序',
         sortHelpTip: '点击并拖动图标可以调整列的排序',