vxe-table 3.11.19 → 3.11.22

package/lib/index.umd.js

@@ -2220,7 +2220,7 @@ function getClass(property, params) {
 ;// CONCATENATED MODULE: ./packages/ui/index.ts
 
 
-const version = "3.11.19";
+const version = "3.11.22";
 core_.VxeUI.version = version;
 core_.VxeUI.tableVersion = version;
 core_.VxeUI.setConfig({
@@ -2304,6 +2304,12 @@ core_.VxeUI.setConfig({
         lockView: true,
         resize: true,
         escClosable: true
+      },
+      drawerOptions: {
+        mask: true,
+        lockView: true,
+        escClosable: true,
+        resize: true
       }
     },
     sortConfig: {
@@ -2462,6 +2468,9 @@ core_.VxeUI.setIcon({
   TABLE_MENU_OPTIONS: iconPrefix + 'arrow-right',
   TABLE_DRAG_ROW: iconPrefix + 'drag-handle',
   TABLE_DRAG_COLUMN: iconPrefix + 'drag-handle',
+  TABLE_DRAG_STATUS_ROW: iconPrefix + 'sort',
+  TABLE_DRAG_STATUS_COLUMN: iconPrefix + 'swap',
+  TABLE_DRAG_DISABLED: iconPrefix + 'no-drop',
   // toolbar
   TOOLBAR_TOOLS_REFRESH: iconPrefix + 'repeat',
   TOOLBAR_TOOLS_REFRESH_LOADING: iconPrefix + 'repeat roll',
@@ -2779,7 +2788,7 @@ function isNodeElement(elem) {
 const {
   log: log_log
 } = core_.VxeUI;
-const log_version = `table v${"3.11.19"}`;
+const log_version = `table v${"3.11.22"}`;
 const warnLog = log_log.create('warn', log_version);
 const errLog = log_log.create('error', log_version);
 ;// CONCATENATED MODULE: ./packages/table/src/columnInfo.ts
@@ -3593,12 +3602,17 @@ function renderCellBaseVNs(h, params, content) {
   const rowDragOpts = $table.computeRowDragOpts;
   const {
     showIcon,
+    isCrossDrag,
     visibleMethod
   } = rowDragOpts;
   const rVisibleMethod = visibleMethod || (dragConfig ? dragConfig.rowVisibleMethod : null);
   const vns = external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().isArray(content) ? content : [content];
   if (dragSort && rowOpts.drag && (showIcon || (dragConfig ? dragConfig.showRowIcon : false)) && (!rVisibleMethod || rVisibleMethod(params))) {
-    if (!treeConfig || !level) {
+    if (treeConfig) {
+      if (isCrossDrag || !level) {
+        vns.unshift(renderCellDragIcon(h, params));
+      }
+    } else {
       vns.unshift(renderCellDragIcon(h, params));
     }
   }
@@ -5334,7 +5348,7 @@ const updateColDropTipContent = ($xeTable, tdEl) => {
   }
   reactData.dragTipText = tipContent;
 };
-function showDropTip($xeTable, evnt, trEl, thEl, dragPos) {
+function showDropTip($xeTable, evnt, trEl, thEl, showLine, dragPos) {
   const reactData = $xeTable;
   const el = $xeTable.$refs.refElem;
   if (!el) {
@@ -5348,26 +5362,30 @@ function showDropTip($xeTable, evnt, trEl, thEl, dragPos) {
   if (trEl) {
     const rdLineEl = $xeTable.$refs.refDragRowLineElem;
     if (rdLineEl) {
-      const trRect = trEl.getBoundingClientRect();
-      let top = Math.max(1, trRect.y - wrapperRect.y);
-      if (dragPos === 'bottom') {
-        top = Math.min(wrapperRect.height - 1, trRect.y - wrapperRect.y + trRect.height);
+      if (showLine) {
+        const trRect = trEl.getBoundingClientRect();
+        rdLineEl.style.display = 'block';
+        rdLineEl.style.top = `${Math.max(1, trRect.y - wrapperRect.y)}px`;
+        rdLineEl.style.height = `${trRect.height}px`;
+        rdLineEl.style.width = `${wrapperRect.width - scrollbarWidth}px`;
+        rdLineEl.setAttribute('drag-pos', dragPos);
+      } else {
+        rdLineEl.style.display = '';
       }
-      rdLineEl.style.top = `${top}px`;
-      rdLineEl.style.width = `${wrapperRect.width - scrollbarWidth}px`;
-      rdLineEl.style.display = 'block';
     }
   } else if (thEl) {
     const cdLineEl = $xeTable.$refs.refDragColLineElem;
     if (cdLineEl) {
-      const thRect = thEl.getBoundingClientRect();
-      let left = Math.max(1, thRect.x - wrapperRect.x);
-      if (dragPos === 'right') {
-        left = Math.min(wrapperRect.width - 2, thRect.x - wrapperRect.x + thRect.width);
+      if (showLine) {
+        const thRect = thEl.getBoundingClientRect();
+        cdLineEl.style.display = 'block';
+        cdLineEl.style.left = `${Math.max(1, thRect.x - wrapperRect.x)}px`;
+        cdLineEl.style.width = `${thRect.width}px`;
+        cdLineEl.style.height = `${wrapperRect.height - scrollbarHeight}px`;
+        cdLineEl.setAttribute('drag-pos', dragPos);
+      } else {
+        cdLineEl.style.display = '';
       }
-      cdLineEl.style.left = `${left}px`;
-      cdLineEl.style.height = `${wrapperRect.height - scrollbarHeight}px`;
-      cdLineEl.style.display = 'block';
     }
   }
   const rdTipEl = $xeTable.$refs.refDragTipElem;
@@ -5375,6 +5393,7 @@ function showDropTip($xeTable, evnt, trEl, thEl, dragPos) {
     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`;
+    rdTipEl.setAttribute('drag-status', showLine ? 'normal' : 'disabled');
   }
 }
 const hideDropTip = $xeTable => {
@@ -5926,6 +5945,7 @@ const Methods = {
         };
       }
       if (isSource) {
+        cacheItem.level = level;
         cacheItem.index = treeConfig && parent ? -1 : index;
         fullDataRowIdMaps[rowid] = cacheItem;
       }
@@ -6729,6 +6749,17 @@ const Methods = {
       tableColumn: this.tableColumn.slice(0)
     };
   },
+  /**
+   * 获取表格的全量列
+   */
+  getFullColumns() {
+    const $xeTable = this;
+    const internalData = $xeTable;
+    const {
+      collectColumn
+    } = internalData;
+    return collectColumn.slice(0);
+  },
   /**
    * 获取数据，和 data 的行为一致，也可以指定索引获取数据
    */
@@ -7259,6 +7290,38 @@ const Methods = {
       footerData: footerTableData.slice(0)
     };
   },
+  /**
+   * 获取表格的全量数据，如果是 tree-config 则返回带层级的树结构
+   */
+  getFullData() {
+    const $xeTable = this;
+    const props = $xeTable;
+    const internalData = $xeTable;
+    const {
+      treeConfig
+    } = props;
+    const {
+      tableFullData,
+      tableFullTreeData
+    } = internalData;
+    if (treeConfig) {
+      const treeOpts = $xeTable.computeTreeOpts;
+      const {
+        transform,
+        mapChildrenField
+      } = treeOpts;
+      const childrenField = treeOpts.children || treeOpts.childrenField;
+      if (transform) {
+        return external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().toArrayTree(external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().toTreeArray(tableFullTreeData, {
+          children: mapChildrenField
+        }), {
+          children: childrenField
+        });
+      }
+      return tableFullTreeData.slice(0);
+    }
+    return tableFullData.slice(0);
+  },
   /**
    * 处理数据加载默认行为
    * 默认执行一次，除非被重置
@@ -7460,9 +7523,12 @@ const Methods = {
     return this.refreshColumn(true);
   },
   handleCustomRestore(storeData) {
+    const $xetable = this;
+    const reactData = $xetable;
+    const internalData = $xetable;
     let {
       collectColumn
-    } = this;
+    } = internalData;
     const {
       resizableData,
       sortData,
@@ -7494,9 +7560,12 @@ const Methods = {
       // 如果自定义了顺序
       if (hasCustomSort) {
         collectColumn = external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().orderBy(collectColumn, 'renderSortNumber');
-        this.collectColumn = collectColumn;
-        this.tableFullColumn = getColumnList(collectColumn);
+        internalData.collectColumn = collectColumn;
+        internalData.tableFullColumn = getColumnList(collectColumn);
       }
+      reactData.isCustomStatus = true;
+    } else {
+      reactData.isCustomStatus = false;
     }
   },
   /**
@@ -10768,20 +10837,26 @@ const Methods = {
     } = props;
     const rowDragOpts = $xeTable.computeRowDragOpts;
     const {
+      fullAllDataRowIdData
+    } = internalData;
+    const {
+      isCrossDrag,
+      isSelfToChildDrag,
       dragEndMethod
     } = rowDragOpts;
     const treeOpts = $xeTable.computeTreeOpts;
     const {
-      transform
+      transform,
+      mapChildrenField,
+      parentField
     } = treeOpts;
+    const childrenField = treeOpts.children || treeOpts.childrenField;
     const {
       dragRow
     } = reactData;
     const {
       afterFullData,
-      afterTreeFullData,
       tableFullData,
-      tableFullTreeData,
       prevDragRow,
       prevDragPos
     } = internalData;
@@ -10801,26 +10876,102 @@ const Methods = {
           }
           let oafIndex = -1;
           let nafIndex = -1;
+          // 如果为树结构
           if (treeConfig) {
-            // 移出源位置
-            oafIndex = $xeTable.findRowIndexOf(afterTreeFullData, dragRow);
-            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;
-            const ntfIndex = ptfIndex + dragOffsetIndex;
-            afterTreeFullData.splice(nafIndex, 0, dragRow);
-            tableFullTreeData.splice(ntfIndex, 0, dragRow);
+            if (transform) {
+              // 移出源位置
+              const oldRowid = getRowid($xeTable, dragRow);
+              const oldRest = fullAllDataRowIdData[oldRowid];
+              const newRowid = getRowid($xeTable, prevDragRow);
+              const newRest = fullAllDataRowIdData[newRowid];
+              if (oldRest && newRest) {
+                const {
+                  level: oldLevel
+                } = oldRest;
+                const {
+                  level: newLevel
+                } = newRest;
+                const oldAllMaps = {};
+                external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().eachTree([dragRow], item => {
+                  oldAllMaps[getRowid($xeTable, item)] = item;
+                }, {
+                  children: mapChildrenField
+                });
+                let isSelfToChildStatus = false;
+                if (oldLevel && newLevel) {
+                  // 子到子
+                  if (!isCrossDrag) {
+                    return;
+                  }
+                  if (oldAllMaps[newRowid]) {
+                    if (!isSelfToChildDrag) {
+                      isSelfToChildStatus = true;
+                      if (core_.VxeUI.modal) {
+                        core_.VxeUI.modal.message({
+                          status: 'error',
+                          content: methods_getI18n('vxe.error.treeDragChild')
+                        });
+                      }
+                      return;
+                    }
+                  }
+                } else if (oldLevel) {
+                  // 子到根
+                  if (!isCrossDrag) {
+                    return;
+                  }
+                } else if (newLevel) {
+                  // 根到子
+                  if (!isCrossDrag) {
+                    return;
+                  }
+                  if (oldAllMaps[newRowid]) {
+                    isSelfToChildStatus = true;
+                    if (!isSelfToChildDrag) {
+                      if (core_.VxeUI.modal) {
+                        core_.VxeUI.modal.message({
+                          status: 'error',
+                          content: methods_getI18n('vxe.error.treeDragChild')
+                        });
+                      }
+                      return;
+                    }
+                  }
+                } else {
+                  // 根到根
+                }
+                const fullList = external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().toTreeArray(internalData.afterTreeFullData, {
+                  children: childrenField
+                });
+                // 移出
+                const otfIndex = $xeTable.findRowIndexOf(fullList, dragRow);
+                fullList.splice(otfIndex, 1);
+                // 插入
+                const ptfIndex = $xeTable.findRowIndexOf(fullList, prevDragRow);
+                const ntfIndex = ptfIndex + dragOffsetIndex;
+                fullList.splice(ntfIndex, 0, dragRow);
+                // 改变层级
+                if (isSelfToChildStatus && isSelfToChildDrag) {
+                  external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().each(dragRow[childrenField], childRow => {
+                    childRow[parentField] = dragRow[parentField];
+                  });
+                }
+                dragRow[parentField] = prevDragRow[parentField];
+                internalData.tableFullTreeData = external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().toArrayTree(fullList, {
+                  key: treeOpts.rowField,
+                  parentKey: treeOpts.parentField,
+                  children: childrenField,
+                  mapChildren: treeOpts.mapChildrenField
+                });
+              }
+            }
           } else {
-            // 移出源位置
+            // 移出
             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);
             nafIndex = pafIndex + dragOffsetIndex;
@@ -10829,9 +10980,9 @@ const Methods = {
             tableFullData.splice(ntfIndex, 0, dragRow);
           }
           reactData.isDragRowMove = true;
-          $xeTable.cacheRowMap();
-          $xeTable.updateScrollYStatus();
           $xeTable.handleTableData(treeConfig && transform);
+          $xeTable.cacheRowMap(true);
+          $xeTable.updateScrollYStatus();
           if (!(treeConfig && transform)) {
             $xeTable.updateAfterDataIndex();
           }
@@ -10866,29 +11017,44 @@ const Methods = {
   },
   handleRowDragDragoverEvent(evnt) {
     const $xeTable = this;
+    const props = $xeTable;
     const internalData = $xeTable;
     const reactData = $xeTable;
+    const {
+      treeConfig
+    } = props;
+    const {
+      fullAllDataRowIdData
+    } = internalData;
     const {
       dragRow
     } = reactData;
+    const rowDragOpts = $xeTable.computeRowDragOpts;
+    const {
+      isCrossDrag
+    } = rowDragOpts;
     if (!dragRow) {
       evnt.preventDefault();
       return;
     }
     const trEl = evnt.currentTarget;
-    const rowid = trEl.getAttribute('rowid');
-    const row = $xeTable.getRowById(rowid);
-    if (row) {
-      evnt.preventDefault();
+    const rowid = trEl.getAttribute('rowid') || '';
+    const rest = fullAllDataRowIdData[rowid];
+    if (rest) {
+      const row = rest.row;
       evnt.preventDefault();
       const {
         dragRow
       } = reactData;
       const offsetY = evnt.clientY - trEl.getBoundingClientRect().y;
       const dragPos = offsetY < trEl.clientHeight / 2 ? 'top' : 'bottom';
+      if ($xeTable.eqRow(dragRow, row) || !isCrossDrag && treeConfig && rest.level) {
+        showDropTip($xeTable, evnt, trEl, null, false, dragPos);
+        return;
+      }
       internalData.prevDragRow = row;
       internalData.prevDragPos = dragPos;
-      showDropTip($xeTable, evnt, trEl, null, dragPos);
+      showDropTip($xeTable, evnt, trEl, null, true, dragPos);
       $xeTable.dispatchEvent('row-dragover', {
         oldRow: dragRow,
         targetRow: row,
@@ -11057,9 +11223,13 @@ const Methods = {
       } = reactData;
       const offsetX = evnt.clientX - thEl.getBoundingClientRect().x;
       const dragPos = offsetX < thEl.clientWidth / 2 ? 'left' : 'right';
+      if (dragCol.id === column.id || column.parentId) {
+        showDropTip($xeTable, evnt, null, thEl, false, dragPos);
+        return;
+      }
       internalData.prevDragCol = column;
       internalData.prevDragPos = dragPos;
-      showDropTip($xeTable, evnt, null, thEl, dragPos);
+      showDropTip($xeTable, evnt, null, thEl, true, dragPos);
       $xeTable.dispatchEvent('column-dragover', {
         oldColumn: dragCol,
         targetColumn: column,
@@ -13567,12 +13737,12 @@ function renderRows(h, _vm, $xeTable, fixedType, tableData, tableColumn) {
     if (editConfig) {
       isNewRow = $xeTable.isInsertByRow(row);
     }
-    if (treeConfig && !scrollYLoad && !treeOpts.transform) {
+    if (treeConfig && !scrollYLoad && !transform) {
       rowChildren = row[childrenField];
       isExpandTree = rowChildren && rowChildren.length && !!treeExpandedMaps[rowid];
     }
     // 拖拽行事件
-    if (rowOpts.drag && !rowLevel) {
+    if (rowOpts.drag && (!treeConfig || transform)) {
       trOn.dragstart = evnt => {
         $xeTable.handleRowDragDragstartEvent(evnt);
       };
@@ -14180,7 +14350,7 @@ const header_renderRows = (h, _vm, cols, $rowIndex) => {
       thOns.mousedown = evnt => $xetable.triggerHeaderCellMousedownEvent(evnt, params);
     }
     // 拖拽行事件
-    if (columnOpts.drag && !column.parentId) {
+    if (columnOpts.drag) {
       thOns.dragstart = $xetable.handleHeaderCellDragDragstartEvent;
       thOns.dragend = $xetable.handleHeaderCellDragDragendEvent;
       thOns.dragover = $xetable.handleHeaderCellDragDragoverEvent;
@@ -15237,17 +15407,17 @@ function updateDropHint(_vm, evnt) {
 }
 const renderSimplePanel = (h, _vm) => {
   const VxeUIButtonComponent = core_.VxeUI.getComponent('VxeButton');
+  const props = _vm;
   const $xeTable = _vm.$xeTable;
+  const reactData = $xeTable;
   const {
-    _e,
-    customStore,
-    dragColumn
-  } = _vm;
+    customStore
+  } = props;
   const {
-    customColumnList,
-    customOpts,
-    isMaxFixedColumn
-  } = $xeTable;
+    isCustomStatus,
+    customColumnList
+  } = reactData;
+  const customOpts = $xeTable.computeCustomOpts;
   const {
     maxHeight
   } = customStore;
@@ -15260,6 +15430,7 @@ const renderSimplePanel = (h, _vm) => {
     trigger,
     placement
   } = customOpts;
+  const isMaxFixedColumn = $xeTable.computeIsMaxFixedColumn;
   const slots = customOpts.slots || {};
   const headerSlot = slots.header;
   const topSlot = slots.top;
@@ -15268,19 +15439,21 @@ const renderSimplePanel = (h, _vm) => {
   const footerSlot = slots.footer;
   const colVNs = [];
   const customWrapperOns = {};
+  const isAllChecked = customStore.isAll;
+  const isAllIndeterminate = customStore.isIndeterminate;
+  const dragColumn = _vm.dragColumn;
   // hover 触发
   if (trigger === 'hover') {
     customWrapperOns.mouseenter = _vm.handleWrapperMouseenterEvent;
     customWrapperOns.mouseleave = _vm.handleWrapperMouseleaveEvent;
   }
-  const isAllChecked = customStore.isAll;
-  const isAllIndeterminate = customStore.isIndeterminate;
   const params = {
     $table: $xeTable,
     $grid: $xeTable.xegrid,
     columns: customColumnList,
     isAllChecked,
-    isAllIndeterminate
+    isAllIndeterminate,
+    isCustomStatus
   };
   external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().eachTree(customColumnList, (column, index, items, path, parent) => {
     const isVisible = visibleMethod ? visibleMethod({
@@ -15327,7 +15500,7 @@ const renderSimplePanel = (h, _vm) => {
         }
       }, [h('span', {
         class: ['vxe-checkbox--icon', isIndeterminate ? panel_getIcon().TABLE_CHECKBOX_INDETERMINATE : isChecked ? panel_getIcon().TABLE_CHECKBOX_CHECKED : panel_getIcon().TABLE_CHECKBOX_UNCHECKED]
-      })]) : _e(), allowSort && column.level === 1 ? h('div', {
+      })]) : panel_renderEmptyElement($xeTable), allowSort && column.level === 1 ? h('div', {
         class: 'vxe-table-custom--sort-option'
       }, [h('span', {
         class: ['vxe-table-custom--sort-btn', {
@@ -15342,7 +15515,7 @@ const renderSimplePanel = (h, _vm) => {
         }
       }, [h('i', {
         class: panel_getIcon().TABLE_CUSTOM_SORT
-      })])]) : _e(), column.type === 'html' ? h('div', {
+      })])]) : panel_renderEmptyElement($xeTable), column.type === 'html' ? h('div', {
         key: '1',
         class: 'vxe-table-custom--checkbox-label',
         domProps: {
@@ -15382,7 +15555,7 @@ const renderSimplePanel = (h, _vm) => {
             _vm.changeFixedOption(column, 'right');
           }
         }
-      })]) : _e()]));
+      })]) : panel_renderEmptyElement($xeTable)]));
     }
   });
   return h('div', {
@@ -15442,7 +15615,8 @@ const renderSimplePanel = (h, _vm) => {
   }, [h(VxeUIButtonComponent, {
     props: {
       mode: 'text',
-      content: customOpts.resetButtonText || panel_getI18n('vxe.table.customRestore')
+      content: customOpts.resetButtonText || panel_getI18n('vxe.table.customRestore'),
+      disabled: !isCustomStatus
     },
     on: {
       click: _vm.resetCustomEvent
@@ -15463,7 +15637,7 @@ const renderSimplePanel = (h, _vm) => {
     on: {
       click: _vm.cancelCustomEvent
     }
-  }), customOpts.immediate ? _e() : h(VxeUIButtonComponent, {
+  }), customOpts.immediate ? panel_renderEmptyElement($xeTable) : h(VxeUIButtonComponent, {
     props: {
       mode: 'text',
       status: 'primary',
@@ -15481,18 +15655,21 @@ const renderPopupPanel = (h, _vm) => {
   const VxeUINumberInputComponent = core_.VxeUI.getComponent('VxeInput');
   const VxeUITooltipComponent = core_.VxeUI.getComponent('VxeTooltip');
   const $xeTableCustomPanel = _vm;
+  const props = _vm;
   const $xeTable = _vm.$xeTable;
+  const tableProps = $xeTable;
+  const reactData = $xeTable;
   const {
-    _e,
     customStore
-  } = _vm;
+  } = props;
   const {
-    resizable: allResizable,
-    customOpts,
-    customColumnList,
-    columnOpts,
-    isMaxFixedColumn
-  } = $xeTable;
+    resizable: allResizable
+  } = tableProps;
+  const {
+    isCustomStatus,
+    customColumnList
+  } = reactData;
+  const customOpts = $xeTable.computeCustomOpts;
   const {
     mode,
     modalOptions,
@@ -15504,6 +15681,7 @@ const renderPopupPanel = (h, _vm) => {
     checkMethod,
     visibleMethod
   } = customOpts;
+  const columnOpts = $xeTable.computeColumnOpts;
   const {
     maxFixedSize
   } = columnOpts;
@@ -15514,6 +15692,7 @@ const renderPopupPanel = (h, _vm) => {
   } = resizableOpts;
   const modalOpts = Object.assign({}, modalOptions);
   const drawerOpts = Object.assign({}, drawerOptions);
+  const isMaxFixedColumn = $xeTable.computeIsMaxFixedColumn;
   const slots = customOpts.slots || {};
   const headerSlot = slots.header;
   const topSlot = slots.top;
@@ -15523,12 +15702,14 @@ const renderPopupPanel = (h, _vm) => {
   const trVNs = [];
   const isAllChecked = customStore.isAll;
   const isAllIndeterminate = customStore.isIndeterminate;
+  const dragColumn = _vm.dragColumn;
   const params = {
     $table: $xeTable,
     $grid: $xeTable.xegrid,
     columns: customColumnList,
     isAllChecked,
-    isAllIndeterminate
+    isAllIndeterminate,
+    isCustomStatus
   };
   external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().eachTree(customColumnList, (column, index, items, path, parent) => {
     const isVisible = visibleMethod ? visibleMethod({
@@ -15594,7 +15775,7 @@ const renderPopupPanel = (h, _vm) => {
         }
       }, [h('span', {
         class: ['vxe-checkbox--icon', isIndeterminate ? panel_getIcon().TABLE_CHECKBOX_INDETERMINATE : isChecked ? panel_getIcon().TABLE_CHECKBOX_CHECKED : panel_getIcon().TABLE_CHECKBOX_UNCHECKED]
-      })])]) : _e(), allowSort ? h('td', {
+      })])]) : panel_renderEmptyElement($xeTable), allowSort ? h('td', {
         class: 'vxe-table-custom-popup--column-item col--sort'
       }, [column.level === 1 ? h('span', {
         class: ['vxe-table-custom-popup--column-sort-btn', {
@@ -15609,7 +15790,7 @@ const renderPopupPanel = (h, _vm) => {
         }
       }, [h('i', {
         class: panel_getIcon().TABLE_CUSTOM_SORT
-      })]) : h('span', '-')]) : _e(), h('td', {
+      })]) : h('span', '-')]) : panel_renderEmptyElement($xeTable), h('td', {
         class: 'vxe-table-custom-popup--column-item col--name'
       }, [column.type === 'html' ? h('div', {
         key: '1',
@@ -15638,7 +15819,7 @@ const renderPopupPanel = (h, _vm) => {
             column.renderResizeWidth = Math.max(0, Number(value));
           }
         }
-      }) : panel_renderEmptyElement($xeTableCustomPanel)]) : _e(), allowFixed ? h('td', {
+      }) : panel_renderEmptyElement($xeTableCustomPanel)]) : panel_renderEmptyElement($xeTable), allowFixed ? h('td', {
         class: 'vxe-table-custom-popup--column-item col--fixed'
       }, [parent ? h('span', '-') : h('vxe-radio-group', {
         props: {
@@ -15665,7 +15846,7 @@ const renderPopupPanel = (h, _vm) => {
             column.renderFixed = value;
           }
         }
-      })]) : _e()]));
+      })]) : panel_renderEmptyElement($xeTable)]));
     }
   });
   const scopedSlots = {
@@ -15682,15 +15863,15 @@ const renderPopupPanel = (h, _vm) => {
         class: 'vxe-table-custom-popup--table-wrapper'
       }, [h('table', {}, [h('colgroup', {}, [allowVisible ? h('col', {
         class: 'vxe-table-custom-popup--table-col-seq'
-      }) : _e(), allowSort ? h('col', {
+      }) : panel_renderEmptyElement($xeTable), allowSort ? h('col', {
         class: 'vxe-table-custom-popup--table-col-sort'
-      }) : _e(), h('col', {
+      }) : panel_renderEmptyElement($xeTable), h('col', {
         class: 'vxe-table-custom-popup--table-col-title'
       }), allowResizable ? h('col', {
         class: 'vxe-table-custom-popup--table-col-width'
-      }) : _e(), allowFixed ? h('col', {
+      }) : panel_renderEmptyElement($xeTable), allowFixed ? h('col', {
         class: 'vxe-table-custom-popup--table-col-fixed'
-      }) : _e()]), h('thead', {}, [h('tr', {}, [allowVisible ? h('th', {}, [h('div', {
+      }) : panel_renderEmptyElement($xeTable)]), h('thead', {}, [h('tr', {}, [allowVisible ? h('th', {}, [h('div', {
         class: ['vxe-table-custom--checkbox-option', {
           'is--checked': isAllChecked,
           'is--indeterminate': isAllIndeterminate
@@ -15705,7 +15886,7 @@ const renderPopupPanel = (h, _vm) => {
         class: ['vxe-checkbox--icon', isAllIndeterminate ? panel_getIcon().TABLE_CHECKBOX_INDETERMINATE : isAllChecked ? panel_getIcon().TABLE_CHECKBOX_CHECKED : panel_getIcon().TABLE_CHECKBOX_UNCHECKED]
       }), h('span', {
         class: 'vxe-checkbox--label'
-      }, panel_getI18n('vxe.toolbar.customAll'))])]) : _e(), allowSort ? h('th', {}, [h('span', {
+      }, panel_getI18n('vxe.toolbar.customAll'))])]) : panel_renderEmptyElement($xeTable), allowSort ? h('th', {}, [h('span', {
         class: 'vxe-table-custom-popup--table-sort-help-title'
       }, panel_getI18n('vxe.custom.setting.colSort')), VxeUITooltipComponent ? h(VxeUITooltipComponent, {
         props: {
@@ -15720,7 +15901,7 @@ const renderPopupPanel = (h, _vm) => {
             });
           }
         }
-      }) : 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', {
+      }) : panel_renderEmptyElement($xeTableCustomPanel)]) : panel_renderEmptyElement($xeTable), h('th', {}, panel_getI18n('vxe.custom.setting.colTitle')), allowResizable ? h('th', {}, panel_getI18n('vxe.custom.setting.colResizable')) : panel_renderEmptyElement($xeTable), allowFixed ? h('th', {}, panel_getI18n(`vxe.custom.setting.${maxFixedSize ? 'colFixedMax' : 'colFixed'}`, [maxFixedSize])) : panel_renderEmptyElement($xeTable)])]), h('transition-group', {
         class: 'vxe-table-custom--panel-list',
         props: {
           tag: 'tbody',
@@ -15731,7 +15912,7 @@ const renderPopupPanel = (h, _vm) => {
       }, $xeTable.callSlot(bottomSlot, params, h)) : panel_renderEmptyElement($xeTable), h('div', {
         ref: 'dragHintElemRef',
         class: 'vxe-table-custom-popup--drag-hint'
-      }, panel_getI18n('vxe.custom.cstmDragTarget', [_vm.dragColumn ? _vm.dragColumn.getTitle() : '']))]);
+      }, panel_getI18n('vxe.custom.cstmDragTarget', [dragColumn ? dragColumn.getTitle() : '']))]);
     },
     footer: () => {
       if (footerSlot) {
@@ -15741,7 +15922,8 @@ const renderPopupPanel = (h, _vm) => {
         class: 'vxe-table-custom-popup--footer'
       }, [h(VxeUIButtonComponent, {
         props: {
-          content: customOpts.resetButtonText || panel_getI18n('vxe.custom.cstmRestore')
+          content: customOpts.resetButtonText || panel_getI18n('vxe.custom.cstmRestore'),
+          disabled: !isCustomStatus
         },
         on: {
           click: _vm.resetCustomEvent
@@ -15776,7 +15958,9 @@ const renderPopupPanel = (h, _vm) => {
         title: drawerOpts.title || panel_getI18n('vxe.custom.cstmTitle'),
         width: drawerOpts.width || Math.min(880, Math.floor(document.documentElement.clientWidth * 0.6)),
         position: drawerOpts.position,
+        resize: !!drawerOpts.resize,
         escClosable: !!drawerOpts.escClosable,
+        maskClosable: !!drawerOpts.maskClosable,
         destroyOnClose: true,
         showFooter: true
       },
@@ -15805,6 +15989,7 @@ const renderPopupPanel = (h, _vm) => {
       lockView: modalOpts.lockView,
       resize: modalOpts.resize,
       escClosable: !!modalOpts.escClosable,
+      maskClosable: !!modalOpts.maskClosable,
       destroyOnClose: true,
       showFooter: true
     },
@@ -21964,6 +22149,7 @@ function validErrorRuleValue(rule, val) {
           column.visible = column.renderVisible;
         }
       });
+      reactData.isCustomStatus = true;
       reactData.isDragColMove = true;
       setTimeout(() => {
         reactData.isDragColMove = false;
@@ -22012,10 +22198,13 @@ function validErrorRuleValue(rule, val) {
       return $xeTable.$nextTick();
     },
     _resetCustom(options) {
+      const $xeTable = this;
+      const reactData = $xeTable;
+      const internalData = $xeTable;
       const {
         collectColumn,
         customOpts
-      } = this;
+      } = internalData;
       const {
         checkMethod
       } = customOpts;
@@ -22042,8 +22231,9 @@ function validErrorRuleValue(rule, val) {
         }
         column.renderResizeWidth = column.renderWidth;
       });
-      this.saveCustomStore('reset');
-      return this.handleCustom();
+      reactData.isCustomStatus = false;
+      $xeTable.saveCustomStore('reset');
+      return $xeTable.handleCustom();
     },
     _toggleCustomAllCheckbox() {
       const {
@@ -22203,6 +22393,7 @@ function validErrorRuleValue(rule, val) {
 
 const {
   getConfig: table_getConfig,
+  getIcon: table_getIcon,
   getI18n: table_getI18n,
   renderer: table_renderer,
   globalResize: table_globalResize,
@@ -22316,21 +22507,41 @@ const renderDragTipContents = (h, $xeTable) => {
   return [h('span', dragTipText)];
 };
 const renderDragTip = (h, $xeTable) => {
+  const reactData = $xeTable;
+  const {
+    dragRow
+  } = reactData;
   const rowOpts = $xeTable.computeRowOpts;
   const columnOpts = $xeTable.computeColumnOpts;
+  const rowDragOpts = $xeTable.computeRowDragOpts;
+  const columnDragOpts = $xeTable.computeColumnDragOpts;
   if (rowOpts.drag || columnOpts.drag) {
     return h('div', {
       class: 'vxe-table--drag-wrapper'
     }, [h('div', {
       ref: 'refDragRowLineElem',
-      class: 'vxe-table--drag-row-line'
+      class: ['vxe-table--drag-row-line', {
+        'is--guides': rowDragOpts.showGuidesStatus
+      }]
     }), h('div', {
       ref: 'refDragColLineElem',
-      class: 'vxe-table--drag-col-line'
+      class: ['vxe-table--drag-col-line', {
+        'is--guides': columnDragOpts.showGuidesStatus
+      }]
     }), h('div', {
       ref: 'refDragTipElem',
       class: 'vxe-table--drag-sort-tip'
-    }, renderDragTipContents(h, $xeTable))]);
+    }, [h('div', {
+      class: 'vxe-table--drag-sort-tip-wrapper'
+    }, [h('div', {
+      class: 'vxe-table--drag-sort-tip-status'
+    }, [h('span', {
+      class: ['vxe-table--drag-sort-tip-normal-status', dragRow ? table_getIcon().TABLE_DRAG_STATUS_ROW : table_getIcon().TABLE_DRAG_STATUS_COLUMN]
+    }), h('span', {
+      class: ['vxe-table--drag-sort-tip-disabled-status', table_getIcon().TABLE_DRAG_DISABLED]
+    })]), h('div', {
+      class: 'vxe-table--drag-sort-tip-content'
+    }, renderDragTipContents(h, $xeTable))])])]);
   }
   return table_renderEmptyElement($xeTable);
 };
@@ -22580,6 +22791,7 @@ function handleUupdateResize(_vm) {
         isFooter: false
       },
       scrollVMLoading: false,
+      isCustomStatus: false,
       isDragRowMove: false,
       dragRow: null,
       isDragColMove: false,
@@ -27047,6 +27259,8 @@ const Toolbar = VxeToolbar;
       notExp: '该浏览器不支持导入/导出功能',
       impFields: '导入失败，请检查字段名和数据格式是否正确',
       treeNotImp: '树表格不支持导入',
+      treeCrossDrag: '只能拖拽第一层级的数据',
+      treeDragChild: '父级数据不能拖拽到子级中',
       reqPlugin: '可选扩展插件 "{1}" https://vxeui.com/other{0}/#/{1}/install'
     },
     table: {