From 4625ae948b93ad0d89f51c6b33b01928949be6d6 Mon Sep 17 00:00:00 2001
From: xuliangzhan <xlz26296x@163.com>
Date: Thu, 12 Dec 2024 18:45:43 +0800
Subject: [PATCH] =?UTF-8?q?=E6=94=AF=E6=8C=81=E5=88=97=E4=BB=BB=E6=84=8F?=
 =?UTF-8?q?=E6=8B=96=E6=8B=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .gitee/ISSUE_TEMPLATE/bug_report.yml       |  10 +-
 .github/ISSUE_TEMPLATE/bug_report.yml      |   2 +-
 examples/views/table/TableTest2.vue        |  12 +-
 examples/views/table/TableTest3.vue        |  11 +-
 examples/views/table/TableTest6.vue        |   2 +-
 package.json                               |   4 +-
 packages/locale/lang/ar-EG.ts              |   6 +-
 packages/locale/lang/de-DE.ts              |   6 +-
 packages/locale/lang/en-US.ts              |   6 +-
 packages/locale/lang/es-ES.ts              |   6 +-
 packages/locale/lang/fr-FR.ts              |   6 +-
 packages/locale/lang/hu-HU.ts              |   6 +-
 packages/locale/lang/hy-AM.ts              |   6 +-
 packages/locale/lang/ja-JP.ts              |   6 +-
 packages/locale/lang/ko-KR.ts              |   6 +-
 packages/locale/lang/nb-NO.ts              |   6 +-
 packages/locale/lang/pt-BR.ts              |   6 +-
 packages/locale/lang/ru-RU.ts              |   6 +-
 packages/locale/lang/ug-CN.ts              |   6 +-
 packages/locale/lang/uk-UA.ts              |   6 +-
 packages/locale/lang/vi-VN.ts              |   6 +-
 packages/locale/lang/zh-CHT.ts             |   6 +-
 packages/locale/lang/zh-CN.ts              |   6 +-
 packages/table/module/custom/hook.ts       |   3 +-
 packages/table/module/custom/panel.ts      | 609 ++++++++++++++-------
 packages/table/src/body.ts                 |   2 +-
 packages/table/src/cell.ts                 |   4 +-
 packages/table/src/group.ts                |   2 +-
 packages/table/src/table.ts                | 214 ++++++--
 packages/ui/src/dom.ts                     |   2 +
 styles/components/table-module/custom.scss | 104 +++-
 styles/components/table.scss               |   5 +
 32 files changed, 748 insertions(+), 340 deletions(-)

diff --git a/.gitee/ISSUE_TEMPLATE/bug_report.yml b/.gitee/ISSUE_TEMPLATE/bug_report.yml
index ee0c6ab6df..e722d7f857 100644
--- a/.gitee/ISSUE_TEMPLATE/bug_report.yml
+++ b/.gitee/ISSUE_TEMPLATE/bug_report.yml
@@ -5,7 +5,7 @@ body:
 - type: input
   id: issue_link
   attributes:
-    label: "可复现的链接："
+    label: "可复现的链接（必须为公开链接，仅包含能复现问题的示例代码）："
     description: "一个最小化的重现示例能让我们精确地定位问题，从而快速解决问题。如何创建，点击 v3：[codesandbox](https://codesandbox.io/s/vue-template-916h0)、[jsfiddle](https://jsfiddle.net/86p7Ltny/)、[jsrun](https://jsrun.net/vIyKp/edit) 或 v4：[codesandbox](https://codesandbox.io/s/vxe-table-wentiyanshi-forked-54v2j)、[jsfiddle](https://jsfiddle.net/9qoghkbj/)、[jsrun](https://jsrun.net/K5IKp/edit)，将代码示例编辑后保存。"
   validations:
     required: true
@@ -26,27 +26,27 @@ body:
   id: issue_os_version
   attributes:
     label: "操作系统："
-    placeholder: "例如：window10"
+    placeholder: "例如：window11"
   validations:
     required: true
 - type: input
   id: issue_browser_version
   attributes:
     label: "浏览器版本："
-    placeholder: "例如：chrome 95.0.4638.69"
+    placeholder: "例如：chrome 133.0.6876.4"
   validations:
     required: true
 - type: input
   id: issue_vue_version
   attributes:
     label: "vue 版本："
-    placeholder: "例如：2.6.0"
+    placeholder: "例如：3.5.0"
   validations:
     required: true
 - type: input
   id: issue_vxe_version
   attributes:
     label: "vxe-table 版本："
-    placeholder: "例如：3.4.0"
+    placeholder: "例如：3.9.0"
   validations:
     required: true
diff --git a/.github/ISSUE_TEMPLATE/bug_report.yml b/.github/ISSUE_TEMPLATE/bug_report.yml
index eea0f595b0..d349247693 100644
--- a/.github/ISSUE_TEMPLATE/bug_report.yml
+++ b/.github/ISSUE_TEMPLATE/bug_report.yml
@@ -5,7 +5,7 @@ body:
 - type: input
   id: issue_link
   attributes:
-    label: "可复现的链接（包含复现链接与示例代码）："
+    label: "可复现的链接（必须为公开链接，仅包含能复现问题的示例代码）："
     description: "一个最小化的重现示例能让我们精确地定位问题，从而快速解决问题。"
   validations:
     required: true
diff --git a/examples/views/table/TableTest2.vue b/examples/views/table/TableTest2.vue
index 4a4ecf5743..6a82c9484b 100644
--- a/examples/views/table/TableTest2.vue
+++ b/examples/views/table/TableTest2.vue
@@ -14,6 +14,7 @@
       id="bbbbb"
       :row-config="{useKey: true,drag:true}"
       :column-config="{useKey: true,drag: true}"
+      :column-drag-config="{isCrossDrag:true,isToChildDrag:true,isSelfToChildDrag:true}"
       :custom-config="customConfig"
       :loading="demo1.loading"
       :import-config="{modes: importModes}"
@@ -25,10 +26,10 @@
       @row-dragstart="rowDragstartEvent"
       @row-dragover="rowDragoverEvent"
       @row-dragend="rowDragendEvent">
-      <vxe-column type="seq" width="60" drag-sort></vxe-column>
-      <vxe-column type="checkbox" title="ID" width="140" drag-sort></vxe-column>
-      <vxe-colgroup title="分组1">
-        <vxe-colgroup title="分组2">
+      <vxe-column field="seq" type="seq" width="60" drag-sort></vxe-column>
+      <vxe-column field="checkbox" type="checkbox" title="ID" width="140" drag-sort></vxe-column>
+      <vxe-colgroup field="group1" title="分组1">
+        <vxe-colgroup field="group2" title="分组2">
           <vxe-column type="expand" field="role" title="Role" drag-sort>
             <template #content="{ row }">
               <div>{{ row.name }}</div>
