vxe-table 3.11.27-beta.0 → 3.11.27

package/lib/index.umd.js

@@ -2220,7 +2220,7 @@ function getClass(property, params) {
 ;// CONCATENATED MODULE: ./packages/ui/index.ts
 
 
-const version = "3.11.27-beta.0";
+const version = "3.11.27";
 core_.VxeUI.version = version;
 core_.VxeUI.tableVersion = version;
 core_.VxeUI.setConfig({
@@ -2627,6 +2627,7 @@ var es_array_push = __webpack_require__(4114);
 
 const reClsMap = {};
 const browse = external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().browse();
+const tpImg = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=';
 function getPropClass(property, params) {
   return property ? XEUtils.isFunction(property) ? property(params) : property : '';
 }
@@ -2789,7 +2790,7 @@ function isNodeElement(elem) {
 const {
   log: log_log
 } = core_.VxeUI;
-const log_version = `table v${"3.11.27-beta.0"}`;
+const log_version = `table v${"3.11.27"}`;
 const warnLog = log_log.create('warn', log_version);
 const errLog = log_log.create('error', log_version);
 ;// CONCATENATED MODULE: ./packages/table/src/columnInfo.ts
@@ -4909,7 +4910,6 @@ const {
 // const isWebkit = browse['-webkit'] && !browse.edge
 // const debounceScrollYDuration = browse.msie ? 80 : 20
 const customStorageKey = 'VXE_CUSTOM_STORE';
-const tpImg = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=';
 // 获取所有的列，排除分组
 const getColumnList = columns => {
   const result = [];
@@ -11173,7 +11173,6 @@ const Methods = {
     const $xeTable = this;
     const props = $xeTable;
     const reactData = $xeTable;
-    evnt.stopPropagation();
     const {
       dragConfig
     } = props;
@@ -11445,7 +11444,6 @@ const Methods = {
   handleHeaderCellDragMousedownEvent(evnt, params) {
     const $xeTable = this;
     const reactData = $xeTable;
-    evnt.stopPropagation();
     const columnDragOpts = $xeTable.computeColumnDragOpts;
     const {
       dragStartMethod
@@ -14041,7 +14039,7 @@ function renderRows(h, _vm, $xeTable, fixedType, tableData, tableColumn) {
         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 || rowOpts.drag || treeConfig ? rowid : $rowIndex,
+      key: rowKey || rowOpts.useKey || rowOpts.drag || columnOpts.drag || treeConfig ? rowid : $rowIndex,
       on: trOn
     }, tdVNs));
     // 如果行被展开了
@@ -15645,23 +15643,73 @@ const {
   getIcon: panel_getIcon,
   renderEmptyElement: panel_renderEmptyElement
 } = core_.VxeUI;
-function updateDropHint(_vm, evnt) {
+function panel_showDropTip(_vm, evnt, optEl, showLine, dragPos) {
   const {
-    $refs
+    prevDragToChild
   } = _vm;
-  const dragHintEl = $refs.dragHintElemRef;
-  const bodyEl = $refs.bodyElemRef;
-  if (!bodyEl) {
+  const el = _vm.$refs.bodyElemRef;
+  if (!el) {
     return;
   }
-  if (dragHintEl) {
-    const wrapperEl = bodyEl.parentNode;
-    const wrapperRect = wrapperEl.getBoundingClientRect();
-    dragHintEl.style.display = 'block';
-    dragHintEl.style.top = `${Math.min(wrapperEl.clientHeight - wrapperEl.scrollTop - dragHintEl.clientHeight, evnt.clientY - wrapperRect.y)}px`;
-    dragHintEl.style.left = `${Math.min(wrapperEl.clientWidth - wrapperEl.scrollLeft - dragHintEl.clientWidth - 16, evnt.clientX - wrapperRect.x)}px`;
+  const wrapperRect = el.getBoundingClientRect();
+  if (optEl) {
+    const dragLineEl = _vm.$refs.refDragLineElem;
+    if (dragLineEl) {
+      if (showLine) {
+        const optRect = optEl.getBoundingClientRect();
+        dragLineEl.style.display = 'block';
+        dragLineEl.style.top = `${Math.max(1, optRect.y - wrapperRect.y)}px`;
+        dragLineEl.style.height = `${optRect.height}px`;
+        dragLineEl.style.width = `${optRect.width}px`;
+        dragLineEl.setAttribute('drag-pos', dragPos);
+        dragLineEl.setAttribute('drag-to-child', prevDragToChild ? 'y' : 'n');
+      } else {
+        dragLineEl.style.display = '';
+      }
+    }
+  }
+  const dragTipEl = _vm.$refs.refDragTipElem;
+  if (dragTipEl) {
+    dragTipEl.style.display = 'block';
+    dragTipEl.style.top = `${Math.min(el.clientHeight - el.scrollTop - dragTipEl.clientHeight, evnt.clientY - wrapperRect.y)}px`;
+    dragTipEl.style.left = `${Math.min(el.clientWidth - el.scrollLeft - dragTipEl.clientWidth - 16, evnt.clientX - wrapperRect.x)}px`;
+    dragTipEl.setAttribute('drag-status', showLine ? prevDragToChild ? 'sub' : 'normal' : 'disabled');
+  }
+}
+function panel_hideDropTip(_vm) {
+  const dragTipEl = _vm.$refs.refDragTipElem;
+  const dragLineEl = _vm.$refs.refDragLineElem;
+  if (dragTipEl) {
+    dragTipEl.style.display = '';
+  }
+  if (dragLineEl) {
+    dragLineEl.style.display = '';
   }
 }
+const renderDragTip = (h, _vm) => {
+  const {
+    dragCol
+  } = _vm;
+  return h('div', {}, [h('div', {
+    ref: 'refDragLineElem',
+    class: 'vxe-table-custom-popup--drag-line'
+  }), h('div', {
+    ref: 'refDragTipElem',
+    class: 'vxe-table-custom-popup--drag-tip'
+  }, [h('div', {
+    class: 'vxe-table-custom-popup--drag-tip-wrapper'
+  }, [h('div', {
+    class: 'vxe-table-custom-popup--drag-tip-status'
+  }, [h('span', {
+    class: ['vxe-table-custom-popup--drag-tip-normal-status', panel_getIcon().TABLE_DRAG_STATUS_ROW]
+  }), h('span', {
+    class: ['vxe-table-custom-popup--drag-tip-sub-status', panel_getIcon().TABLE_DRAG_STATUS_SUB_ROW]
+  }), h('span', {
+    class: ['vxe-table-custom-popup--drag-tip-disabled-status', panel_getIcon().TABLE_DRAG_DISABLED]
+  })]), h('div', {
+    class: 'vxe-table--drag-tip-content'
+  }, panel_getI18n('vxe.custom.cstmDragTarget', [dragCol && dragCol.type !== 'html' ? dragCol.getTitle() : '']))])])]);
+};
 const renderSimplePanel = (h, _vm) => {
   const VxeUIButtonComponent = core_.VxeUI.getComponent('VxeButton');
   const props = _vm;
@@ -15675,6 +15723,10 @@ const renderSimplePanel = (h, _vm) => {
     customColumnList
   } = reactData;
   const customOpts = $xeTable.computeCustomOpts;
+  const {
+    immediate
+  } = customOpts;
+  const columnDragOpts = $xeTable.computeColumnDragOpts;
   const {
     maxHeight
   } = customStore;
@@ -15688,6 +15740,9 @@ const renderSimplePanel = (h, _vm) => {
     placement
   } = customOpts;
   const isMaxFixedColumn = $xeTable.computeIsMaxFixedColumn;
+  const {
+    isCrossDrag
+  } = columnDragOpts;
   const slots = customOpts.slots || {};
   const headerSlot = slots.header;
   const topSlot = slots.top;
@@ -15698,7 +15753,6 @@ const renderSimplePanel = (h, _vm) => {
   const customWrapperOns = {};
   const isAllChecked = customStore.isAll;
   const isAllIndeterminate = customStore.isIndeterminate;
-  const dragColumn = _vm.dragColumn;
   // hover 触发
   if (trigger === 'hover') {
     customWrapperOns.mouseenter = _vm.handleWrapperMouseenterEvent;
@@ -15757,16 +15811,18 @@ 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]
-      })]) : panel_renderEmptyElement($xeTable), allowSort && column.level === 1 ? h('div', {
+      })]) : panel_renderEmptyElement($xeTable), h('div', {
+        class: 'vxe-table-custom--name-option'
+      }, [allowSort && ((isCrossDrag ? immediate : false) || column.level === 1) ? h('div', {
         class: 'vxe-table-custom--sort-option'
       }, [h('span', {
         class: ['vxe-table-custom--sort-btn', {
-          'is--disabled': isDisabled || isHidden
+          'is--disabled': isDisabled || isHidden || column.renderFixed
         }],
         attrs: {
           title: panel_getI18n('vxe.custom.setting.sortHelpTip')
         },
-        on: isDisabled || isHidden ? {} : {
+        on: isDisabled || isHidden || column.renderFixed ? {} : {
           mousedown: _vm.sortMousedownEvent,
           mouseup: _vm.sortMouseupEvent
         }
@@ -15784,7 +15840,7 @@ const renderSimplePanel = (h, _vm) => {
         attrs: {
           title: colTitle
         }
-      }, colTitle), !parent && allowFixed ? h('div', {
+      }, colTitle)]), !parent && allowFixed ? h('div', {
         class: 'vxe-table-custom--fixed-option'
       }, [h(VxeUIButtonComponent, {
         props: {
@@ -15862,10 +15918,7 @@ const renderSimplePanel = (h, _vm) => {
     on: customWrapperOns
   }, colVNs), bottomSlot ? h('div', {
     class: 'vxe-table-custom--panel-bottom'
-  }, $xeTable.callSlot(bottomSlot, params, h)) : panel_renderEmptyElement($xeTable), h('div', {
-    ref: 'dragHintElemRef',
-    class: 'vxe-table-custom-popup--drag-hint'
-  }, panel_getI18n('vxe.custom.cstmDragTarget', [dragColumn && dragColumn.type !== 'html' ? dragColumn.getTitle() : '']))]), customOpts.showFooter ? h('div', {
+  }, $xeTable.callSlot(bottomSlot, params, h)) : panel_renderEmptyElement($xeTable), renderDragTip(h, _vm)]), customOpts.showFooter ? h('div', {
     class: 'vxe-table-custom--footer'
   }, footerSlot ? $xeTable.callSlot(footerSlot, params, h) : [h('div', {
     class: 'vxe-table-custom--footer-buttons'
@@ -15878,7 +15931,7 @@ const renderSimplePanel = (h, _vm) => {
     on: {
       click: _vm.resetCustomEvent
     }
-  }), customOpts.immediate ? h(VxeUIButtonComponent, {
+  }), immediate ? h(VxeUIButtonComponent, {
     props: {
       mode: 'text',
       content: customOpts.closeButtonText || panel_getI18n('vxe.table.customClose')
@@ -15894,7 +15947,7 @@ const renderSimplePanel = (h, _vm) => {
     on: {
       click: _vm.cancelCustomEvent
     }
-  }), customOpts.immediate ? panel_renderEmptyElement($xeTable) : h(VxeUIButtonComponent, {
+  }), immediate ? panel_renderEmptyElement($xeTable) : h(VxeUIButtonComponent, {
     props: {
       mode: 'text',
       status: 'primary',
@@ -15910,7 +15963,6 @@ const renderPopupPanel = (h, _vm) => {
   const VxeUIDrawerComponent = core_.VxeUI.getComponent('VxeDrawer');
   const VxeUIButtonComponent = core_.VxeUI.getComponent('VxeButton');
   const VxeUINumberInputComponent = core_.VxeUI.getComponent('VxeInput');
-  const VxeUITooltipComponent = core_.VxeUI.getComponent('VxeTooltip');
   const $xeTableCustomPanel = _vm;
   const props = _vm;
   const $xeTable = _vm.$xeTable;
@@ -15927,6 +15979,10 @@ const renderPopupPanel = (h, _vm) => {
     customColumnList
   } = reactData;
   const customOpts = $xeTable.computeCustomOpts;
+  const {
+    immediate
+  } = customOpts;
+  const columnDragOpts = $xeTable.computeColumnDragOpts;
   const {
     mode,
     modalOptions,
@@ -15950,6 +16006,9 @@ const renderPopupPanel = (h, _vm) => {
   const modalOpts = Object.assign({}, modalOptions);
   const drawerOpts = Object.assign({}, drawerOptions);
   const isMaxFixedColumn = $xeTable.computeIsMaxFixedColumn;
+  const {
+    isCrossDrag
+  } = columnDragOpts;
   const slots = customOpts.slots || {};
   const headerSlot = slots.header;
   const topSlot = slots.top;
@@ -15959,7 +16018,6 @@ 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,
@@ -16032,40 +16090,43 @@ 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]
-      })])]) : panel_renderEmptyElement($xeTable), allowSort ? h('td', {
-        class: 'vxe-table-custom-popup--column-item col--sort'
-      }, [column.level === 1 ? h('span', {
+      })])]) : panel_renderEmptyElement($xeTable), h('td', {
+        class: 'vxe-table-custom-popup--column-item col--name'
+      }, [h('div', {
+        class: 'vxe-table-custom-popup--name'
+      }, [allowSort ? (isCrossDrag ? immediate : false) || column.level === 1 ? h('div', {
         class: ['vxe-table-custom-popup--column-sort-btn', {
-          'is--disabled': isDisabled || isHidden
+          'is--disabled': isDisabled || isHidden || column.renderFixed
         }],
         attrs: {
           title: panel_getI18n('vxe.custom.setting.sortHelpTip')
         },
-        on: isDisabled || isHidden ? {} : {
+        on: isDisabled || isHidden || column.renderFixed ? {} : {
           mousedown: _vm.sortMousedownEvent,
           mouseup: _vm.sortMouseupEvent
         }
       }, [h('i', {
         class: panel_getIcon().TABLE_CUSTOM_SORT
-      })]) : h('span', '-')]) : panel_renderEmptyElement($xeTable), h('td', {
-        class: 'vxe-table-custom-popup--column-item col--name'
-      }, [column.type === 'html' ? h('div', {
+      })]) : h('div', {
+        class: 'vxe-table-custom-popup--column-sort-placeholder'
+      }) : panel_renderEmptyElement($xeTable), column.type === 'html' ? h('div', {
         key: '1',
-        class: 'vxe-table-custom-popup--name',
+        class: 'vxe-table-custom-popup--title',
         domProps: {
           innerHTML: colTitle
         }
       }) : h('div', {
         key: '0',
-        class: 'vxe-table-custom-popup--name',
+        class: 'vxe-table-custom-popup--title',
         attrs: {
           title: colTitle
         }
-      }, colTitle)]), allowResizable ? h('td', {
+      }, colTitle)])]), allowResizable ? h('td', {
         class: 'vxe-table-custom-popup--column-item col--resizable'
       }, [column.children && column.children.length || !(external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().isBoolean(column.resizable) ? column.resizable : columnOpts.resizable || allResizable) ? h('span', '-') : VxeUINumberInputComponent ? h(VxeUINumberInputComponent, {
         props: {
           type: 'integer',
+          immediate: false,
           disabled: isDisabled || isHidden,
           value: column.renderResizeWidth,
           min: customMinWidth || undefined,
@@ -16074,6 +16135,9 @@ const renderPopupPanel = (h, _vm) => {
         on: {
           modelValue(value) {
             column.renderResizeWidth = Math.max(0, Number(value));
+          },
+          change() {
+            _vm.changeColumnWidth(column);
           }
         }
       }) : panel_renderEmptyElement($xeTableCustomPanel)]) : panel_renderEmptyElement($xeTable), allowFixed ? h('td', {
@@ -16100,7 +16164,7 @@ const renderPopupPanel = (h, _vm) => {
         },
         on: {
           input(value) {
-            column.renderFixed = value;
+            _vm.changeFixedOption(column, value);
           }
         }
       })]) : panel_renderEmptyElement($xeTable)]));
@@ -16120,8 +16184,6 @@ 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'
-      }) : panel_renderEmptyElement($xeTable), allowSort ? h('col', {
-        class: 'vxe-table-custom-popup--table-col-sort'
       }) : panel_renderEmptyElement($xeTable), h('col', {
         class: 'vxe-table-custom-popup--table-col-title'
       }), allowResizable ? h('col', {
@@ -16143,22 +16205,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'))])]) : 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: {
-          enterable: true,
-          content: panel_getI18n('vxe.custom.setting.sortHelpTip'),
-          popupClassName: 'vxe-table--ignore-clear'
-        },
-        scopedSlots: {
-          default: () => {
-            return h('i', {
-              class: 'vxe-table-custom-popup--table-sort-help-icon vxe-icon-question-circle-fill'
-            });
-          }
-        }
-      }) : 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', {
+      }, panel_getI18n('vxe.toolbar.customAll'))])]) : 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',
@@ -16166,10 +16213,7 @@ const renderPopupPanel = (h, _vm) => {
         }
       }, trVNs)])]), bottomSlot ? h('div', {
         class: 'vxe-table-custom-popup--table-bottom'
-      }, $xeTable.callSlot(bottomSlot, params, h)) : panel_renderEmptyElement($xeTable), h('div', {
-        ref: 'dragHintElemRef',
-        class: 'vxe-table-custom-popup--drag-hint'
-      }, panel_getI18n('vxe.custom.cstmDragTarget', [dragColumn ? dragColumn.getTitle() : '']))]);
+      }, $xeTable.callSlot(bottomSlot, params, h)) : panel_renderEmptyElement($xeTable), renderDragTip(h, _vm)]);
     },
     footer: () => {
       if (footerSlot) {
@@ -16185,14 +16229,21 @@ const renderPopupPanel = (h, _vm) => {
         on: {
           click: _vm.resetCustomEvent
         }
-      }), h(VxeUIButtonComponent, {
+      }), immediate ? h(VxeUIButtonComponent, {
+        props: {
+          content: customOpts.resetButtonText || panel_getI18n('vxe.custom.customClose')
+        },
+        on: {
+          click: _vm.cancelCloseEvent
+        }
+      }) : h(VxeUIButtonComponent, {
         props: {
           content: customOpts.resetButtonText || panel_getI18n('vxe.custom.cstmCancel')
         },
         on: {
           click: _vm.cancelCustomEvent
         }
-      }), h(VxeUIButtonComponent, {
+      }), immediate ? panel_renderEmptyElement($xeTable) : h(VxeUIButtonComponent, {
         props: {
           status: 'primary',
           content: customOpts.confirmButtonText || panel_getI18n('vxe.custom.cstmConfirm')
@@ -16276,7 +16327,9 @@ const renderPopupPanel = (h, _vm) => {
   },
   data() {
     return {
-      dragColumn: null
+      prevDragCol: undefined,
+      prevDragToChild: false,
+      prevDragPos: null
     };
   },
   computed: {},
@@ -16286,7 +16339,6 @@ const renderPopupPanel = (h, _vm) => {
       const VxeUIDrawerComponent = core_.VxeUI.getComponent('VxeDrawer');
       const VxeUIButtonComponent = core_.VxeUI.getComponent('VxeButton');
       const VxeUINumberInputComponent = core_.VxeUI.getComponent('VxeNumberInput');
-      const VxeUITooltipComponent = core_.VxeUI.getComponent('VxeTooltip');
       const VxeUIRadioGroupComponent = core_.VxeUI.getComponent('VxeRadioGroup');
       this.$nextTick(() => {
         const {
@@ -16310,9 +16362,6 @@ const renderPopupPanel = (h, _vm) => {
         if (!VxeUINumberInputComponent) {
           errLog('vxe.error.reqComp', ['vxe-input']);
         }
-        if (!VxeUITooltipComponent) {
-          errLog('vxe.error.reqComp', ['vxe-tooltip']);
-        }
         if (!VxeUIRadioGroupComponent) {
           errLog('vxe.error.reqComp', ['vxe-radio-group']);
         }
@@ -16359,6 +16408,8 @@ const renderPopupPanel = (h, _vm) => {
       $event
     }) {
       const $xeTable = this.$xeTable;
+      const reactData = $xeTable;
+      reactData.isCustomStatus = true;
       $xeTable.saveCustom();
       $xeTable.closeCustom();
       $xeTable.emitCustomEvent('confirm', $event);
@@ -16436,12 +16487,11 @@ const renderPopupPanel = (h, _vm) => {
       }
     },
     changeCheckboxOption(column) {
-      const {
-        $xetable
-      } = this;
+      const $xeTable = this.$xetable;
+      const reactData = $xeTable;
       const {
         customOpts
-      } = $xetable;
+      } = $xeTable.customOpts;
       const isChecked = !column.renderVisible;
       if (customOpts.immediate) {
         external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().eachTree([column], item => {
@@ -16449,8 +16499,9 @@ const renderPopupPanel = (h, _vm) => {
           item.renderVisible = isChecked;
           item.halfVisible = false;
         });
-        $xetable.handleCustom();
-        $xetable.saveCustomStore('update:visible');
+        reactData.isCustomStatus = true;
+        $xeTable.handleCustom();
+        $xeTable.saveCustomStore('update:visible');
       } else {
         external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().eachTree([column], item => {
           item.renderVisible = isChecked;
@@ -16458,16 +16509,27 @@ const renderPopupPanel = (h, _vm) => {
         });
       }
       this.handleOptionCheck(column);
-      $xetable.checkCustomStatus();
+      $xeTable.checkCustomStatus();
+    },
+    changeColumnWidth(column) {
+      const $xeTable = this.$xetable;
+      const reactData = $xeTable;
+      const customOpts = $xeTable.computeCustomOpts;
+      if (customOpts.immediate) {
+        if (column.renderResizeWidth !== column.renderWidth) {
+          column.resizeWidth = column.renderResizeWidth;
+          column.renderWidth = column.renderResizeWidth;
+          reactData.isCustomStatus = true;
+          $xeTable.handleCustom();
+          $xeTable.saveCustomStore('update:width');
+        }
+      }
     },
     changeFixedOption(column, colFixed) {
-      const {
-        $xetable
-      } = this;
-      const {
-        isMaxFixedColumn,
-        customOpts
-      } = $xetable;
+      const $xeTable = this.$xetable;
+      const reactData = $xeTable;
+      const isMaxFixedColumn = $xeTable.computeIsMaxFixedColumn;
+      const customOpts = $xeTable.computeCustomOpts;
       if (customOpts.immediate) {
         if (column.renderFixed === colFixed) {
           external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().eachTree([column], col => {
@@ -16482,8 +16544,9 @@ const renderPopupPanel = (h, _vm) => {
             });
           }
         }
-        $xetable.handleCustom();
-        $xetable.saveCustomStore('update:fixed');
+        reactData.isCustomStatus = true;
+        $xeTable.handleCustom();
+        $xeTable.saveCustomStore('update:fixed');
       } else {
         if (column.renderFixed === colFixed) {
           external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().eachTree([column], col => {
@@ -16505,113 +16568,261 @@ const renderPopupPanel = (h, _vm) => {
       $xetable.toggleCustomAllCheckbox();
     },
     sortMousedownEvent(evnt) {
-      const {
-        $xetable
-      } = this;
+      const $xeTable = this.$xetable;
       const btnEl = evnt.currentTarget;
-      const tdEl = btnEl.parentNode;
-      const trEl = tdEl.parentNode;
+      const cellEl = btnEl.parentElement;
+      const tdEl = cellEl.parentElement;
+      const trEl = tdEl.parentElement;
       const colid = trEl.getAttribute('colid');
-      const column = $xetable.getColumnById(colid);
+      const column = $xeTable.getColumnById(colid);
       trEl.draggable = true;
-      this.dragColumn = column;
+      this.dragCol = column;
       addClass(trEl, 'active--drag-origin');
-      updateDropHint(this, evnt);
     },
     sortMouseupEvent(evnt) {
       const btnEl = evnt.currentTarget;
-      const tdEl = btnEl.parentNode;
-      const trEl = tdEl.parentNode;
-      const dragHintEl = this.$refs.dragHintElemRef;
+      const cellEl = btnEl.parentElement;
+      const tdEl = cellEl.parentElement;
+      const trEl = tdEl.parentElement;
+      panel_hideDropTip(this);
       trEl.draggable = false;
-      this.dragColumn = null;
+      this.dragCol = null;
       removeClass(trEl, 'active--drag-origin');
-      if (dragHintEl) {
-        dragHintEl.style.display = '';
-      }
     },
     sortDragstartEvent(evnt) {
-      const img = new Image();
       if (evnt.dataTransfer) {
+        const img = new Image();
+        img.src = tpImg;
         evnt.dataTransfer.setDragImage(img, 0, 0);
       }
     },
     sortDragendEvent(evnt) {
+      const $xeTable = this.$xetable;
+      const tableProps = $xeTable;
+      const reactData = $xeTable;
+      const internalData = $xeTable;
       const {
-        $xetable,
-        prevDropTrEl
+        dragCol,
+        prevDragPos,
+        prevDragCol,
+        prevDragToChild
       } = this;
       const {
-        customColumnList,
-        customOpts
-      } = $xetable;
+        mouseConfig
+      } = tableProps;
+      const {
+        customColumnList
+      } = reactData;
+      const {
+        collectColumn
+      } = internalData;
+      const customOpts = $xeTable.computeCustomOpts;
+      const {
+        immediate
+      } = customOpts;
       const trEl = evnt.currentTarget;
-      const dragHintEl = this.$refs.dragHintElemRef;
-      if (prevDropTrEl) {
+      const columnDragOpts = $xeTable.computeColumnDragOpts;
+      const {
+        isCrossDrag,
+        isSelfToChildDrag,
+        isToChildDrag,
+        dragEndMethod
+      } = columnDragOpts;
+      const dragOffsetIndex = prevDragPos === 'bottom' ? 1 : 0;
+      if (prevDragCol && dragCol) {
         // 判断是否有拖动
-        if (prevDropTrEl !== trEl) {
-          const dragOffset = prevDropTrEl.getAttribute('drag-pos');
-          const colid = trEl.getAttribute('colid');
-          const column = $xetable.getColumnById(colid);
-          if (!column) {
-            return;
-          }
-          const cIndex = external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().findIndexOf(customColumnList, item => item.id === column.id);
-          const targetColid = prevDropTrEl.getAttribute('colid');
-          const targetColumn = $xetable.getColumnById(targetColid);
-          if (!targetColumn) {
-            return;
-          }
-          // 移出源位置
-          customColumnList.splice(cIndex, 1);
-          const tcIndex = external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().findIndexOf(customColumnList, item => item.id === targetColumn.id);
-          // 插新位置
-          customColumnList.splice(tcIndex + (dragOffset === 'bottom' ? 1 : 0), 0, column);
+        if (prevDragCol !== dragCol) {
+          const oldColumn = dragCol;
+          const newColumn = prevDragCol;
+          Promise.resolve(dragEndMethod ? dragEndMethod({
+            oldColumn,
+            newColumn,
+            dragPos: prevDragPos,
+            offsetIndex: dragOffsetIndex
+          }) : true).then(status => {
+            if (!status) {
+              return;
+            }
+            let oafIndex = -1;
+            let nafIndex = -1;
+            const oldAllMaps = {};
+            external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().eachTree([oldColumn], column => {
+              oldAllMaps[column.id] = column;
+            });
+            let isSelfToChildStatus = false;
+            // 只有实时拖拽支持跨层级
+            if (immediate) {
+              if (oldColumn.parentId && newColumn.parentId) {
+                // 子到子
+                if (!isCrossDrag) {
+                  return;
+                }
+                if (oldAllMaps[newColumn.id]) {
+                  isSelfToChildStatus = true;
+                  if (!isSelfToChildDrag) {
+                    if (core_.VxeUI.modal) {
+                      core_.VxeUI.modal.message({
+                        status: 'error',
+                        content: panel_getI18n('vxe.error.treeDragChild')
+                      });
+                    }
+                    return;
+                  }
+                }
+              } else if (oldColumn.parentId) {
+                // 子到根
+                if (!isCrossDrag) {
+                  return;
+                }
+              } else if (newColumn.parentId) {
+                // 根到子
+                if (!isCrossDrag) {
+                  return;
+                }
+                if (oldAllMaps[newColumn.id]) {
+                  isSelfToChildStatus = true;
+                  if (!isSelfToChildDrag) {
+                    if (core_.VxeUI.modal) {
+                      core_.VxeUI.modal.message({
+                        status: 'error',
+                        content: panel_getI18n('vxe.error.treeDragChild')
+                      });
+                    }
+                    return;
+                  }
+                }
+              } else {
+                // 根到根
+              }
+              const oldewMatchRest = external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().findTree(collectColumn, item => item.id === oldColumn.id);
+              // 改变层级
+              if (isSelfToChildStatus && isSelfToChildDrag) {
+                if (oldewMatchRest) {
+                  const {
+                    items: oCols,
+                    index: oIndex
+                  } = oldewMatchRest;
+                  const childList = oldColumn.children || [];
+                  childList.forEach(column => {
+                    column.parentId = oldColumn.parentId;
+                  });
+                  oCols.splice(oIndex, 1, ...childList);
+                  oldColumn.children = [];
+                }
+              } else {
+                if (oldewMatchRest) {
+                  const {
+                    items: oCols,
+                    index: oIndex,
+                    parent: oParent
+                  } = oldewMatchRest;
+                  oCols.splice(oIndex, 1);
+                  if (!oParent) {
+                    oafIndex = oIndex;
+                  }
+                }
+              }
+              const newMatchRest = external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().findTree(collectColumn, item => item.id === newColumn.id);
+              if (newMatchRest) {
+                const {
+                  items: nCols,
+                  index: nIndex,
+                  parent: nParent
+                } = newMatchRest;
+                // 转子级
+                if (isToChildDrag && prevDragToChild) {
+                  oldColumn.parentId = newColumn.id;
+                  newColumn.children = (newColumn.children || []).concat([oldColumn]);
+                } else {
+                  oldColumn.parentId = newColumn.parentId;
+                  nCols.splice(nIndex + dragOffsetIndex, 0, oldColumn);
+                }
+                if (!nParent) {
+                  nafIndex = nIndex;
+                }
+              }
+              external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().eachTree(collectColumn, (column, index, items, path, parent) => {
+                if (!parent) {
+                  const sortIndex = index + 1;
+                  column.renderSortNumber = sortIndex;
+                }
+              });
+            } else {
+              oafIndex = external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().findIndexOf(customColumnList, item => item.id === oldColumn.id);
+              customColumnList.splice(oafIndex, 1);
+              nafIndex = external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().findIndexOf(customColumnList, item => item.id === newColumn.id);
+              customColumnList.splice(nafIndex + dragOffsetIndex, 0, oldColumn);
+            }
+            reactData.isDragColMove = true;
+            if (mouseConfig) {
+              if ($xeTable.clearSelected) {
+                $xeTable.clearSelected();
+              }
+              if ($xeTable.clearCellAreas) {
+                $xeTable.clearCellAreas();
+                $xeTable.clearCopyCellArea();
+              }
+            }
+            $xeTable.dispatchEvent('column-dragend', {
+              oldColumn,
+              newColumn,
+              dragPos: prevDragPos,
+              offsetIndex: dragOffsetIndex,
+              _index: {
+                newIndex: nafIndex,
+                oldIndex: oafIndex
+              }
+            }, evnt);
+            if (immediate) {
+              reactData.customColumnList = collectColumn.slice(0);
+              $xeTable.refreshColumn(true).then(() => {
+                $xeTable.updateCellAreas();
+                $xeTable.handleCustom();
+                $xeTable.saveCustomStore('update:sort');
+              });
+            }
+          }).catch(() => {});
         }
-        prevDropTrEl.draggable = false;
-        prevDropTrEl.removeAttribute('drag-pos');
-        removeClass(prevDropTrEl, 'active--drag-target');
       }
-      this.dragColumn = null;
+      panel_hideDropTip(this);
+      this.dragCol.value = null;
       trEl.draggable = false;
       trEl.removeAttribute('drag-pos');
-      if (dragHintEl) {
-        dragHintEl.style.display = '';
-      }
       removeClass(trEl, 'active--drag-target');
       removeClass(trEl, 'active--drag-origin');
-      if (customOpts.immediate) {
-        external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().eachTree(customColumnList, (column, index, items, path, parent) => {
-          if (!parent) {
-            const sortIndex = index + 1;
-            column.renderSortNumber = sortIndex;
-          }
-        });
-        $xetable.handleCustom();
-        $xetable.saveCustomStore('update:sort');
-      }
     },
     sortDragoverEvent(evnt) {
+      const $xeTable = this.$xetable;
       const {
-        $xetable,
-        prevDropTrEl
+        dragCol
       } = this;
-      const trEl = evnt.currentTarget;
-      if (prevDropTrEl !== trEl) {
-        removeClass(prevDropTrEl, 'active--drag-target');
-      }
-      const colid = trEl.getAttribute('colid');
-      const column = $xetable.getColumnById(colid);
-      // 是否移入有效元行
-      if (column && column.level === 1) {
+      const customOpts = $xeTable.computeCustomOpts;
+      const {
+        immediate
+      } = customOpts;
+      const columnDragOpts = $xeTable.computeColumnDragOpts;
+      const {
+        isCrossDrag,
+        isToChildDrag
+      } = columnDragOpts;
+      const optEl = evnt.currentTarget;
+      const hasCtrlKey = evnt.ctrlKey;
+      const colid = optEl.getAttribute('colid');
+      const column = $xeTable.getColumnById(colid);
+      // 是否移入有效列
+      if (column && (isCrossDrag || column.level === 1)) {
         evnt.preventDefault();
-        const offsetY = evnt.clientY - trEl.getBoundingClientRect().y;
-        const dragOffset = offsetY < trEl.clientHeight / 2 ? 'top' : 'bottom';
-        addClass(trEl, 'active--drag-target');
-        trEl.setAttribute('drag-pos', dragOffset);
-        this.prevDropTrEl = trEl;
+        const offsetY = evnt.clientY - optEl.getBoundingClientRect().y;
+        const dragPos = offsetY < optEl.clientHeight / 2 ? 'top' : 'bottom';
+        if (dragCol && dragCol.id === column.id || !isCrossDrag && column.level > 1 || !immediate && column.level > 1 || column.renderFixed) {
+          panel_showDropTip(this, evnt, optEl, false, dragPos);
+          return;
+        }
+        this.prevDragToChild = !!(isToChildDrag && hasCtrlKey && immediate);
+        this.prevDragCol = column;
+        this.prevDragPos = dragPos;
+        panel_showDropTip(this, evnt, optEl, true, dragPos);
       }
-      updateDropHint(this, evnt);
     }
   }
 });
@@ -22519,6 +22730,7 @@ function validErrorRuleValue(rule, val) {
     },
     _setCustomAllCheckbox(checked) {
       const $xeTable = this;
+      const reactData = $xeTable;
       const {
         customStore
       } = this;
@@ -22548,6 +22760,7 @@ function validErrorRuleValue(rule, val) {
           column.halfVisible = false;
         });
         customStore.isAll = isAll;
+        reactData.isCustomStatus = true;
         $xeTable.handleCustom();
         $xeTable.saveCustomStore('update:visible');
       } else {
@@ -22781,7 +22994,7 @@ const renderDragTipContents = (h, $xeTable) => {
   }
   return [h('span', dragTipText)];
 };
-const renderDragTip = (h, $xeTable) => {
+const table_renderDragTip = (h, $xeTable) => {
   const reactData = $xeTable;
   const {
     dragRow
@@ -23464,7 +23677,7 @@ function handleUupdateResize(_vm) {
       });
     },
     staticColumns(value) {
-      this.handleColumn(value);
+      this.handleColumn(external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().clone(value));
     },
     tableColumn() {
       this.analyColumnWidth();
@@ -23931,6 +24144,9 @@ function handleUupdateResize(_vm) {
         'is--virtual-x': scrollXLoad,
         'is--virtual-y': scrollYLoad
       }],
+      style: {
+        '--vxe-ui-table-drag-column-move-delay': `${Math.max(0.05, Math.min(0.3, tableData.length / 800))}s`
+      },
       attrs: {
         spellcheck: false
       },
@@ -24124,7 +24340,7 @@ function handleUupdateResize(_vm) {
     /**
      * 拖拽提示
      */
-    renderDragTip(h, this), h('div', {}, [
+    table_renderDragTip(h, this), h('div', {}, [
     /**
      * 提示相关
      */
@@ -27650,7 +27866,7 @@ const Toolbar = VxeToolbar;
       setting: {
         colSort: '排序',
         sortHelpTip: '点击并拖动图标可以调整列的排序',
-        colTitle: '标题',
+        colTitle: '列标题',
         colResizable: '列宽（像素）',
         colVisible: '是否显示',
         colFixed: '冻结列',