vxe-table 3.10.1 → 3.10.3

package/lib/index.umd.js

@@ -2220,7 +2220,7 @@ function getClass(property, params) {
 ;// CONCATENATED MODULE: ./packages/ui/index.ts
 
 
-const version = "3.10.1";
+const version = "3.10.3";
 core_.VxeUI.version = version;
 core_.VxeUI.tableVersion = version;
 core_.VxeUI.setConfig({
@@ -2257,6 +2257,9 @@ core_.VxeUI.setConfig({
       // trigger: 'default'
       strict: true
     },
+    dragConfig: {
+      showRowIcon: true
+    },
     checkboxConfig: {
       // trigger: 'default',
       strict: true
@@ -2764,7 +2767,7 @@ function isNodeElement(elem) {
 const {
   log: log_log
 } = core_.VxeUI;
-const log_version = `table v${"3.10.1"}`;
+const log_version = `table v${"3.10.3"}`;
 const warnLog = log_log.create('warn', log_version);
 const errLog = log_log.create('error', log_version);
 ;// CONCATENATED MODULE: ./packages/table/src/columnInfo.ts
@@ -2862,6 +2865,7 @@ class ColumnInfo {
       filterRecoverMethod: _vm.filterRecoverMethod,
       filterRender: _vm.filterRender,
       treeNode: _vm.treeNode,
+      dragSort: _vm.dragSort,
       cellType: _vm.cellType,
       cellRender: _vm.cellRender,
       editRender: _vm.editRender,
@@ -3469,7 +3473,8 @@ const {
   getI18n: cell_getI18n,
   getIcon: cell_getIcon,
   renderer: cell_renderer,
-  formats: cell_formats
+  formats: cell_formats,
+  renderEmptyElement
 } = core_.VxeUI;
 function renderTitlePrefixIcon(h, params) {
   const {
@@ -3507,6 +3512,56 @@ function renderTitleSuffixIcon(h, params) {
     }
   })] : [];
 }
+function renderCellDragIcon(h, params) {
+  const {
+    $table
+  } = params;
+  const dragOpts = $table.computeDragOpts;
+  const {
+    rowDisabledMethod
+  } = dragOpts;
+  const isDisabled = rowDisabledMethod && rowDisabledMethod(params);
+  return h('span', {
+    key: 'dg',
+    class: ['vxe-cell--drag-handle', {
+      'is--disabled': isDisabled
+    }],
+    on: {
+      mousedown(evnt) {
+        if (!isDisabled) {
+          $table.handleCellDragMousedownEvent(evnt, params);
+        }
+      },
+      mouseup: $table.handleCellDragMouseupEvent
+    }
+  }, [h('i', {
+    class: 'vxe-table-icon-drag-handle'
+  })]);
+}
+function renderCellBaseVNs(h, params, content) {
+  const {
+    $table,
+    column,
+    row
+  } = params;
+  const {
+    dragSort
+  } = column;
+  const vns = external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().isArray(content) ? content : [content];
+  const rowOpts = $table.computeRowOpts;
+  const dragOpts = $table.computeDragOpts;
+  const {
+    showRowIcon,
+    rowVisibleMethod
+  } = dragOpts;
+  if (dragSort && rowOpts.drag && showRowIcon && (!rowVisibleMethod || rowVisibleMethod({
+    row,
+    column
+  }))) {
+    vns.unshift(renderCellDragIcon(h, params));
+  }
+  return vns;
+}
 function renderTitleContent(h, params, content) {
   const {
     $table,
@@ -3727,7 +3782,7 @@ const Cell = {
     } = column;
     const renderOpts = editRender || cellRender;
     if (slots && slots.default) {
-      return $table.callSlot(slots.default, params, h);
+      return renderCellBaseVNs(h, params, $table.callSlot(slots.default, params, h));
     }
     if (renderOpts) {
       const compConf = cell_renderer.get(renderOpts.name);
@@ -3735,20 +3790,20 @@ const Cell = {
       const rtCell = compConf ? compConf.renderTableCell || compConf.renderCell : null;
       const renderFn = editRender ? rtCell : rtDefault;
       if (renderFn) {
-        return getSlotVNs(renderFn.call($table, h, renderOpts, Object.assign({
+        return renderCellBaseVNs(h, params, getSlotVNs(renderFn.call($table, h, renderOpts, Object.assign({
           $type: editRender ? 'edit' : 'cell'
-        }, params)));
+        }, params))));
       }
     }
     const cellValue = $table.getCellLabel(row, column);
     const cellPlaceholder = editRender ? editRender.placeholder : '';
-    return [h('span', {
+    return renderCellBaseVNs(h, params, [h('span', {
       class: 'vxe-cell--label'
     }, [
     // 如果设置占位符
     editRender && eqEmptyValue(cellValue) ? h('span', {
       class: 'vxe-cell--placeholder'
-    }, formatText(getFuncText(cellPlaceholder), 1)) : h('span', formatText(cellValue, 1))])];
+    }, formatText(getFuncText(cellPlaceholder), 1)) : h('span', formatText(cellValue, 1))])]);
   },
   renderTreeCell(h, params) {
     return Cell.renderTreeIcon(h, params, Cell.renderDefaultCell.call(this, h, params));
@@ -3858,13 +3913,13 @@ const Cell = {
       slots
     } = column;
     if (slots && slots.default) {
-      return $table.callSlot(slots.default, params, h);
+      return renderCellBaseVNs(h, params, $table.callSlot(slots.default, params, h));
     }
     const {
       seq
     } = params;
     const seqMethod = seqOpts.seqMethod;
-    return [formatText(seqMethod ? seqMethod(params) : treeConfig ? seq : (seqOpts.startIndex || 0) + seq, 1)];
+    return renderCellBaseVNs(h, params, [h('span', `${formatText(seqMethod ? seqMethod(params) : treeConfig ? seq : (seqOpts.startIndex || 0) + seq, 1)}`)]);
   },
   renderTreeIndexCell(h, params) {
     return Cell.renderTreeIcon(h, params, Cell.renderSeqCell(h, params));
@@ -3936,7 +3991,7 @@ const Cell = {
       visible: isVisible
     };
     if (radioSlot) {
-      return $table.callSlot(radioSlot, radioParams, h);
+      return renderCellBaseVNs(h, params, $table.callSlot(radioSlot, radioParams, h));
     }
     const radioVNs = [];
     if (isVisible) {
@@ -3949,13 +4004,13 @@ const Cell = {
         class: 'vxe-radio--label'
       }, defaultSlot ? $table.callSlot(defaultSlot, radioParams, h) : external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().get(row, labelField)));
     }
-    return [h('span', {
+    return renderCellBaseVNs(h, params, [h('span', {
       class: ['vxe-cell--radio', {
         'is--checked': isChecked,
         'is--disabled': isDisabled
       }],
       on
-    }, radioVNs)];
+    }, radioVNs)]);
   },
   renderTreeRadioCell(h, params) {
     return Cell.renderTreeIcon(h, params, Cell.renderRadioCell(h, params));
@@ -4077,7 +4132,7 @@ const Cell = {
       indeterminate
     };
     if (checkboxSlot) {
-      return $table.callSlot(checkboxSlot, checkboxParams, h);
+      return renderCellBaseVNs(h, params, $table.callSlot(checkboxSlot, checkboxParams, h));
     }
     const checkVNs = [];
     if (isVisible) {
@@ -4090,7 +4145,7 @@ const Cell = {
         class: 'vxe-checkbox--label'
       }, defaultSlot ? $table.callSlot(defaultSlot, checkboxParams, h) : external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().get(row, labelField)));
     }
-    return [h('span', {
+    return renderCellBaseVNs(h, params, [h('span', {
       class: ['vxe-cell--checkbox', {
         'is--checked': isChecked,
         'is--disabled': isDisabled,
@@ -4098,7 +4153,7 @@ const Cell = {
         'is--hidden': !isVisible
       }],
       on
-    }, checkVNs)];
+    }, checkVNs)]);
   },
   renderTreeSelectionCell(h, params) {
     return Cell.renderTreeIcon(h, params, Cell.renderCheckboxCell(h, params));
@@ -4161,7 +4216,7 @@ const Cell = {
       indeterminate: isIndeterminate
     };
     if (checkboxSlot) {
-      return $table.callSlot(checkboxSlot, checkboxParams, h);
+      return renderCellBaseVNs(h, params, $table.callSlot(checkboxSlot, checkboxParams, h));
     }
     const checkVNs = [];
     if (isVisible) {
@@ -4174,7 +4229,7 @@ const Cell = {
         class: 'vxe-checkbox--label'
       }, defaultSlot ? $table.callSlot(defaultSlot, checkboxParams, h) : external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().get(row, labelField)));
     }
-    return [h('span', {
+    return renderCellBaseVNs(h, params, [h('span', {
       class: ['vxe-cell--checkbox', {
         'is--checked': isChecked,
         'is--disabled': isDisabled,
@@ -4182,7 +4237,7 @@ const Cell = {
         'is--hidden': !isVisible
       }],
       on
-    }, checkVNs)];
+    }, checkVNs)]);
   },
   renderTreeSelectionCellByProp(h, params) {
     return Cell.renderTreeIcon(h, params, Cell.renderCheckboxCellByProp(h, params));
@@ -4218,7 +4273,7 @@ const Cell = {
     let isAceived = false;
     let isLazyLoading = false;
     if (slots && slots.icon) {
-      return $table.callSlot(slots.icon, params, h);
+      return renderCellBaseVNs(h, params, $table.callSlot(slots.icon, params, h));
     }
     if (!isHidden) {
       const rowid = getRowid($table, row);
@@ -4227,7 +4282,7 @@ const Cell = {
         isLazyLoading = !!rowExpandLazyLoadedMaps[rowid];
       }
     }
-    return [showIcon && (!visibleMethod || visibleMethod(params)) ? h('span', {
+    return renderCellBaseVNs(h, params, [showIcon && (!visibleMethod || visibleMethod(params)) ? h('span', {
       class: ['vxe-table--expanded', {
         'is--active': isAceived
       }],
@@ -4238,9 +4293,9 @@ const Cell = {
       }
     }, [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 ? h('span', {
+    })]) : renderEmptyElement($table), defaultSlot || labelField ? h('span', {
       class: 'vxe-table--expand-label'
-    }, defaultSlot ? $table.callSlot(defaultSlot, params, h) : external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().get(row, labelField)) : null];
+    }, defaultSlot ? $table.callSlot(defaultSlot, params, h) : external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().get(row, labelField)) : renderEmptyElement($table)]);
   },
   renderExpandData(h, params) {
     const {
@@ -4275,14 +4330,14 @@ const Cell = {
       slots
     } = column;
     if (slots && slots.default) {
-      return $table.callSlot(slots.default, params, h);
+      return renderCellBaseVNs(h, params, $table.callSlot(slots.default, params, h));
     }
-    return [h('span', {
+    return renderCellBaseVNs(h, params, [h('span', {
       class: 'vxe-cell--html',
       domProps: {
         innerHTML: getDefaultCellLabel(params)
       }
-    })];
+    })]);
   },
   renderTreeHTMLCell(h, params) {
     return Cell.renderTreeIcon(h, params, Cell.renderHTMLCell(h, params));
@@ -4471,12 +4526,12 @@ const Cell = {
       return [];
     }
     if (slots && slots.default) {
-      return $table.callSlot(slots.default, cellParams, h);
+      return renderCellBaseVNs(h, params, $table.callSlot(slots.default, cellParams, h));
     }
     if (formatter) {
-      return [h('span', {
+      return renderCellBaseVNs(h, params, [h('span', {
         class: 'vxe-cell--label'
-      }, [getDefaultCellLabel(cellParams)])];
+      }, [getDefaultCellLabel(cellParams)])]);
     }
     return Cell.renderDefaultCell.call(_vm, h, cellParams);
   }
@@ -4569,8 +4624,10 @@ const props = {
   filterRecoverMethod: Function,
   // 筛选模板配置项
   filterRender: Object,
-  // 指定为树节点
+  // 设置为树节点
   treeNode: Boolean,
+  // 设置为拖拽排序
+  dragSort: Boolean,
   // 是否可视
   visible: {
     type: Boolean,
@@ -5077,6 +5134,51 @@ function getOrderField(_vm, column) {
     return cellValue;
   };
 }
+function clearRowDropOrigin($xeTable) {
+  const el = $xeTable.$el;
+  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);
+    });
+  }
+}
+function clearRowDropTarget($xeTable) {
+  const el = $xeTable.$el;
+  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);
+    });
+  }
+}
+function showRowDropTip(evnt, $xeTable) {
+  const rdTipEl = $xeTable.$refs.refRowDragTipElem;
+  if (!rdTipEl) {
+    return;
+  }
+  const el = $xeTable.$el;
+  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 = $xeTable => {
+  const rdTipEl = $xeTable.$refs.refRowDragTipElem;
+  if (rdTipEl) {
+    rdTipEl.style.display = '';
+  }
+};
+const updateRowDropTipContent = ($xeTable, tdEl) => {
+  const reactData = $xeTable;
+  reactData.dragTipText = tdEl.textContent || '';
+};
 const Methods = {
   callSlot(slotFunc, params, h, vNodes) {
     if (slotFunc) {
@@ -10135,6 +10237,160 @@ const Methods = {
       this.emitEvent('sort-change', params, evnt);
     }
   },
+  handleRowDragDragstartEvent(evnt) {
+    const img = new Image();
+    if (evnt.dataTransfer) {
+      evnt.dataTransfer.setDragImage(img, 0, 0);
+    }
+  },
+  handleRowDragDragendEvent(evnt) {
+    const $xeTable = this;
+    const props = $xeTable;
+    const reactData = $xeTable;
+    const internalData = $xeTable;
+    const {
+      treeConfig
+    } = props;
+    const dragOpts = $xeTable.computeDragOpts;
+    const {
+      dragEndMethod
+    } = dragOpts;
+    const treeOpts = $xeTable.computeTreeOpts;
+    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();
+          }
+          $xeTable.$nextTick().then(() => {
+            $xeTable.updateCellAreas();
+            return $xeTable.recalculate();
+          });
+          $xeTable.dispatchEvent('row-dragend', {
+            oldRow: dragRow,
+            newRow: prevDragRow,
+            _index: {
+              newIndex: nafIndex,
+              oldIndex: oafIndex
+            }
+          }, evnt);
+        }).catch(() => {});
+      }
+    }
+    hideRowDropTip($xeTable);
+    clearRowDropOrigin($xeTable);
+    clearRowDropTarget($xeTable);
+    reactData.dragRow = null;
+    setTimeout(() => {
+      reactData.isDragRowMove = false;
+    }, 500);
+  },
+  handleRowDragDragoverEvent(evnt) {
+    const $xeTable = this;
+    const internalData = $xeTable;
+    const reactData = $xeTable;
+    const trEl = evnt.currentTarget;
+    const rowid = trEl.getAttribute('rowid');
+    const row = $xeTable.getRowById(rowid);
+    clearRowDropTarget($xeTable);
+    if (row) {
+      evnt.preventDefault();
+      evnt.preventDefault();
+      const {
+        dragRow
+      } = reactData;
+      const offsetY = evnt.clientY - trEl.getBoundingClientRect().y;
+      const dragPos = offsetY < trEl.clientHeight / 2 ? 'top' : 'bottom';
+      addClass(trEl, 'row--drag-active-target');
+      trEl.setAttribute('drag-pos', dragPos);
+      internalData.prevDragRow = row;
+      internalData.prevDragPos = dragPos;
+      $xeTable.dispatchEvent('row-dragover', {
+        oldRow: dragRow,
+        targetRow: row,
+        dragPos
+      }, evnt);
+    }
+    showRowDropTip(evnt, $xeTable);
+  },
+  handleCellDragMousedownEvent(evnt, params) {
+    const $xeTable = this;
+    const reactData = $xeTable;
+    evnt.stopPropagation();
+    const dragOpts = $xeTable.computeDragOpts;
+    const {
+      dragStartMethod
+    } = dragOpts;
+    const {
+      row
+    } = params;
+    const dragEl = evnt.currentTarget;
+    const tdEl = dragEl.parentNode?.parentNode;
+    const trEl = tdEl.parentNode;
+    reactData.isDragRowMove = false;
+    clearRowDropOrigin($xeTable);
+    if (dragStartMethod && !dragStartMethod(params)) {
+      trEl.draggable = false;
+      reactData.dragRow = null;
+      hideRowDropTip($xeTable);
+      return;
+    }
+    reactData.dragRow = row;
+    trEl.draggable = true;
+    addClass(trEl, 'row--drag-origin');
+    showRowDropTip(evnt, $xeTable);
+    updateRowDropTipContent($xeTable, tdEl);
+    $xeTable.dispatchEvent('row-dragstart', params, evnt);
+  },
+  handleCellDragMouseupEvent() {
+    const $xeTable = this;
+    const reactData = $xeTable;
+    clearRowDropOrigin($xeTable);
+    hideRowDropTip($xeTable);
+    reactData.dragRow = null;
+    reactData.isDragRowMove = false;
+  },
   setPendingRow(rows, status) {
     const pendingMaps = {
       ...this.pendingRowMaps
@@ -11234,7 +11490,7 @@ const Methods = {
     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,
@@ -11242,7 +11498,8 @@ const Methods = {
       isX: isRollX,
       isY: isRollY,
       ...params
-    }, evnt);
+    };
+    $xeTable.dispatchEvent('scroll', evntParams, evnt);
   },
   /**
    * 纵向 Y 可视渲染事件处理
@@ -11270,15 +11527,23 @@ const Methods = {
     leading: false,
     trailing: true
   }),
-  scrollXEvent(evnt) {
+  handleSyncScrollX(scrollLeft) {
     const $xeTable = this;
-    const wrapperEl = evnt.currentTarget;
     const tableHeader = $xeTable.$refs.tableHeader;
     const tableBody = $xeTable.$refs.tableBody;
     const tableFooter = $xeTable.$refs.tableFooter;
     const bodyElem = tableBody.$el;
     const headerElem = tableHeader ? tableHeader.$el : null;
     const footerElem = tableFooter ? tableFooter.$el : null;
+    $xeTable.lastScrollLeft = scrollLeft;
+    $xeTable.lastScrollTime = Date.now();
+    setScrollLeft(bodyElem, scrollLeft);
+    setScrollLeft(headerElem, scrollLeft);
+    setScrollLeft(footerElem, scrollLeft);
+  },
+  scrollXEvent(evnt) {
+    const $xeTable = this;
+    const wrapperEl = evnt.currentTarget;
     const {
       scrollTop,
       scrollLeft
@@ -11287,9 +11552,7 @@ const Methods = {
     const isRollY = false;
     $xeTable.lastScrollLeft = scrollLeft;
     $xeTable.lastScrollTime = Date.now();
-    setScrollLeft(bodyElem, scrollLeft);
-    setScrollLeft(headerElem, scrollLeft);
-    setScrollLeft(footerElem, scrollLeft);
+    $xeTable.handleSyncScrollX(scrollLeft);
     $xeTable.triggerScrollXEvent(evnt);
     $xeTable.handleScrollEvent(evnt, isRollY, isRollX, {
       type: 'table',
@@ -11304,15 +11567,23 @@ const Methods = {
     leading: false,
     trailing: true
   }),
-  scrollYEvent(evnt) {
+  handleSyncScrollY(scrollTop) {
     const $xeTable = this;
-    const wrapperEl = evnt.currentTarget;
     const tableBody = $xeTable.$refs.tableBody;
     const leftBody = $xeTable.$refs.leftBody;
     const rightBody = $xeTable.$refs.rightBody;
     const bodyElem = tableBody.$el;
     const leftElem = leftBody ? leftBody.$el : null;
     const rightElem = rightBody ? rightBody.$el : null;
+    $xeTable.lastScrollTop = scrollTop;
+    $xeTable.lastScrollTime = Date.now();
+    setScrollTop(bodyElem, scrollTop);
+    setScrollTop(leftElem, scrollTop);
+    setScrollTop(rightElem, scrollTop);
+  },
+  scrollYEvent(evnt) {
+    const $xeTable = this;
+    const wrapperEl = evnt.currentTarget;
     const {
       scrollTop,
       scrollLeft
@@ -11321,9 +11592,7 @@ const Methods = {
     const isRollY = true;
     $xeTable.lastScrollTop = scrollTop;
     $xeTable.lastScrollTime = Date.now();
-    setScrollTop(bodyElem, scrollTop);
-    setScrollTop(leftElem, scrollTop);
-    setScrollTop(rightElem, scrollTop);
+    $xeTable.handleSyncScrollY(scrollTop);
     $xeTable.triggerScrollYEvent(evnt);
     $xeTable.handleScrollEvent(evnt, isRollY, isRollX, {
       type: 'table',
@@ -11438,7 +11707,7 @@ const Methods = {
   },
   updateScrollXData() {
     // this.tableColumn = []
-    this.$nextTick(() => {
+    return this.$nextTick().then(() => {
       this.handleTableColumn();
       this.updateScrollXSpace();
     });
@@ -11500,7 +11769,7 @@ const Methods = {
   updateScrollYData() {
     const $xeTable = this;
     // this.tableData = []
-    this.$nextTick(() => {
+    return this.$nextTick().then(() => {
       this.handleTableData();
       calcCellHeight($xeTable);
       this.updateScrollYSpace();
@@ -12299,7 +12568,7 @@ function renderColumn(h, _vm, $xetable, seq, rowid, fixedType, rowLevel, row, ro
       'col--valid-error': !!errorValidItem,
       'col--current': currentColumn === column
     }, getClass(compCellClassName, params), getClass(className, params), getClass(allCellClassName, params)],
-    key: columnKey || columnOpts.useKey ? column.id : $columnIndex,
+    key: columnKey || columnOpts.useKey || rowOpts.useKey ? column.id : $columnIndex,
     attrs,
     style: Object.assign({
       height: cellHeight
@@ -12307,7 +12576,7 @@ function renderColumn(h, _vm, $xetable, seq, rowid, fixedType, rowLevel, row, ro
     on: tdOns
   }, tdVNs);
 }
-function renderRows(h, _vm, $xetable, fixedType, tableData, tableColumn) {
+function renderRows(h, _vm, $xeTable, fixedType, tableData, tableColumn) {
   const {
     stripe,
     rowKey,
@@ -12331,39 +12600,51 @@ function renderRows(h, _vm, $xetable, fixedType, tableData, tableColumn) {
     rowOpts,
     pendingRowList,
     pendingRowMaps
-  } = $xetable;
+  } = $xeTable;
   const childrenField = treeOpts.children || treeOpts.childrenField;
   const rows = [];
   tableData.forEach((row, $rowIndex) => {
     const trOn = {};
     let rowIndex = $rowIndex;
-    const _rowIndex = $xetable.getVTRowIndex(row);
+    const _rowIndex = $xeTable.getVTRowIndex(row);
     // 确保任何情况下 rowIndex 都精准指向真实 data 索引
-    rowIndex = $xetable.getRowIndex(row);
-    // 事件绑定
+    rowIndex = $xeTable.getRowIndex(row);
+    // 当前行事件
     if (rowOpts.isHover || highlightHoverRow) {
       trOn.mouseenter = evnt => {
-        if (isVMScrollProcess($xetable)) {
+        if (isVMScrollProcess($xeTable)) {
           return;
         }
-        $xetable.triggerHoverEvent(evnt, {
+        $xeTable.triggerHoverEvent(evnt, {
           row,
           rowIndex
         });
       };
       trOn.mouseleave = () => {
-        if (isVMScrollProcess($xetable)) {
+        if (isVMScrollProcess($xeTable)) {
           return;
         }
-        $xetable.clearHoverRow();
+        $xeTable.clearHoverRow();
+      };
+    }
+    // 拖拽行事件
+    if (rowOpts.drag) {
+      trOn.dragstart = evnt => {
+        $xeTable.handleRowDragDragstartEvent(evnt);
+      };
+      trOn.dragover = evnt => {
+        $xeTable.handleRowDragDragoverEvent(evnt);
+      };
+      trOn.dragend = evnt => {
+        $xeTable.handleRowDragDragendEvent(evnt);
       };
     }
-    const rowid = getRowid($xetable, row);
+    const rowid = getRowid($xeTable, row);
     const rest = fullAllDataRowIdData[rowid];
     const rowLevel = rest ? rest.level : 0;
     const seq = rest ? rest.seq : -1;
     const params = {
-      $table: $xetable,
+      $table: $xeTable,
       seq,
       rowid,
       fixed: fixedType,
@@ -12381,7 +12662,7 @@ function renderRows(h, _vm, $xetable, fixedType, tableData, tableColumn) {
     // 是否新增行
     let isNewRow = false;
     if (editConfig) {
-      isNewRow = $xetable.isInsertByRow(row);
+      isNewRow = $xeTable.isInsertByRow(row);
     }
     if (treeConfig && !scrollYLoad && !treeOpts.transform) {
       rowChildren = row[childrenField];
@@ -12389,23 +12670,23 @@ function renderRows(h, _vm, $xetable, fixedType, tableData, tableColumn) {
     }
     rows.push(h('tr', {
       class: ['vxe-body--row', treeConfig ? `row--level-${rowLevel}` : '', {
-        'row--stripe': stripe && ($xetable.getVTRowIndex(row) + 1) % 2 === 0,
+        'row--stripe': stripe && ($xeTable.getVTRowIndex(row) + 1) % 2 === 0,
         'is--new': isNewRow,
         'is--expand-row': isExpandRow,
         'is--expand-tree': isExpandTree,
         'row--new': isNewRow && (editOpts.showStatus || editOpts.showInsertStatus),
-        'row--radio': radioOpts.highlight && $xetable.selectRadioRow === row,
-        'row--checked': checkboxOpts.highlight && $xetable.isCheckedByCheckboxRow(row),
+        'row--radio': radioOpts.highlight && $xeTable.selectRadioRow === row,
+        'row--checked': checkboxOpts.highlight && $xeTable.isCheckedByCheckboxRow(row),
         'row--pending': pendingRowList.length && !!pendingRowMaps[rowid]
       }, rowClassName ? external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().isFunction(rowClassName) ? rowClassName(params) : rowClassName : ''],
       attrs: {
         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,
       on: trOn
     }, tableColumn.map((column, $columnIndex) => {
-      return renderColumn(h, _vm, $xetable, seq, rowid, fixedType, rowLevel, row, rowIndex, $rowIndex, _rowIndex, column, $columnIndex, tableColumn, tableData);
+      return renderColumn(h, _vm, $xeTable, seq, rowid, fixedType, rowLevel, row, rowIndex, $rowIndex, _rowIndex, column, $columnIndex, tableColumn, tableData);
     })));
     // 如果行被展开了
     if (isExpandRow) {
@@ -12425,7 +12706,7 @@ function renderRows(h, _vm, $xetable, fixedType, tableData, tableColumn) {
       } = expandColumn;
       const hasEllipsis = external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().isUndefined(showOverflow) || external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().isNull(showOverflow) ? allColumnOverflow : showOverflow;
       const expandParams = {
-        $table: $xetable,
+        $table: $xeTable,
         seq,
         column: expandColumn,
         fixed: fixedType,
@@ -12461,7 +12742,7 @@ function renderRows(h, _vm, $xetable, fixedType, tableData, tableColumn) {
     }
     // 如果是树形表格
     if (isExpandTree) {
-      rows.push(...renderRows(h, _vm, $xetable, fixedType, rowChildren, tableColumn));
+      rows.push(...renderRows(h, _vm, $xeTable, fixedType, rowChildren, tableColumn));
     }
   });
   return rows;
@@ -12547,7 +12828,9 @@ function renderRows(h, _vm, $xetable, fixedType, tableData, tableColumn) {
       emptyOpts,
       mouseConfig,
       mouseOpts,
-      sYOpts
+      sYOpts,
+      rowOpts,
+      isDragRowMove
     } = $xetable;
     // 如果是使用优化模式
     if (fixedType) {
@@ -12628,7 +12911,12 @@ function renderRows(h, _vm, $xetable, fixedType, tableData, tableColumn) {
     /**
      * 内容
      */