@@ -76,7 +77,8 @@ const exportModes = ref([
 ])
 
 const customConfig = reactive<VxeTablePropTypes.CustomConfig>({
-  storage: true,
+  immediate: false,
+  // storage: true,
   checkMethod ({ column }) {
     return column.type !== 'seq'
   },
diff --git a/examples/views/table/TableTest3.vue b/examples/views/table/TableTest3.vue
index f140cce6f4..70e76c0d8f 100644
--- a/examples/views/table/TableTest3.vue
+++ b/examples/views/table/TableTest3.vue
@@ -12,16 +12,17 @@
       id="aaaa"
       :row-config="{useKey: true}"
       :column-config="{useKey: true}"
+      :column-drag-config="{isCrossDrag:true,isToChildDrag:true,isSelfToChildDrag:true}"
       :print-config="{}"
       :import-config="{}"
       :export-config="{}"
-      :custom-config="{mode: 'popup',storage:true}"
+      :custom-config="{mode: 'popup',immediate: false}"
       :loading="demo1.loading"
       :expand-config="{iconOpen: 'vxe-icon-question-circle-fill', iconClose: 'vxe-icon-question-circle-fill'}"
       :checkbox-config="{labelField: 'id', highlight: true, range: true}"
       :data="demo1.tableData">
-      <vxe-column type="seq" width="60"></vxe-column>
-      <vxe-column type="checkbox" title="ID" width="140"></vxe-column>
+      <vxe-column field="seq" type="seq" width="60"></vxe-column>
+      <vxe-column field="checkbox" type="checkbox" title="ID" width="140"></vxe-column>
       <vxe-colgroup title="分组1" field="g1">
         <vxe-column type="expand" field="role" title="Role">
           <template #content="{ row }">
@@ -30,8 +31,8 @@
         </vxe-column>
         <vxe-column field="name" title="Name" sortable></vxe-column>
       </vxe-colgroup>
-      <vxe-column field="sex11" title="<span style='color:red;'>Sex222</span>" type="html"></vxe-column>
-      <vxe-column field="sex22" title="<span style='color:red;'>Sex1111</span>" type="html" :visible="false"></vxe-column>
+      <vxe-column field="Sex222" title="<span style='color:red;'>Sex222</span>" type="html"></vxe-column>
+      <vxe-column field="Sex1111" title="<span style='color:red;'>Sex1111</span>" type="html" :visible="false"></vxe-column>
       <vxe-column field="sex" title="Sex" :filters="demo1.sexList" :filter-multiple="false" :formatter="formatterSex"></vxe-column>
       <vxe-column
         field="age"
diff --git a/examples/views/table/TableTest6.vue b/examples/views/table/TableTest6.vue
index e9b12ac8fb..99a56a4279 100644
--- a/examples/views/table/TableTest6.vue
+++ b/examples/views/table/TableTest6.vue
@@ -12,7 +12,7 @@
       id="bbbbb"
       :row-config="{useKey: true}"
       :column-config="{useKey: true}"
-      :custom-config="{storage:true,immediate:true}"
+      :custom-config="{storage:true,}"
       :loading="demo1.loading"
       :import-config="{modes: importModes}"
       :export-config="{modes: exportModes}"
diff --git a/package.json b/package.json
index d4c0f55ebc..83fa14dd5f 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "vxe-table",
-  "version": "4.9.23",
+  "version": "4.9.24-beta.1",
   "description": "一个基于 vue 的 PC 端表格组件，支持增删改查、虚拟树、拖拽排序，懒加载、快捷菜单、数据校验、树形结构、打印、导入导出、自定义模板、渲染器、JSON 配置式...",
   "scripts": {
     "update": "npm install --legacy-peer-deps",
@@ -28,7 +28,7 @@
   "style": "lib/style.css",
   "typings": "types/index.d.ts",
   "dependencies": {
-    "vxe-pc-ui": "^4.3.27"
+    "vxe-pc-ui": "^4.3.29"
   },
   "devDependencies": {
     "@types/resize-observer-browser": "^0.1.11",
diff --git a/packages/locale/lang/ar-EG.ts b/packages/locale/lang/ar-EG.ts
index d3b67e2310..7f1d486504 100644
--- a/packages/locale/lang/ar-EG.ts
+++ b/packages/locale/lang/ar-EG.ts
@@ -47,8 +47,8 @@ export default {
       notExp: '该浏览器不支持导入/导出功能',
       impFields: '导入失败，请检查字段名和数据格式是否正确',
       treeNotImp: '树表格不支持导入',
-      treeCrossDrag: '只能拖拽第一层级的数据',
-      treeDragChild: '父级数据不能拖拽到自己的子级中',
+      treeCrossDrag: '只能拖拽第一层级',
+      treeDragChild: '父级不能拖拽到自己的子级中',
       reqPlugin: '可选扩展插件 "{1}" https://vxeui.com/other{0}/#/{1}/install'
     },
     table: {
@@ -130,7 +130,7 @@ export default {
       setting: {
         colSort: '排序',
         sortHelpTip: '点击并拖动图标可以调整列的排序',
-        colTitle: '标题',
+        colTitle: '列标题',
         colResizable: '列宽（像素）',
         colVisible: '是否显示',
         colFixed: '冻结列',
diff --git a/packages/locale/lang/de-DE.ts b/packages/locale/lang/de-DE.ts
index dd70fa9eba..94aea32605 100644
--- a/packages/locale/lang/de-DE.ts
+++ b/packages/locale/lang/de-DE.ts
@@ -47,8 +47,8 @@ export default {
       notExp: '该浏览器不支持导入/导出功能',
       impFields: '导入失败，请检查字段名和数据格式是否正确',
       treeNotImp: '树表格不支持导入',
-      treeCrossDrag: '只能拖拽第一层级的数据',
-      treeDragChild: '父级数据不能拖拽到自己的子级中',
+      treeCrossDrag: '只能拖拽第一层级',
+      treeDragChild: '父级不能拖拽到自己的子级中',
       reqPlugin: '可选扩展插件 "{1}" https://vxeui.com/other{0}/#/{1}/install'
     },
     table: {
@@ -130,7 +130,7 @@ export default {
       setting: {
         colSort: '排序',
         sortHelpTip: '点击并拖动图标可以调整列的排序',
-        colTitle: '标题',
+        colTitle: '列标题',
         colResizable: '列宽（像素）',
         colVisible: '是否显示',
         colFixed: '冻结列',
diff --git a/packages/locale/lang/en-US.ts b/packages/locale/lang/en-US.ts
index 25dd85efe2..3c5b088dbf 100644
--- a/packages/locale/lang/en-US.ts
+++ b/packages/locale/lang/en-US.ts
@@ -47,8 +47,8 @@ export default {
       notExp: 'The browser does not support import / export.',
       impFields: 'Import failed, please check that the field name and data format are correct.',
       treeNotImp: 'Tree table does not support import.',
-      treeCrossDrag: 'Only drag and drop data from the first level',
-      treeDragChild: 'Parent data cannot be dragged and dropped into children',
+      treeCrossDrag: 'Only drag and drop the first level',
+      treeDragChild: 'The parent cannot be dragged into its own child',
       reqPlugin: 'Optional extensions "{1}" https://vxeui.com/other{0}/#/{1}/install'
     },
     table: {
@@ -130,7 +130,7 @@ export default {
       setting: {
         colSort: 'Sort',
         sortHelpTip: 'Click and drag the icon to adjust the order of the columns.',
-        colTitle: 'Title',
+        colTitle: 'Column title',
         colResizable: 'Column width (px)',
         colVisible: 'Display',
         colFixed: 'Freeze columns',
diff --git a/packages/locale/lang/es-ES.ts b/packages/locale/lang/es-ES.ts
index 18175f0e21..31518ef649 100644
--- a/packages/locale/lang/es-ES.ts
+++ b/packages/locale/lang/es-ES.ts
@@ -47,8 +47,8 @@ export default {
       notExp: 'El navegador no es compatible con la importación / exportación.',
       impFields: 'Error de importación, por favor revise que el nombre del campo y el formato de datos sean correctos.',
       treeNotImp: 'La tabla de árbol no soporta importación.',
-      treeCrossDrag: 'Only the first level of data can be dragged',
-      treeDragChild: 'Parent data cannot be dragged into its own child',
+      treeCrossDrag: 'Only drag and drop the first level',
+      treeDragChild: 'The parent cannot be dragged into its own child',
       reqPlugin: 'Optional extension "{1}" https://vxeui.com/other{0}/#/{1}/install'
     },
     table: {
@@ -130,7 +130,7 @@ export default {
       setting: {
         colSort: 'Sort',
         sortHelpTip: 'Click and drag the icon to adjust the order of the columns.',
-        colTitle: 'Title',
+        colTitle: '列标题',
         colResizable: 'Column width (px)',
         colVisible: 'Display',
         colFixed: 'Freeze columns',
diff --git a/packages/locale/lang/fr-FR.ts b/packages/locale/lang/fr-FR.ts
index 2a301cdc4e..7cdcb8bc79 100644
--- a/packages/locale/lang/fr-FR.ts
+++ b/packages/locale/lang/fr-FR.ts
@@ -47,8 +47,8 @@ export default {
       notExp: '该浏览器不支持导入/导出功能',
       impFields: '导入失败，请检查字段名和数据格式是否正确',
       treeNotImp: '树表格不支持导入',
-      treeCrossDrag: '只能拖拽第一层级的数据',
-      treeDragChild: '父级数据不能拖拽到自己的子级中',
+      treeCrossDrag: '只能拖拽第一层级',
+      treeDragChild: '父级不能拖拽到自己的子级中',
       reqPlugin: '可选扩展插件 "{1}" https://vxeui.com/other{0}/#/{1}/install'
     },
     table: {
@@ -130,7 +130,7 @@ export default {
       setting: {
         colSort: '排序',
         sortHelpTip: '点击并拖动图标可以调整列的排序',
-        colTitle: '标题',
+        colTitle: '列标题',
         colResizable: '列宽（像素）',
         colVisible: '是否显示',
         colFixed: '冻结列',
diff --git a/packages/locale/lang/hu-HU.ts b/packages/locale/lang/hu-HU.ts
index 3a56768beb..e4ccfaf154 100644
--- a/packages/locale/lang/hu-HU.ts
+++ b/packages/locale/lang/hu-HU.ts
@@ -47,8 +47,8 @@ export default {
       notExp: 'Ez a böngésző nem támogatja az importálási/exportálási funkciókat',
       impFields: 'Az importálás nem sikerült, ellenőrizze, hogy a mezőnév és az adatformátum helyes-e',
       treeNotImp: 'A fatáblák nem támogatják az importálást',
-      treeCrossDrag: '只能拖拽第一层级的数据',
-      treeDragChild: '父级数据不能拖拽到自己的子级中',
+      treeCrossDrag: '只能拖拽第一层级',
+      treeDragChild: '父级不能拖拽到自己的子级中',
       reqPlugin: '可选扩展插件 "{1}" https://vxeui.com/other{0}/#/{1}/install'
     },
     table: {
@@ -130,7 +130,7 @@ export default {
       setting: {
         colSort: 'fajta',
         sortHelpTip: 'Kattintson és húzza az ikont az oszlopok sorrendjének módosításához',
-        colTitle: 'cím',
+        colTitle: '列标题',
         colResizable: 'Oszlopszélesség (pixel)',
         colVisible: 'Megjelenik-e',
         colFixed: 'fagyasztóoszlop',
diff --git a/packages/locale/lang/hy-AM.ts b/packages/locale/lang/hy-AM.ts
index 9dc89b521b..ea896a044f 100644
--- a/packages/locale/lang/hy-AM.ts
+++ b/packages/locale/lang/hy-AM.ts
@@ -47,8 +47,8 @@ export default {
       notExp: '该浏览器不支持导入/导出功能',
       impFields: '导入失败，请检查字段名和数据格式是否正确',
       treeNotImp: '树表格不支持导入',
-      treeCrossDrag: '只能拖拽第一层级的数据',
-      treeDragChild: '父级数据不能拖拽到自己的子级中',
+      treeCrossDrag: '只能拖拽第一层级',
+      treeDragChild: '父级不能拖拽到自己的子级中',
       reqPlugin: '可选扩展插件 "{1}" https://vxeui.com/other{0}/#/{1}/install'
     },
     table: {
@@ -130,7 +130,7 @@ export default {
       setting: {
         colSort: '排序',
         sortHelpTip: '点击并拖动图标可以调整列的排序',
-        colTitle: '标题',
+        colTitle: '列标题',
         colResizable: '列宽（像素）',
         colVisible: '是否显示',
         colFixed: '冻结列',
diff --git a/packages/locale/lang/ja-JP.ts b/packages/locale/lang/ja-JP.ts
index 1a941c6bf5..a9ed08a7fd 100644
--- a/packages/locale/lang/ja-JP.ts
+++ b/packages/locale/lang/ja-JP.ts
@@ -47,8 +47,8 @@ export default {
       notExp: 'ご利用のブラウザはインポート/エクスポート機能を利用できません',
       impFields: 'インポートに失敗しました。フィールド名とデータ形式を確認してください',
       treeNotImp: 'ツリーテーブルはインポートをサポートしていません',
-      treeCrossDrag: '只能拖拽第一层级的数据',
-      treeDragChild: '父级数据不能拖拽到自己的子级中',
+      treeCrossDrag: '只能拖拽第一层级',
+      treeDragChild: '父级不能拖拽到自己的子级中',
       reqPlugin: '可选扩展插件 "{1}" https://vxeui.com/other{0}/#/{1}/install'
     },
     table: {
@@ -130,7 +130,7 @@ export default {
       setting: {
         colSort: 'ソート',
         sortHelpTip: 'ドラッグして列を並べ替えます',
-        colTitle: 'タイトル',
+        colTitle: '列标题',
         colResizable: '列の幅 (px)',
         colVisible: '表示する',
         colFixed: '列固定',
diff --git a/packages/locale/lang/ko-KR.ts b/packages/locale/lang/ko-KR.ts
index 69d3fabeb2..a25525a6b5 100644
--- a/packages/locale/lang/ko-KR.ts
+++ b/packages/locale/lang/ko-KR.ts
@@ -47,8 +47,8 @@ export default {
       notExp: '该浏览器不支持导入/导出功能',
       impFields: '导入失败，请检查字段名和数据格式是否正确',
       treeNotImp: '树表格不支持导入',
-      treeCrossDrag: '只能拖拽第一层级的数据',
-      treeDragChild: '父级数据不能拖拽到自己的子级中',
+      treeCrossDrag: '只能拖拽第一层级',
+      treeDragChild: '父级不能拖拽到自己的子级中',
       reqPlugin: '可选扩展插件 "{1}" https://vxeui.com/other{0}/#/{1}/install'
     },
     table: {
@@ -130,7 +130,7 @@ export default {
       setting: {
         colSort: '排序',
         sortHelpTip: '点击并拖动图标可以调整列的排序',
-        colTitle: '标题',
+        colTitle: '列标题',
         colResizable: '列宽（像素）',
         colVisible: '是否显示',
         colFixed: '冻结列',
diff --git a/packages/locale/lang/nb-NO.ts b/packages/locale/lang/nb-NO.ts
index 6b942226af..5a60d19c06 100644
--- a/packages/locale/lang/nb-NO.ts
+++ b/packages/locale/lang/nb-NO.ts
@@ -47,8 +47,8 @@ export default {
       notExp: '该浏览器不支持导入/导出功能',
       impFields: '导入失败，请检查字段名和数据格式是否正确',
       treeNotImp: '树表格不支持导入',
-      treeCrossDrag: '只能拖拽第一层级的数据',
-      treeDragChild: '父级数据不能拖拽到自己的子级中',
+      treeCrossDrag: '只能拖拽第一层级',
+      treeDragChild: '父级不能拖拽到自己的子级中',
       reqPlugin: '可选扩展插件 "{1}" https://vxeui.com/other{0}/#/{1}/install'
     },
     table: {
@@ -130,7 +130,7 @@ export default {
       setting: {
         colSort: '排序',
         sortHelpTip: '点击并拖动图标可以调整列的排序',
-        colTitle: '标题',
+        colTitle: '列标题',
         colResizable: '列宽（像素）',
         colVisible: '是否显示',
         colFixed: '冻结列',
diff --git a/packages/locale/lang/pt-BR.ts b/packages/locale/lang/pt-BR.ts
index 83ad76c267..72aceebe2c 100644
--- a/packages/locale/lang/pt-BR.ts
+++ b/packages/locale/lang/pt-BR.ts
@@ -47,8 +47,8 @@ export default {
       notExp: 'O navegador não suporta importação/exportação.',
       impFields: 'Falha na importação, verifique se o nome do campo e o formato dos dados estão corretos.',
       treeNotImp: 'A tabela de árvore não suporta importação.',
-      treeCrossDrag: '只能拖拽第一层级的数据',
-      treeDragChild: '父级数据不能拖拽到自己的子级中',
+      treeCrossDrag: '只能拖拽第一层级',
+      treeDragChild: '父级不能拖拽到自己的子级中',
       reqPlugin: '可选扩展插件 "{1}" https://vxeui.com/other{0}/#/{1}/install'
     },
     table: {
@@ -130,7 +130,7 @@ export default {
       setting: {
         colSort: 'Sort',
         sortHelpTip: 'Click and drag the icon to adjust the order of the columns.',
-        colTitle: 'Title',
+        colTitle: '列标题',
         colResizable: 'Column width (px)',
         colVisible: 'Display',
         colFixed: 'Freeze columns',
diff --git a/packages/locale/lang/ru-RU.ts b/packages/locale/lang/ru-RU.ts
index bddffe89bc..d5dc0de425 100644
--- a/packages/locale/lang/ru-RU.ts
+++ b/packages/locale/lang/ru-RU.ts
@@ -47,8 +47,8 @@ export default {
       notExp: 'Этот браузер не поддерживает функцию импорта/экспорта.',
       impFields: 'Не удалось выполнить импорт. Проверьте правильность имени поля и формата данных.',
       treeNotImp: 'Древовидные таблицы не поддерживают импорт.',
-      treeCrossDrag: '只能拖拽第一层级的数据',
-      treeDragChild: '父级数据不能拖拽到自己的子级中',
+      treeCrossDrag: '只能拖拽第一层级',
+      treeDragChild: '父级不能拖拽到自己的子级中',
       reqPlugin: '可选扩展插件 "{1}" https://vxeui.com/other{0}/#/{1}/install'
     },
     table: {
@@ -130,7 +130,7 @@ export default {
       setting: {
         colSort: 'сортировать',
         sortHelpTip: 'Нажмите и перетащите значок, чтобы изменить порядок столбцов.',
-        colTitle: 'заголовок',
+        colTitle: '列标题',
         colResizable: 'Ширина столбца (пикселей)',
         colVisible: 'Отображать ли',
         colFixed: 'заморозить столбец',
diff --git a/packages/locale/lang/ug-CN.ts b/packages/locale/lang/ug-CN.ts
index c557dd28b0..9bed511fef 100644
--- a/packages/locale/lang/ug-CN.ts
+++ b/packages/locale/lang/ug-CN.ts
@@ -47,8 +47,8 @@ export default {
       notExp: 'بۇ تور كۆرگۈچ ئەكىرىش/ئاچىقىشنى قوللىمايدۇ',
       impFields: 'ئەكىرىشى مەغلۇپ بولدى،سۆز ھەم ئۇچۇر فورماتىنى تەكشۈرۈڭ',
       treeNotImp: 'دەرەخ شەكىللىك جەدىۋەلنى ئەكىرىشنى قوللىمايدۇ',
-      treeCrossDrag: '只能拖拽第一层级的数据',
-      treeDragChild: '父级数据不能拖拽到自己的子级中',
+      treeCrossDrag: '只能拖拽第一层级',
+      treeDragChild: '父级不能拖拽到自己的子级中',
       reqPlugin: '可选扩展插件 "{1}" https://vxeui.com/other{0}/#/{1}/install'
     },
     table: {
@@ -130,7 +130,7 @@ export default {
       setting: {
         colSort: 'تەرتىپلەش',
         sortHelpTip: 'بىسىپ ياكى سىنبەلگىنى تارتسىڭىز قۇرنى تەرتىپلىيەلەيسىز ',
-        colTitle: 'تېما',
+        colTitle: '列标题',
         colResizable: 'قۇر كەڭلىڭى(پېكسىل)',
         colVisible: 'كۆرۈنەمدۇ-كۆرۈنمەمدۇ',
         colFixed: 'قۇرنى توڭلىتىش',
diff --git a/packages/locale/lang/uk-UA.ts b/packages/locale/lang/uk-UA.ts
index 249c173eb0..dfa24ba44c 100644
--- a/packages/locale/lang/uk-UA.ts
+++ b/packages/locale/lang/uk-UA.ts
@@ -47,8 +47,8 @@ export default {
       notExp: '该浏览器不支持导入/导出功能',
       impFields: '导入失败，请检查字段名和数据格式是否正确',
       treeNotImp: '树表格不支持导入',
-      treeCrossDrag: '只能拖拽第一层级的数据',
-      treeDragChild: '父级数据不能拖拽到自己的子级中',
+      treeCrossDrag: '只能拖拽第一层级',
+      treeDragChild: '父级不能拖拽到自己的子级中',
       reqPlugin: '可选扩展插件 "{1}" https://vxeui.com/other{0}/#/{1}/install'
     },
     table: {
@@ -130,7 +130,7 @@ export default {
       setting: {
         colSort: '排序',
         sortHelpTip: '点击并拖动图标可以调整列的排序',
-        colTitle: '标题',
+        colTitle: '列标题',
         colResizable: '列宽（像素）',
         colVisible: '是否显示',
         colFixed: '冻结列',
diff --git a/packages/locale/lang/vi-VN.ts b/packages/locale/lang/vi-VN.ts
index 249c173eb0..dfa24ba44c 100644
--- a/packages/locale/lang/vi-VN.ts
+++ b/packages/locale/lang/vi-VN.ts
@@ -47,8 +47,8 @@ export default {
       notExp: '该浏览器不支持导入/导出功能',
       impFields: '导入失败，请检查字段名和数据格式是否正确',
       treeNotImp: '树表格不支持导入',
-      treeCrossDrag: '只能拖拽第一层级的数据',
-      treeDragChild: '父级数据不能拖拽到自己的子级中',
+      treeCrossDrag: '只能拖拽第一层级',
+      treeDragChild: '父级不能拖拽到自己的子级中',
       reqPlugin: '可选扩展插件 "{1}" https://vxeui.com/other{0}/#/{1}/install'
     },
     table: {
@@ -130,7 +130,7 @@ export default {
       setting: {
         colSort: '排序',
         sortHelpTip: '点击并拖动图标可以调整列的排序',
-        colTitle: '标题',
+        colTitle: '列标题',
         colResizable: '列宽（像素）',
         colVisible: '是否显示',
         colFixed: '冻结列',
diff --git a/packages/locale/lang/zh-CHT.ts b/packages/locale/lang/zh-CHT.ts
index 3ca28054d8..4d31c1643e 100644
--- a/packages/locale/lang/zh-CHT.ts
+++ b/packages/locale/lang/zh-CHT.ts
@@ -47,8 +47,8 @@ export default {
       notExp: '該瀏覽器不支援匯入/匯出功能',
       impFields: '匯入失敗，請檢查欄位名稱和資料格式是否正確',
       treeNotImp: '樹表格不支援導入',
-      treeCrossDrag: '只能拖拽第一层级的数据',
-      treeDragChild: '父级数据不能拖拽到自己的子级中',
+      treeCrossDrag: '只能拖拽第一层级',
+      treeDragChild: '父级不能拖拽到自己的子级中',
       reqPlugin: '可選擴展插件 "{1}" https://vxeui.com/other{0}/#/{1}/install'
     },
     table: {
@@ -130,7 +130,7 @@ export default {
       setting: {
         colSort: '排序',
         sortHelpTip: '點擊並拖曳圖示可以調整列的排序',
-        colTitle: '標題',
+        colTitle: '列標題',
         colResizable: '列寬（像素）',
         colVisible: '是否顯示',
         colFixed: '凍結列',
diff --git a/packages/locale/lang/zh-CN.ts b/packages/locale/lang/zh-CN.ts
index 9dc89b521b..ea896a044f 100644
--- a/packages/locale/lang/zh-CN.ts
+++ b/packages/locale/lang/zh-CN.ts
@@ -47,8 +47,8 @@ export default {
       notExp: '该浏览器不支持导入/导出功能',
       impFields: '导入失败，请检查字段名和数据格式是否正确',
       treeNotImp: '树表格不支持导入',
-      treeCrossDrag: '只能拖拽第一层级的数据',
-      treeDragChild: '父级数据不能拖拽到自己的子级中',
+      treeCrossDrag: '只能拖拽第一层级',
+      treeDragChild: '父级不能拖拽到自己的子级中',
       reqPlugin: '可选扩展插件 "{1}" https://vxeui.com/other{0}/#/{1}/install'
     },
     table: {
@@ -130,7 +130,7 @@ export default {
       setting: {
         colSort: '排序',
         sortHelpTip: '点击并拖动图标可以调整列的排序',
-        colTitle: '标题',
+        colTitle: '列标题',
         colResizable: '列宽（像素）',
         colVisible: '是否显示',
         colFixed: '冻结列',
diff --git a/packages/table/module/custom/hook.ts b/packages/table/module/custom/hook.ts
index 2a1d6f8d2e..b49f6893dd 100644
--- a/packages/table/module/custom/hook.ts
+++ b/packages/table/module/custom/hook.ts
@@ -39,7 +39,7 @@ VxeUI.hooks.add('tableCustomModule', {
         sortMaps[colid] = column.renderSortNumber
         fixedMaps[colid] = column.fixed
         visibleMaps[colid] = column.visible
-      }, { children: 'children' })
+      })
       customStore.oldSortMaps = sortMaps
       customStore.oldFixedMaps = fixedMaps
       customStore.oldVisibleMaps = visibleMaps
@@ -146,6 +146,7 @@ VxeUI.hooks.add('tableCustomModule', {
           column.halfVisible = false
         })
         customStore.isAll = isAll
+        reactData.isCustomStatus = true
         $xeTable.handleCustom()
         $xeTable.saveCustomStore('update:visible')
       } else {
diff --git a/packages/table/module/custom/panel.ts b/packages/table/module/custom/panel.ts
index 4d097b2513..e2dd75a8fb 100644
--- a/packages/table/module/custom/panel.ts
+++ b/packages/table/module/custom/panel.ts
@@ -1,11 +1,11 @@
 import { defineComponent, h, inject, ref, Ref, VNode, PropType, nextTick, TransitionGroup, createCommentVNode } from 'vue'
 import { VxeUI } from '../../../ui'
 import { formatText } from '../../../ui/src/utils'
-import { addClass, removeClass } from '../../../ui/src/dom'
+import { tpImg, addClass, removeClass } from '../../../ui/src/dom'
 import { errLog } from '../../../ui/src/log'
 import XEUtils from 'xe-utils'
 
-import type { VxeModalComponent, VxeDrawerComponent, VxeButtonComponent, VxeRadioGroupComponent, VxeTooltipComponent, VxeInputComponent, VxeButtonEvents } from 'vxe-pc-ui'
+import type { VxeModalComponent, VxeDrawerComponent, VxeButtonComponent, VxeRadioGroupComponent, VxeInputComponent, VxeButtonEvents } from 'vxe-pc-ui'
 import type { VxeTableDefines, VxeTablePrivateMethods, VxeTableConstructor, VxeTableMethods, VxeColumnPropTypes } from '../../../../types'
 
 const { getI18n, getIcon, renderEmptyElement } = VxeUI
@@ -23,21 +23,23 @@ export default defineComponent({
     const VxeUIDrawerComponent = VxeUI.getComponent<VxeDrawerComponent>('VxeDrawer')
     const VxeUIButtonComponent = VxeUI.getComponent<VxeButtonComponent>('VxeButton')
     const VxeUINumberInputComponent = VxeUI.getComponent<VxeInputComponent>('VxeNumberInput')
-    const VxeUITooltipComponent = VxeUI.getComponent<VxeTooltipComponent>('VxeTooltip')
     const VxeUIRadioGroupComponent = VxeUI.getComponent<VxeRadioGroupComponent>('VxeRadioGroup')
 
     const $xeTable = inject('$xeTable', {} as VxeTableConstructor & VxeTableMethods & VxeTablePrivateMethods)
 
-    const { props: tableProps, reactData } = $xeTable
-    const { computeCustomOpts, computeColumnOpts, computeIsMaxFixedColumn, computeResizableOpts } = $xeTable.getComputeMaps()
+    const { props: tableProps, reactData, internalData } = $xeTable
+    const { computeCustomOpts, computeColumnDragOpts, computeColumnOpts, computeIsMaxFixedColumn, computeResizableOpts } = $xeTable.getComputeMaps()
 
     const refElem = ref() as Ref<HTMLDivElement>
     const bodyElemRef = ref() as Ref<HTMLDivElement>
-    const dragHintElemRef = ref() as Ref<HTMLDivElement>
+    const refDragLineElem = ref() as Ref<HTMLDivElement>
+    const refDragTipElem = ref() as Ref<HTMLDivElement>
 
     const dragColumnRef = ref<VxeTableDefines.ColumnInfo | null>()
 
-    let prevDropTrEl: any
+    let prevDragCol: VxeTableDefines.ColumnInfo | undefined
+    let prevDragToChild = false
+    let prevDragPos: any
 
     const handleWrapperMouseenterEvent = (evnt: Event) => {
       const { customStore } = props
@@ -56,6 +58,7 @@ export default defineComponent({
     }
 
     const confirmCustomEvent: VxeButtonEvents.Click = ({ $event }) => {
+      reactData.isCustomStatus = true
       $xeTable.saveCustom()
       $xeTable.closeCustom()
       $xeTable.emitCustomEvent('confirm', $event)
@@ -116,6 +119,7 @@ export default defineComponent({
           item.renderVisible = isChecked
           item.halfVisible = false
         })
+        reactData.isCustomStatus = true
         $xeTable.handleCustom()
         $xeTable.saveCustomStore('update:visible')
       } else {
@@ -128,6 +132,19 @@ export default defineComponent({
       $xeTable.checkCustomStatus()
     }
 
+    const changeColumnWidth = (column: VxeTableDefines.ColumnInfo) => {
+      const customOpts = computeCustomOpts.value
+      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')
+        }
+      }
+    }
+
     const changeFixedOption = (column: VxeTableDefines.ColumnInfo, colFixed: VxeColumnPropTypes.Fixed) => {
       const isMaxFixedColumn = computeIsMaxFixedColumn.value
       const customOpts = computeCustomOpts.value
@@ -145,6 +162,7 @@ export default defineComponent({
             })
           }
         }
+        reactData.isCustomStatus = true
         $xeTable.handleCustom()
         $xeTable.saveCustomStore('update:fixed')
       } else {
@@ -166,130 +184,334 @@ export default defineComponent({
       $xeTable.toggleCustomAllCheckbox()
     }
 
+    const showDropTip = (evnt: DragEvent | MouseEvent, optEl: HTMLElement | null, showLine: boolean, dragPos: string) => {
+      const el = bodyElemRef.value
+      if (!el) {
+        return
+      }
+      const wrapperRect = el.getBoundingClientRect()
+      if (optEl) {
+        const dragLineEl = refDragLineElem.value
+        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 = refDragTipElem.value
+      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')
+      }
+    }
+
+    const hideDropTip = () => {
+      const dragTipEl = refDragTipElem.value
+      const dragLineEl = refDragLineElem.value
+      if (dragTipEl) {
+        dragTipEl.style.display = ''
+      }
+      if (dragLineEl) {
+        dragLineEl.style.display = ''
+      }
+    }
+
     const sortMousedownEvent = (evnt: DragEvent) => {
       const btnEl = evnt.currentTarget as HTMLElement
-      const tdEl = btnEl.parentNode as HTMLElement
-      const trEl = tdEl.parentNode as HTMLElement
+      const cellEl = btnEl.parentElement as HTMLElement
+      const tdEl = cellEl.parentElement as HTMLElement
+      const trEl = tdEl.parentElement as HTMLElement
       const colid = trEl.getAttribute('colid')
       const column = $xeTable.getColumnById(colid)
       trEl.draggable = true
       dragColumnRef.value = column
       addClass(trEl, 'active--drag-origin')
-      updateDropHint(evnt)
     }
 
     const sortMouseupEvent = (evnt: MouseEvent) => {
       const btnEl = evnt.currentTarget as HTMLElement
-      const tdEl = btnEl.parentNode as HTMLElement
-      const trEl = tdEl.parentNode as HTMLElement
-      const dragHintEl = dragHintElemRef.value
+      const cellEl = btnEl.parentElement as HTMLElement
+      const tdEl = cellEl.parentElement as HTMLElement
+      const trEl = tdEl.parentElement as HTMLElement
+      hideDropTip()
       trEl.draggable = false
       dragColumnRef.value = null
       removeClass(trEl, 'active--drag-origin')
-      if (dragHintEl) {
-        dragHintEl.style.display = ''
-      }
     }
 
     const sortDragstartEvent = (evnt: DragEvent) => {
-      const img = new Image()
       if (evnt.dataTransfer) {
+        const img = new Image()
+        img.src = tpImg
         evnt.dataTransfer.setDragImage(img, 0, 0)
       }
     }
 
     const sortDragendEvent = (evnt: DragEvent) => {
+      const { mouseConfig } = tableProps
       const { customColumnList } = reactData
+      const { collectColumn } = internalData
       const customOpts = computeCustomOpts.value
+      const { immediate } = customOpts
       const trEl = evnt.currentTarget as HTMLElement
-      const dragHintEl = dragHintElemRef.value
-      if (prevDropTrEl) {
+      const dragCol = dragColumnRef.value
+      const columnDragOpts = computeColumnDragOpts.value
+      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 = XEUtils.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 = XEUtils.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 as any,
+                offsetIndex: dragOffsetIndex
+              })
+              : true
+          ).then((status) => {
+            if (!status) {
+              return
+            }
+
+            let oafIndex = -1
+            let nafIndex = -1
+
+            const oldAllMaps: Record<string, any> = {}
+            XEUtils.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 (VxeUI.modal) {
+                      VxeUI.modal.message({
+                        status: 'error',
+                        content: 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 (VxeUI.modal) {
+                      VxeUI.modal.message({
+                        status: 'error',
+                        content: getI18n('vxe.error.treeDragChild')
+                      })
+                    }
+                    return
+                  }
+                }
+              } else {
+              // 根到根
+              }
+
+              const oldewMatchRest = XEUtils.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 = XEUtils.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
+                }
+              }
+
+              XEUtils.eachTree(collectColumn, (column, index, items, path, parent) => {
+                if (!parent) {
+                  const sortIndex = index + 1
+                  column.renderSortNumber = sortIndex
+                }
+              })
+            } else {
+              oafIndex = XEUtils.findIndexOf(customColumnList, item => item.id === oldColumn.id)
+              customColumnList.splice(oafIndex, 1)
+
+              nafIndex = XEUtils.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')
       }
+
+      hideDropTip()
       dragColumnRef.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) {
-        XEUtils.eachTree(customColumnList, (column, index, items, path, parent) => {
-          if (!parent) {
-            const sortIndex = index + 1
-            column.renderSortNumber = sortIndex
-          }
-        })
-        $xeTable.handleCustom()
-        $xeTable.saveCustomStore('update:sort')
-      }
     }
 
     const sortDragoverEvent = (evnt: DragEvent) => {
-      const trEl = evnt.currentTarget as HTMLElement
-      if (prevDropTrEl !== trEl) {
-        removeClass(prevDropTrEl, 'active--drag-target')
-      }
-      const colid = trEl.getAttribute('colid')
+      const customOpts = computeCustomOpts.value
+      const { immediate } = customOpts
+      const columnDragOpts = computeColumnDragOpts.value
+      const { isCrossDrag, isToChildDrag } = columnDragOpts
+      const optEl = evnt.currentTarget as HTMLElement
+      const hasCtrlKey = evnt.ctrlKey
+      const colid = optEl.getAttribute('colid')
       const column = $xeTable.getColumnById(colid)
-      // 是否移入有效元行
-      if (column && column.level === 1) {
+      const dragCol = dragColumnRef.value
+      // 是否移入有效列
+      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)
-        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) {
+          showDropTip(evnt, optEl, false, dragPos)
+          return
+        }
+        prevDragToChild = !!(isToChildDrag && hasCtrlKey && immediate)
+        prevDragCol = column
+        prevDragPos = dragPos
+        showDropTip(evnt, optEl, true, dragPos)
       }
-      updateDropHint(evnt)
     }
 
-    const updateDropHint = (evnt: DragEvent) => {
-      const dragHintEl = dragHintElemRef.value
-      const bodyEl = bodyElemRef.value
-      if (!bodyEl) {
-        return
-      }
-      if (dragHintEl) {
-        const wrapperEl = bodyEl.parentNode as HTMLElement
-        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 renderDragTip = () => {
+      const dragCol = dragColumnRef.value
+      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', getIcon().TABLE_DRAG_STATUS_ROW]
+              }),
+              h('span', {
+                class: ['vxe-table-custom-popup--drag-tip-sub-status', getIcon().TABLE_DRAG_STATUS_SUB_ROW]
+              }),
+              h('span', {
+                class: ['vxe-table-custom-popup--drag-tip-disabled-status', getIcon().TABLE_DRAG_DISABLED]
+              })
+            ]),
+            h('div', {
+              class: 'vxe-table--drag-tip-content'
+            }, getI18n('vxe.custom.cstmDragTarget', [dragCol && dragCol.type !== 'html' ? dragCol.getTitle() : '']))
+          ])
+        ])
+      ])
     }
 
     const renderSimplePanel = () => {
       const { customStore } = props
       const { isCustomStatus, customColumnList } = reactData
       const customOpts = computeCustomOpts.value
+      const { immediate } = customOpts
+      const columnDragOpts = computeColumnDragOpts.value
       const { maxHeight } = customStore
       const { checkMethod, visibleMethod, allowVisible, allowSort, allowFixed, trigger, placement } = customOpts
       const isMaxFixedColumn = computeIsMaxFixedColumn.value
+      const { isCrossDrag } = columnDragOpts
       const slots = customOpts.slots || {}
       const headerSlot = slots.header
       const topSlot = slots.top
@@ -300,7 +522,6 @@ export default defineComponent({
       const customWrapperOns: any = {}
       const isAllChecked = customStore.isAll
       const isAllIndeterminate = customStore.isIndeterminate
-      const dragColumn = dragColumnRef.value
       // hover 触发
       if (trigger === 'hover') {
         customWrapperOns.onMouseenter = handleWrapperMouseenterEvent
@@ -354,38 +575,42 @@ export default defineComponent({
                   })
                 ])
                 : createCommentVNode(),
-              allowSort && column.level === 1
-                ? h('div', {
-                  class: 'vxe-table-custom--sort-option'
-                }, [
-                  h('span', {
-                    class: ['vxe-table-custom--sort-btn', {
-                      'is--disabled': isDisabled || isHidden
-                    }],
-                    title: getI18n('vxe.custom.setting.sortHelpTip'),
-                    ...(isDisabled || isHidden
-                      ? {}
-                      : {
-                          onMousedown: sortMousedownEvent,
-                          onMouseup: sortMouseupEvent
-                        })
+              h('div', {
+                class: 'vxe-table-custom--name-option'
+              }, [
+                allowSort && ((isCrossDrag ? immediate : false) || column.level === 1)
+                  ? h('div', {
+                    class: 'vxe-table-custom--sort-option'
                   }, [
-                    h('i', {
-                      class: getIcon().TABLE_CUSTOM_SORT
-                    })
+                    h('span', {
+                      class: ['vxe-table-custom--sort-btn', {
+                        'is--disabled': isDisabled || isHidden || column.renderFixed
+                      }],
+                      title: getI18n('vxe.custom.setting.sortHelpTip'),
+                      ...(isDisabled || isHidden || column.renderFixed
+                        ? {}
+                        : {
+                            onMousedown: sortMousedownEvent,
+                            onMouseup: sortMouseupEvent
+                          })
+                    }, [
+                      h('i', {
+                        class: getIcon().TABLE_CUSTOM_SORT
+                      })
+                    ])
                   ])
-                ])
-                : createCommentVNode(),
-              column.type === 'html'
-                ? h('div', {
-                  key: '1',
-                  class: 'vxe-table-custom--checkbox-label',
-                  innerHTML: colTitle
-                })
-                : h('div', {
-                  key: '0',
-                  class: 'vxe-table-custom--checkbox-label'
-                }, colTitle),
+                  : createCommentVNode(),
+                column.type === 'html'
+                  ? h('div', {
+                    key: '1',
+                    class: 'vxe-table-custom--checkbox-label',
+                    innerHTML: colTitle
+                  })
+                  : h('div', {
+                    key: '0',
+                    class: 'vxe-table-custom--checkbox-label'
+                  }, colTitle)
+              ]),
               !parent && allowFixed
                 ? h('div', {
                   class: 'vxe-table-custom--fixed-option'
@@ -492,10 +717,7 @@ export default defineComponent({
                   class: 'vxe-table-custom--panel-bottom'
                 }, $xeTable.callSlot(bottomSlot, params))
                 : renderEmptyElement($xeTable),
-              h('div', {
-                ref: dragHintElemRef,
-                class: 'vxe-table-custom-popup--drag-hint'
-              }, getI18n('vxe.custom.cstmDragTarget', [dragColumn && dragColumn.type !== 'html' ? dragColumn.getTitle() : '']))
+              renderDragTip()
             ]),
             customOpts.showFooter
               ? h('div', {
@@ -514,7 +736,7 @@ export default defineComponent({
                           onClick: resetCustomEvent
                         })
                         : createCommentVNode(),
-                      customOpts.immediate
+                      immediate
                         ? (VxeUIButtonComponent
                             ? h(VxeUIButtonComponent, {
                               mode: 'text',
@@ -529,7 +751,7 @@ export default defineComponent({
                               onClick: cancelCustomEvent
                             })
                             : createCommentVNode()),
-                      customOpts.immediate
+                      immediate
                         ? createCommentVNode()
                         : (VxeUIButtonComponent
                             ? h(VxeUIButtonComponent, {
@@ -551,6 +773,8 @@ export default defineComponent({
       const { resizable: allResizable } = tableProps
       const { isCustomStatus, customColumnList } = reactData
       const customOpts = computeCustomOpts.value
+      const { immediate } = customOpts
+      const columnDragOpts = computeColumnDragOpts.value
       const { mode, modalOptions, drawerOptions, allowVisible, allowSort, allowFixed, allowResizable, checkMethod, visibleMethod } = customOpts
       const columnOpts = computeColumnOpts.value
       const { maxFixedSize } = columnOpts
@@ -559,6 +783,7 @@ export default defineComponent({
       const modalOpts = Object.assign({}, modalOptions)
       const drawerOpts = Object.assign({}, drawerOptions)
       const isMaxFixedColumn = computeIsMaxFixedColumn.value
+      const { isCrossDrag } = columnDragOpts
       const slots = customOpts.slots || {}
       const headerSlot = slots.header
       const topSlot = slots.top
@@ -568,7 +793,6 @@ export default defineComponent({
       const trVNs: VNode[] = []
       const isAllChecked = customStore.isAll
       const isAllIndeterminate = customStore.isIndeterminate
-      const dragColumn = dragColumnRef.value
       const params = {
         $table: $xeTable,
         $grid: $xeTable.xegrid,
@@ -639,44 +863,46 @@ export default defineComponent({
                   ])
                 ])
                 : createCommentVNode(),
-              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', {
-                        'is--disabled': isDisabled || isHidden
-                      }],
-                      title: getI18n('vxe.custom.setting.sortHelpTip'),
-                      ...(isDisabled || isHidden
-                        ? {}
-                        : {
-                            onMousedown: sortMousedownEvent,
-                            onMouseup: sortMouseupEvent
-                          })
-                    }, [
-                      h('i', {
-                        class: getIcon().TABLE_CUSTOM_SORT
-                      })
-                    ])
-                    : h('span', '-')
-                ])
-                : createCommentVNode(),
               h('td', {
                 class: 'vxe-table-custom-popup--column-item col--name'
               }, [
-                column.type === 'html'
-                  ? h('div', {
-                    key: '1',
-                    class: 'vxe-table-custom-popup--name',
-                    innerHTML: colTitle
-                  })
-                  : h('div', {
-                    key: '0',
-                    class: 'vxe-table-custom-popup--name',
-                    title: colTitle
-                  }, colTitle)
+                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 || column.renderFixed
+                          }],
+                          title: getI18n('vxe.custom.setting.sortHelpTip'),
+                          ...(isDisabled || isHidden || column.renderFixed
+                            ? {}
+                            : {
+                                onMousedown: sortMousedownEvent,
+                                onMouseup: sortMouseupEvent
+                              })
+                        }, [
+                          h('i', {
+                            class: getIcon().TABLE_CUSTOM_SORT
+                          })
+                        ])
+                        : h('div', {
+                          class: 'vxe-table-custom-popup--column-sort-placeholder'
+                        }))
+                    : createCommentVNode(),
+                  column.type === 'html'
+                    ? h('div', {
+                      key: '1',
+                      class: 'vxe-table-custom-popup--title',
+                      innerHTML: colTitle
+                    })
+                    : h('div', {
+                      key: '0',
+                      class: 'vxe-table-custom-popup--title',
+                      title: colTitle
+                    }, colTitle)
+                ])
               ]),
               allowResizable
                 ? h('td', {
@@ -691,12 +917,17 @@ export default defineComponent({
                         VxeUINumberInputComponent
                           ? h(VxeUINumberInputComponent, {
                             type: 'integer',
+                            immediate: false,
                             disabled: isDisabled || isHidden,
                             modelValue: column.renderResizeWidth,
                             min: customMinWidth || undefined,
                             max: customMaxWidth || undefined,
                             'onUpdate:modelValue' (value: any) {
-                              column.renderResizeWidth = Math.max(0, Number(value))
+                              const width = Math.max(0, Number(value))
+                              column.renderResizeWidth = width
+                            },
+                            onChange () {
+                              changeColumnWidth(column)
                             }
                           })
                           : createCommentVNode()
@@ -722,7 +953,7 @@ export default defineComponent({
                               { label: getI18n('vxe.custom.setting.fixedRight'), value: 'right', disabled: isDisabled || isHidden || isMaxFixedColumn }
                             ],
                             'onUpdate:modelValue' (value: any) {
-                              column.renderFixed = value
+                              changeFixedOption(column, value)
                             }
                           })
                           : createCommentVNode()
@@ -757,11 +988,6 @@ export default defineComponent({
                       class: 'vxe-table-custom-popup--table-col-seq'
                     })
                     : createCommentVNode(),
-                  allowSort
-                    ? h('col', {
-                      class: 'vxe-table-custom-popup--table-col-sort'
-                    })
-                    : createCommentVNode(),
                   h('col', {
                     class: 'vxe-table-custom-popup--table-col-title'
                   }),
@@ -797,26 +1023,6 @@ export default defineComponent({
                         ])
                       ])
                       : createCommentVNode(),
-                    allowSort
-                      ? h('th', {}, [
-                        h('span', {
-                          class: 'vxe-table-custom-popup--table-sort-help-title'
-                        }, getI18n('vxe.custom.setting.colSort')),
-                        VxeUITooltipComponent
-                          ? h(VxeUITooltipComponent, {
-                            enterable: true,
-                            content: getI18n('vxe.custom.setting.sortHelpTip'),
-                            popupClassName: 'vxe-table--ignore-clear'
-                          }, {
-                            default: () => {
-                              return h('i', {
-                                class: 'vxe-table-custom-popup--table-sort-help-icon vxe-icon-question-circle-fill'
-                              })
-                            }
-                          })
-                          : createCommentVNode()
-                      ])
-                      : createCommentVNode(),
                     h('th', {}, getI18n('vxe.custom.setting.colTitle')),
                     allowResizable
                       ? h('th', {}, getI18n('vxe.custom.setting.colResizable'))
@@ -840,10 +1046,7 @@ export default defineComponent({
                 class: 'vxe-table-custom-popup--table-bottom'
               }, $xeTable.callSlot(bottomSlot, params))
               : renderEmptyElement($xeTable),
-            h('div', {
-              ref: dragHintElemRef,
-              class: 'vxe-table-custom-popup--drag-hint'
-            }, getI18n('vxe.custom.cstmDragTarget', [dragColumn ? dragColumn.getTitle() : '']))
+            renderDragTip()
           ])
         },
         footer: () => {
@@ -860,19 +1063,28 @@ export default defineComponent({
                 onClick: resetCustomEvent
               })
               : createCommentVNode(),
-            VxeUIButtonComponent
-              ? h(VxeUIButtonComponent, {
-                content: customOpts.resetButtonText || getI18n('vxe.custom.cstmCancel'),
-                onClick: cancelCustomEvent
-              })
-              : createCommentVNode(),
-            VxeUIButtonComponent
-              ? h(VxeUIButtonComponent, {
-                status: 'primary',
-                content: customOpts.confirmButtonText || getI18n('vxe.custom.cstmConfirm'),
-                onClick: confirmCustomEvent
-              })
-              : createCommentVNode()
+            immediate
+              ? (VxeUIButtonComponent
+                  ? h(VxeUIButtonComponent, {
+                    content: customOpts.closeButtonText || getI18n('vxe.table.customClose'),
+                    onClick: cancelCloseEvent
+                  })
+                  : createCommentVNode())
+              : (VxeUIButtonComponent
+                  ? h(VxeUIButtonComponent, {
+                    content: customOpts.cancelButtonText || getI18n('vxe.table.customCancel'),
+                    onClick: cancelCustomEvent
+                  })
+                  : createCommentVNode()),
+            immediate
+              ? createCommentVNode()
+              : (VxeUIButtonComponent
+                  ? h(VxeUIButtonComponent, {
+                    status: 'primary',
+                    content: customOpts.confirmButtonText || getI18n('vxe.custom.cstmConfirm'),
+                    onClick: confirmCustomEvent
+                  })
+                  : createCommentVNode())
           ])
         }
       }
@@ -950,9 +1162,6 @@ export default defineComponent({
         if (!VxeUINumberInputComponent) {
           errLog('vxe.error.reqComp', ['vxe-number-input'])
         }
-        if (!VxeUITooltipComponent) {
-          errLog('vxe.error.reqComp', ['vxe-tooltip'])
-        }
         if (!VxeUIRadioGroupComponent) {
           errLog('vxe.error.reqComp', ['vxe-radio-group'])
         }
diff --git a/packages/table/src/body.ts b/packages/table/src/body.ts
index e6d1a3b1c2..f694551c79 100644
--- a/packages/table/src/body.ts
+++ b/packages/table/src/body.ts
@@ -478,7 +478,7 @@ export default defineComponent({
               class: trClass,
               rowid: rowid,
               style: rowStyle ? (XEUtils.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,
               ...trOn
             }, {
               default: () => tdVNs
diff --git a/packages/table/src/cell.ts b/packages/table/src/cell.ts
index 2fd694e535..aa73304888 100644
--- a/packages/table/src/cell.ts
+++ b/packages/table/src/cell.ts
@@ -103,10 +103,10 @@ function renderHeaderCellDragIcon (params: VxeTableDefines.CellRenderHeaderParam
   const { computeColumnOpts, computeColumnDragOpts } = $table.getComputeMaps()
   const columnOpts = computeColumnOpts.value
   const columnDragOpts = computeColumnDragOpts.value
-  const { showIcon, icon, visibleMethod, disabledMethod } = columnDragOpts
+  const { showIcon, icon, isCrossDrag, visibleMethod, disabledMethod } = columnDragOpts
   const isDisabled = disabledMethod && disabledMethod(params)
   if (columnOpts.drag && showIcon && (!visibleMethod || visibleMethod(params))) {
-    if (!(column.fixed || column.parentId)) {
+    if (!column.fixed && (isCrossDrag || !column.parentId)) {
       return h('span', {
         key: 'dg',
         class: ['vxe-cell--drag-handle', {
diff --git a/packages/table/src/group.ts b/packages/table/src/group.ts
index cb0fef5491..42d731e059 100644
--- a/packages/table/src/group.ts
+++ b/packages/table/src/group.ts
@@ -17,7 +17,7 @@ export default defineComponent({
     }
     const columnConfig = Cell.createColumn($xeTable, props)
     const columnSlots: {
-      header?: Slot;
+      header?: Slot
     } = {}
 
     if (slots.header) {
diff --git a/packages/table/src/table.ts b/packages/table/src/table.ts
index b3d661a429..29897a4547 100644
--- a/packages/table/src/table.ts
+++ b/packages/table/src/table.ts
@@ -1,6 +1,6 @@
 import { defineComponent, h, ComponentPublicInstance, reactive, ref, Ref, provide, inject, nextTick, onActivated, onDeactivated, onBeforeUnmount, onUnmounted, watch, computed, ComputedRef, onMounted } from 'vue'
 import XEUtils from 'xe-utils'
-import { browse, isPx, isScale, hasClass, addClass, removeClass, getEventTargetNode, getPaddingTopBottomSize, setScrollTop, setScrollLeft, isNodeElement } from '../../ui/src/dom'
+import { tpImg, browse, isPx, isScale, hasClass, addClass, removeClass, getEventTargetNode, getPaddingTopBottomSize, setScrollTop, setScrollLeft, isNodeElement } from '../../ui/src/dom'
 import { getLastZIndex, nextZIndex, hasChildrenList, getFuncText, isEnableConf, formatText, eqEmptyValue } from '../../ui/src/utils'
 import { VxeUI } from '../../ui'
 import Cell from './cell'
@@ -1115,6 +1115,8 @@ export default defineComponent({
       const fullColumnFieldData: Record<string, VxeTableDefines.ColumnCacheItem> = internalData.fullColumnFieldData = {}
       const mouseOpts = computeMouseOpts.value
       const columnOpts = computeColumnOpts.value
+      const columnDragOpts = computeColumnDragOpts.value
+      const { isCrossDrag, isSelfToChildDrag } = columnDragOpts
       const rowOpts = computeRowOpts.value
       const isGroup = collectColumn.some(hasChildrenList)
       let isAllOverflow = !!props.showOverflow
@@ -1128,12 +1130,14 @@ export default defineComponent({
         const { id: colid, field, fixed, type, treeNode } = column
         const rest = { $index: -1, _index: -1, column, colid, index, items, parent: parent || null, width: 0 }
         if (field) {
-          if (process.env.VUE_APP_VXE_ENV === 'development') {
-            if (fullColumnFieldData[field]) {
-              warnLog('vxe.error.colRepet', ['field', field])
-            }
+          if (fullColumnFieldData[field]) {
+            errLog('vxe.error.colRepet', ['field', field])
           }
           fullColumnFieldData[field] = rest
+        } else {
+          if (isCrossDrag || isSelfToChildDrag) {
+            errLog('vxe.error.emptyProp', ['column.field'])
+          }
         }
         if (!hasFixed && fixed) {
           hasFixed = fixed
@@ -1203,10 +1207,10 @@ export default defineComponent({
       if (process.env.VUE_APP_VXE_ENV === 'development') {
         if (htmlColumn) {
           if (!columnOpts.useKey) {
-            errLog('vxe.error.reqProp', ['column-config.useKey', 'column.type=html'])
+            errLog('vxe.error.reqProp', ['column-config.useKey & column.type=html'])
           }
           if (!rowOpts.useKey) {
-            errLog('vxe.error.reqProp', ['row-config.useKey', 'column.type=html'])
+            errLog('vxe.error.reqProp', ['row-config.useKey & column.type=html'])
           }
         }
       }
@@ -4099,6 +4103,10 @@ export default defineComponent({
       recalculate (reFull?: boolean) {
         return new Promise<void>(resolve => {
           const { rceTimeout } = internalData
+          const el = refElem.value
+          if (el && el.clientWidth) {
+            autoCellWidth()
+          }
           if (rceTimeout) {
             clearTimeout(rceTimeout)
             nextTick(() => {
@@ -4112,7 +4120,7 @@ export default defineComponent({
           internalData.rceTimeout = setTimeout(() => {
             internalData.rceTimeout = undefined
             handleRecalculateLayout(!!reFull)
-          }, 10)
+          }, 20)
         })
       },
       openTooltip (target, content) {
@@ -6007,7 +6015,7 @@ export default defineComponent({
       let tipContent = ''
       if (tooltipMethod) {
         tipContent = `${tooltipMethod({
-          column: dragCol
+          column: dragCol as VxeTableDefines.ColumnInfo
         }) || ''}`
       } else {
         tipContent = getI18n('vxe.table.dragTip', [tdEl.textContent || ''])
@@ -6043,11 +6051,18 @@ export default defineComponent({
         if (cdLineEl) {
           if (showLine) {
             const thRect = thEl.getBoundingClientRect()
+            const offsetTop = Math.max(0, thRect.y - wrapperRect.y)
             cdLineEl.style.display = 'block'
+            cdLineEl.style.top = `${offsetTop}px`
             cdLineEl.style.left = `${Math.max(1, thRect.x - wrapperRect.x)}px`
             cdLineEl.style.width = `${thRect.width}px`
-            cdLineEl.style.height = `${wrapperRect.height - scrollbarHeight}px`
+            if (prevDragToChild) {
+              cdLineEl.style.height = `${thRect.height}px`
+            } else {
+              cdLineEl.style.height = `${wrapperRect.height - offsetTop - scrollbarHeight}px`
+            }
             cdLineEl.setAttribute('drag-pos', dragPos)
+            cdLineEl.setAttribute('drag-to-child', prevDragToChild ? 'y' : 'n')
           } else {
             cdLineEl.style.display = ''
           }
@@ -6260,12 +6275,12 @@ export default defineComponent({
           if (!cacheItem) {
             cacheItem = { row, rowid, seq, index: -1, _index: -1, $index: -1, items, parent, level, height: 0 }
           }
+          cacheItem.row = row
+          cacheItem.items = items
+          cacheItem.parent = parent
+          cacheItem.level = level
+          cacheItem.index = treeConfig && parent ? -1 : index
           if (isSource) {
-            cacheItem.row = row
-            cacheItem.items = items
-            cacheItem.parent = parent
-            cacheItem.level = level
-            cacheItem.index = treeConfig && parent ? -1 : index
             fullDataRowIdMaps[rowid] = cacheItem
           }
           fullAllDataRowIdMaps[rowid] = cacheItem
@@ -7145,8 +7160,9 @@ export default defineComponent({
        * 行拖拽
        */
       handleRowDragDragstartEvent (evnt) {
-        const img = new Image()
         if (evnt.dataTransfer) {
+          const img = new Image()
+          img.src = tpImg
           evnt.dataTransfer.setDragImage(img, 0, 0)
         }
       },
@@ -7162,7 +7178,6 @@ export default defineComponent({
         const { afterFullData, tableFullData, prevDragRow, prevDragPos } = internalData
         const dEndMethod = dragEndMethod || (dragConfig ? dragConfig.dragEndMethod : null)
         const dragOffsetIndex = prevDragPos === 'bottom' ? 1 : 0
-        console.log(evnt.ctrlKey)
         if (prevDragRow && dragRow) {
           // 判断是否有拖动
           if (prevDragRow !== dragRow) {
@@ -7208,8 +7223,8 @@ export default defineComponent({
                         return
                       }
                       if (oldAllMaps[newRowid]) {
+                        isSelfToChildStatus = true
                         if (!isSelfToChildDrag) {
-                          isSelfToChildStatus = true
                           if (VxeUI.modal) {
                             VxeUI.modal.message({
                               status: 'error',
@@ -7291,7 +7306,7 @@ export default defineComponent({
 
               reactData.isDragRowMove = true
               $xeTable.handleTableData(treeConfig && transform)
-              $xeTable.cacheRowMap(true)
+              $xeTable.cacheRowMap()
               updateScrollYStatus()
               if (!(treeConfig && transform)) {
                 $xeTable.updateAfterDataIndex()
@@ -7321,6 +7336,7 @@ export default defineComponent({
         }
         hideDropTip()
         clearRowDropOrigin()
+        internalData.prevDragToChild = false
         reactData.dragRow = null
         reactData.dragCol = null
         setTimeout(() => {
@@ -7365,7 +7381,6 @@ export default defineComponent({
         }
       },
       handleCellDragMousedownEvent (evnt, params) {
-        evnt.stopPropagation()
         const { dragConfig } = props
         const rowDragOpts = computeRowDragOpts.value
         const { dragStartMethod } = rowDragOpts
@@ -7401,26 +7416,28 @@ export default defineComponent({
        * 列拖拽
        */
       handleHeaderCellDragDragstartEvent (evnt) {
-        const img = new Image()
         if (evnt.dataTransfer) {
+          const img = new Image()
+          img.src = tpImg
           evnt.dataTransfer.setDragImage(img, 0, 0)
         }
       },
-      handleHeaderCellDragDragendEvent (evnt) {
+      handleColDragSwapEvent (evnt, isSyncColumn, dragCol, prevDragCol, prevDragPos, prevDragToChild) {
         const { mouseConfig } = props
         const columnDragOpts = computeColumnDragOpts.value
-        const { dragEndMethod } = columnDragOpts
-        const { dragCol } = reactData
-        const { collectColumn, prevDragCol, prevDragPos } = internalData
+        const { isCrossDrag, isSelfToChildDrag, isToChildDrag, dragEndMethod } = columnDragOpts
+        const { collectColumn } = internalData
         const dragOffsetIndex = prevDragPos === 'right' ? 1 : 0
         if (prevDragCol && dragCol) {
           // 判断是否有拖动
           if (prevDragCol !== dragCol) {
-            Promise.resolve(
+            const oldColumn = dragCol
+            const newColumn = prevDragCol
+            return Promise.resolve(
               dragEndMethod
                 ? dragEndMethod({
-                  oldColumn: dragCol,
-                  newColumn: prevDragCol,
+                  oldColumn,
+                  newColumn,
                   dragPos: prevDragPos as any,
                   offsetIndex: dragOffsetIndex
                 })
@@ -7430,6 +7447,101 @@ export default defineComponent({
                 return
               }
 
+              let oafIndex = -1
+              let nafIndex = -1
+
+              const oldAllMaps: Record<string, any> = {}
+              XEUtils.eachTree([oldColumn], column => {
+                oldAllMaps[column.id] = column
+              })
+
+              let isSelfToChildStatus = false
+
+              if (oldColumn.parentId && newColumn.parentId) {
+                // 子到子
+
+                if (!isCrossDrag) {
+                  return
+                }
+                if (oldAllMaps[newColumn.id]) {
+                  isSelfToChildStatus = true
+                  if (!isSelfToChildDrag) {
+                    if (VxeUI.modal) {
+                      VxeUI.modal.message({
+                        status: 'error',
+                        content: 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 (VxeUI.modal) {
+                      VxeUI.modal.message({
+                        status: 'error',
+                        content: getI18n('vxe.error.treeDragChild')
+                      })
+                    }
+                    return
+                  }
+                }
+              } else {
+                // 根到根
+              }
+
+              const oldewMatchRest = XEUtils.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 = XEUtils.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
+                }
+              }
+
               XEUtils.eachTree(collectColumn, (column, index, items, path, parent) => {
                 if (!parent) {
                   const sortIndex = index + 1
@@ -7437,19 +7549,6 @@ export default defineComponent({
                 }
               })
 
-              const oafIndex = XEUtils.findIndexOf(collectColumn, item => item.id === dragCol.id)
-              const nafIndex = XEUtils.findIndexOf(collectColumn, item => item.id === prevDragCol.id) + dragOffsetIndex
-
-              const newTargetCol = collectColumn[nafIndex]
-              if (newTargetCol) {
-                // 插入最后位置
-                dragCol.renderSortNumber = newTargetCol.renderSortNumber
-                newTargetCol.renderSortNumber = dragCol.renderSortNumber + 0.5
-              } else {
-                // 插入新位置
-                dragCol.renderSortNumber = collectColumn.length + 1.5
-              }
-
               reactData.isDragColMove = true
               if (mouseConfig) {
                 if ($xeTable.clearSelected) {
@@ -7460,15 +7559,10 @@ export default defineComponent({
                   $xeTable.clearCopyCellArea()
                 }
               }
-              tablePrivateMethods.analyColumnWidth()
-              nextTick().then(() => {
-                $xeTable.updateCellAreas()
-                tableMethods.refreshColumn(true)
-              })
 
               dispatchEvent('column-dragend', {
-                oldColumn: dragCol,
-                newColumn: prevDragCol,
+                oldColumn,
+                newColumn,
                 dragPos: prevDragPos,
                 offsetIndex: dragOffsetIndex,
                 _index: {
@@ -7477,13 +7571,25 @@ export default defineComponent({
                 }
               }, evnt)
 
-              $xeTable.saveCustomStore('update:sort')
+              if (isSyncColumn) {
+                return tableMethods.refreshColumn(true).then(() => {
+                  $xeTable.updateCellAreas()
+                  return $xeTable.saveCustomStore('update:sort')
+                })
+              }
             }).catch(() => {
             })
           }
         }
+        return Promise.resolve()
+      },
+      handleHeaderCellDragDragendEvent (evnt) {
+        const { dragCol } = reactData
+        const { prevDragCol, prevDragPos, prevDragToChild } = internalData
+        $xeTable.handleColDragSwapEvent(evnt, true, dragCol, prevDragCol, prevDragPos, prevDragToChild)
         hideDropTip()
         clearColDropOrigin()
+        internalData.prevDragToChild = false
         reactData.dragRow = null
         reactData.dragCol = null
         setTimeout(() => {
@@ -7492,10 +7598,13 @@ export default defineComponent({
       },
       handleHeaderCellDragDragoverEvent (evnt) {
         const { dragCol } = reactData
+        const columnDragOpts = computeColumnDragOpts.value
+        const { isToChildDrag, isCrossDrag } = columnDragOpts
         if (!dragCol) {
           evnt.preventDefault()
           return
         }
+        const hasCtrlKey = evnt.ctrlKey
         const thEl = evnt.currentTarget as HTMLElement
         const colid = thEl.getAttribute('colid')
         const column = $xeTable.getColumnById(colid)
@@ -7504,11 +7613,11 @@ export default defineComponent({
           const { dragCol } = reactData
           const offsetX = evnt.clientX - thEl.getBoundingClientRect().x
           const dragPos = offsetX < thEl.clientWidth / 2 ? 'left' : 'right'
-          if (dragCol.id === column.id || column.parentId) {
+          if ((dragCol && dragCol.id === column.id) || (!isCrossDrag && column.parentId)) {
             showDropTip(evnt, null, thEl, false, dragPos)
             return
           }
-          internalData.prevDragToChild = false
+          internalData.prevDragToChild = !!(isToChildDrag && hasCtrlKey)
           internalData.prevDragCol = column
           internalData.prevDragPos = dragPos
           showDropTip(evnt, null, thEl, true, dragPos)
@@ -7520,7 +7629,6 @@ export default defineComponent({
         }
       },
       handleHeaderCellDragMousedownEvent (evnt, params) {
-        evnt.stopPropagation()
         const columnDragOpts = computeColumnDragOpts.value
         const { dragStartMethod } = columnDragOpts
         const { column } = params
@@ -8376,7 +8484,7 @@ export default defineComponent({
       staticColumnFlag.value++
     })
     watch(staticColumnFlag, () => {
-      handleColumn(reactData.staticColumns)
+      handleColumn(XEUtils.clone(reactData.staticColumns))
     })
 
     const tableColumnFlag = ref(0)
diff --git a/packages/ui/src/dom.ts b/packages/ui/src/dom.ts
index a7a35340e3..198e0a40f9 100644
--- a/packages/ui/src/dom.ts
+++ b/packages/ui/src/dom.ts
@@ -4,6 +4,8 @@ const reClsMap: { [key: string]: any } = {}
 
 export const browse = XEUtils.browse()
 
+export const tpImg = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII='
+
 export function getPropClass (property: any, params: any) {
   return property ? XEUtils.isFunction(property) ? property(params) : property : ''
 }
diff --git a/styles/components/table-module/custom.scss b/styles/components/table-module/custom.scss
index 2f19f26d09..317466ab39 100644
--- a/styles/components/table-module/custom.scss
+++ b/styles/components/table-module/custom.scss
@@ -41,7 +41,7 @@
     position: absolute;
     left: -1px;
     width: calc(100% + 1px);
-    height: 3px;
+    height: 2px;
     background-color: var(--vxe-ui-font-primary-color);
     z-index: 12;
   }
@@ -95,6 +95,7 @@
 }
 
 .vxe-table-custom--body {
+  position: relative;
   display: block;
   flex-grow: 1;
   overflow-x: hidden;
@@ -107,15 +108,12 @@
   padding: 0;
   & > li {
     max-width: 26em;
-    min-width: 17em;
+    min-width: 18em;
     padding: 0.2em 1em 0.2em 1em;
     @for $i from 2 through 8 {
-      $interval: $i - 1 + 0.2;
+      $interval: $i - 1 + 0.5;
       &.level--#{$i}{
-        padding-left: #{$interval + 2.3}em;
-        .vxe-checkbox--icon {
-          left: #{$interval + 0.6}em;
-        }
+        padding-left: #{$interval + 1.2}em;
       }
     }
   }
@@ -130,7 +128,6 @@
 }
 
 .vxe-table-custom--panel-list {
-  padding: 0.2em 0;
   .vxe-table-custom--checkbox-option {
     &:hover {
       background-color: var(--vxe-ui-table-row-hover-background-color);
@@ -182,6 +179,12 @@
     cursor: not-allowed;
   }
 }
+.vxe-table-custom--name-option {
+  flex-grow: 1;
+  display: flex;
+  flex-direction: row;
+  overflow: hidden;
+}
 .vxe-table-custom--checkbox-label  {
   flex-grow: 1;
   overflow: hidden;
@@ -199,6 +202,7 @@
 }
 
 .vxe-table-custom-popup--body {
+  position: relative;
   overflow: auto;
   height: 100%;
   outline: 0;
@@ -248,13 +252,43 @@
   }
 }
 
-.vxe-table-custom-popup--drag-hint {
+/*拖拽列*/
+.vxe-table-custom-popup--drag-line {
+  display: none;
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 11;
+  pointer-events: none;
+}
+.vxe-table-custom-popup--drag-line {
+  width: 100%;
+  height: 1px;
+  border: 2px solid transparent;
+  &[drag-pos="top"] {
+    border-top-color: var(--vxe-ui-font-primary-color);
+  }
+  &[drag-pos="bottom"] {
+    border-bottom-color: var(--vxe-ui-font-primary-color);
+  }
+  &[drag-to-child="y"] {
+    border-top-color: transparent;
+    border-bottom-color: transparent;
+    border-left-color: var(--vxe-ui-status-success-color);
+  }
+  &.is--guides {
+    background-color: var( --vxe-ui-table-drag-over-background-color);
+  }
+}
+
+.vxe-table-custom-popup--drag-tip {
   display: none;
   position: absolute;
   top: 0;
   left: 0;
-  padding: 0.6em 1em 0.6em 1.6em;
-  max-width: 300px;
+  padding: 0.6em 1.4em;
+  max-width: 50%;
+  min-width: 100px;
   border-radius: var(--vxe-ui-border-radius);
   overflow: hidden;
   text-overflow: ellipsis;
@@ -264,9 +298,53 @@
   background-color: var(--vxe-ui-layout-background-color);
   box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.2);
   z-index: 33;
+  &[drag-status="normal"] {
+    .vxe-table-custom-popup--drag-tip-normal-status {
+      display: block;
+    }
+  }
+  &[drag-status="sub"] {
+    .vxe-table-custom-popup--drag-tip-sub-status {
+      display: block;
+    }
+  }
+  &[drag-status="disabled"] {
+    .vxe-table-custom-popup--drag-tip-disabled-status {
+      display: block;
+    }
+  }
+}
+.vxe-table-custom-popup--drag-tip-wrapper {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+}
+.vxe-table-custom-popup--drag-tip-status {
+  padding-right: 0.4em;
+}
+.vxe-table-custom-popup--drag-tip-disabled-status {
+  display: none;
+  flex-shrink: 0;
+  color: var(--vxe-ui-status-error-color)
+}
+.vxe-table-custom-popup--drag-tip-normal-status,
+.vxe-table-custom-popup--drag-tip-sub-status {
+  display: none;
+}
+.vxe-table-custom-popup--drag-tip-content {
+  flex-grow: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 
 .vxe-table-custom-popup--name {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+}
+.vxe-table-custom-popup--title {
+  flex-grow: 1;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
@@ -285,7 +363,6 @@
 
 .vxe-table-custom-popup--column-item {
   position: relative;
-  &.col--sort,
   &.col--visible,
   &.col--resizable,
   &.col--fixed {
@@ -365,6 +442,9 @@
   transition: transform 0.35s;
 }
 
+.vxe-table-custom-popup--column-sort-placeholder {
+  padding: 0.2em 0.5em;
+}
 .vxe-table-custom-popup--column-sort-btn {
   font-size: 1.2em;
   padding: 0.2em 0.5em;
diff --git a/styles/components/table.scss b/styles/components/table.scss
index 363bc4c25c..25baaadaff 100644
--- a/styles/components/table.scss
+++ b/styles/components/table.scss
@@ -1286,6 +1286,11 @@
     &[drag-pos="right"] {
       border-right-color: var(--vxe-ui-font-primary-color);
     }
+    &[drag-to-child="y"] {
+      border-left-color: transparent;
+      border-right-color: transparent;
+      border-bottom-color: var(--vxe-ui-status-success-color);
+    }
     &.is--guides {
       background-color: var( --vxe-ui-table-drag-over-background-color);
     }