支持列任意拖拽

x-extends · Dec 12, 2024 · 4625ae9 · 4625ae9
1 parent b9064d7
commit 4625ae9
Show file tree

Hide file tree

Showing 32 changed files with 748 additions and 340 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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: 'заморозить столбец',