-    h('tbody', {
+    rowOpts.drag ? h('transition-group', {
+      props: {
+        tag: 'tbody',
+        name: `vxe-body--row-list${isDragRowMove ? '' : '-disabled'}`
+      }
+    }, renderRows(h, this, $xetable, fixedType, tableData, tableColumn)) : h('tbody', {
       ref: 'tbody'
     }, renderRows(h, this, $xetable, fixedType, tableData, tableColumn))]), h('div', {
       class: 'vxe-table--checkbox-range'
@@ -13779,6 +14067,8 @@ const {
   cellConfig: Object,
   // 行配置信息
   rowConfig: Object,
+  // 可拖拽配置项
+  dragConfig: Object,
   // 列调整配置项
   resizableConfig: Object,
   // 序号配置项
@@ -13856,7 +14146,7 @@ const {
 const {
   getI18n: panel_getI18n,
   getIcon: panel_getIcon,
-  renderEmptyElement
+  renderEmptyElement: panel_renderEmptyElement
 } = core_.VxeUI;
 function updateDropHint(_vm, evnt) {
   const {
@@ -14210,7 +14500,7 @@ const renderPopupPanel = (h, _vm) => {
             column.renderResizeWidth = Math.max(0, Number(value));
           }
         }
-      }) : renderEmptyElement($xeTableCustomPanel)]) : _e(), allowFixed ? h('td', {
+      }) : panel_renderEmptyElement($xeTableCustomPanel)]) : _e(), allowFixed ? h('td', {
         class: 'vxe-table-custom-popup--column-item col--fixed'
       }, [parent ? h('span', '-') : h('vxe-radio-group', {
         props: {
@@ -14322,7 +14612,7 @@ const renderPopupPanel = (h, _vm) => {
               });
             }
           }
-        }) : renderEmptyElement($xeTableCustomPanel)]) : _e(), h('th', {}, panel_getI18n('vxe.custom.setting.colTitle')), allowResizable ? h('th', {}, panel_getI18n('vxe.custom.setting.colResizable')) : _e(), allowFixed ? h('th', {}, panel_getI18n(`vxe.custom.setting.${maxFixedSize ? 'colFixedMax' : 'colFixed'}`, [maxFixedSize])) : _e()])]), h('transition-group', {
+        }) : panel_renderEmptyElement($xeTableCustomPanel)]) : _e(), h('th', {}, panel_getI18n('vxe.custom.setting.colTitle')), allowResizable ? h('th', {}, panel_getI18n('vxe.custom.setting.colResizable')) : _e(), allowFixed ? h('th', {}, panel_getI18n(`vxe.custom.setting.${maxFixedSize ? 'colFixedMax' : 'colFixed'}`, [maxFixedSize])) : _e()])]), h('transition-group', {
           class: 'vxe-table-custom--body',
           props: {
             tag: 'tbody',
@@ -14361,7 +14651,7 @@ const renderPopupPanel = (h, _vm) => {
         })]);
       }
     }
-  }) : renderEmptyElement($xeTableCustomPanel);
+  }) : panel_renderEmptyElement($xeTableCustomPanel);
 };
 /* harmony default export */ var panel = ({
   name: 'VxeTableCustomPanel',
@@ -17313,9 +17603,11 @@ function handleInsertRowAt(_vm, records, row, isInsertNextRow) {
      * 清除激活的编辑
      */
     _clearEdit(evnt) {
+      const $xeTable = this;
+      const reactData = $xeTable;
       const {
         editStore
-      } = this;
+      } = reactData;
       const {
         actived,
         focused
@@ -17324,6 +17616,7 @@ function handleInsertRowAt(_vm, records, row, isInsertNextRow) {
         row,
         column
       } = actived;
+      const validOpts = $xeTable.validOpts;
       if (row || column) {
         this._syncActivedCell();
         actived.args = null;
@@ -17341,9 +17634,11 @@ function handleInsertRowAt(_vm, records, row, isInsertNextRow) {
       }
       focused.row = null;
       focused.column = null;
-      if (mixin_getConfig().cellVaildMode === 'obsolete') {
-        if (this.clearValidate) {
-          return this.clearValidate();
+      if (validOpts.autoClear) {
+        if (validOpts.msgMode !== 'full' || mixin_getConfig().cellVaildMode === 'obsolete') {
+          if (this.clearValidate) {
+            return this.clearValidate();
+          }
         }
       }
       return this.$nextTick();
@@ -20870,6 +21165,9 @@ function handleUupdateResize(_vm) {
         isHeader: false,
         isFooter: false
       },
+      isDragRowMove: false,
+      dragRow: null,
+      dragTipText: '',
       _isLoading: false
     };
   },
@@ -20932,6 +21230,9 @@ function handleUupdateResize(_vm) {
     computeRowOpts() {
       return Object.assign({}, table_getConfig().table.rowConfig, this.rowConfig);
     },
+    computeDragOpts() {
+      return Object.assign({}, table_getConfig().table.dragConfig, this.dragConfig);
+    },
     resizeOpts() {
       return this.computeResizeOpts;
     },
@@ -21850,9 +22151,16 @@ function handleUupdateResize(_vm) {
         ctxMenuStore,
         ctxMenuOpts
       }
-    }) : _e(), h('div', {}, [
+    }) : _e(),
+    /**
+       * 拖拽提示
+       */
+    rowOpts.drag ? h('div', {
+      ref: 'refRowDragTipElem',
+      class: 'vxe-table--row-drag-hint'
+    }, table_getI18n('vxe.table.dragTip', [this.dragTipText])) : _e(), h('div', {}, [
     /**
-     * 通用提示
+     * 提示相关
      */
     VxeUITooltipComponent ? h(VxeUITooltipComponent, {
       key: 'ctp',
@@ -25286,7 +25594,8 @@ const Toolbar = VxeToolbar;
       customClose: '关闭',
       customCancel: '取消',
       customRestore: '恢复默认',
-      maxFixedCol: '最大冻结列的数量不能超过 {0} 个'
+      maxFixedCol: '最大冻结列的数量不能超过 {0} 个',
+      dragTip: '移动：{0}'
     },
     grid: {
       selectOneRecord: '请至少选择一条记录！',
@@ -25337,7 +25646,7 @@ const Toolbar = VxeToolbar;
       cstmCancel: '取消',
       cstmConfirm: '确定',
       cstmConfirmRestore: '请确认是否恢复成默认列配置？',
-      cstmDragTarget: '移动目标：{0}',
+      cstmDragTarget: '移动：{0}',
       setting: {
         colSort: '排序',
         sortHelpTip: '点击并拖动图标可以调整列的排序',