From 5bb1a7b5a723e4bf832aabe42bc664fed4d5e32e Mon Sep 17 00:00:00 2001
From: xuliangzhan <xu_liangzhan@163.com>
Date: Sat, 23 Oct 2021 22:45:12 +0800
Subject: [PATCH] =?UTF-8?q?=E5=A2=9E=E5=8A=A0=E5=8F=82=E6=95=B0=20tree-con?=
 =?UTF-8?q?fig.transform?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 examples/api/table.ts               | 29 ++++++++++-
 examples/views/table/tree/Basic.vue | 80 +++++++++--------------------
 package.json                        |  2 +-
 packages/table/src/table.ts         | 12 +++++
 packages/v-x-e-table/src/conf.ts    |  2 +
 types/table.d.ts                    |  5 ++
 6 files changed, 73 insertions(+), 57 deletions(-)

diff --git a/examples/api/table.ts b/examples/api/table.ts
index eccb63196..d6b940490 100644
--- a/examples/api/table.ts
+++ b/examples/api/table.ts
@@ -1572,9 +1572,36 @@ const apis = [
         enum: '',
         defVal: '继承 setup.table.treeConfig',
         list: [
+          {
+            name: 'transform',
+            desc: '自动将列表转为树结构（需要有 rowKey 和 parentKey）',
+            version: '4.1.0',
+            type: 'string',
+            enum: '',
+            defVal: 'false',
+            list: []
+          },
+          {
+            name: 'rowKey',
+            desc: '树节点的字段名',
+            version: '4.1.0',
+            type: 'string',
+            enum: '',
+            defVal: 'id',
+            list: []
+          },
+          {
+            name: 'parentKey',
+            desc: '树父节点的字段名',
+            version: '4.1.0',
+            type: 'string',
+            enum: '',
+            defVal: 'parentId',
+            list: []
+          },
           {
             name: 'children',
-            desc: '树子节点的属性',
+            desc: '树子节点的字段名',
             version: '',
             type: 'string',
             enum: '',
diff --git a/examples/views/table/tree/Basic.vue b/examples/views/table/tree/Basic.vue
index da27c160b..223f37f64 100644
--- a/examples/views/table/tree/Basic.vue
+++ b/examples/views/table/tree/Basic.vue
@@ -1,7 +1,9 @@
 <template>
   <div>
     <p class="tip">
-      树表格，通过配置 <table-api-link prop="tree-config"/> 和指定列 <table-column-api-link prop="tree-node"/> 属性来开启树表格，通过 <table-api-link prop="row-id"/> 指定主键，还可以通过 <table-api-link prop="trigger"/> 指定触发方式<br>
+      树表格，通过配置 <table-api-link prop="tree-config"/> 和指定列 <table-column-api-link prop="tree-node"/> 属性来开启树表格，<br>
+      设置 <table-api-link prop="transform"/> 开启自动将列表转成树结构<br>
+      通过 <table-api-link prop="row-id"/> 指定主键，还可以通过 <table-api-link prop="trigger"/> 指定触发方式<br>
       <span class="red">(注：树结构不支持大量数据，如果数据量超过 2000 条，请谨慎使用！)</span>
     </p>
 
@@ -17,7 +19,7 @@
       resizable
       border="inner"
       ref="xTree"
-      :tree-config="{children: 'childs'}"
+      :tree-config="{transform: true, rowKey: 'id', parentKey: 'parentId'}"
       :data="demo1.tableData"
       @toggle-tree-expand="toggleExpandChangeEvent">
       <vxe-column field="name" title="app.body.label.name" tree-node></vxe-column>
@@ -91,32 +93,16 @@ export default defineComponent({
 
     const demo1 = reactive({
       tableData: [
-        { id: 1000, name: 'Test1', type: 'mp3', size: 1024, date: '2020-08-01' },
-        {
-          id: 1005,
-          name: 'Test2',
-          type: 'mp4',
-          size: null,
-          date: '2021-04-01',
-          childs: [
-            { id: 24300, name: 'Test3', type: 'avi', size: 1024, date: '2020-03-01' },
-            { id: 20045, name: 'Test4', type: 'html', size: 600, date: '2021-04-01' },
-            {
-              id: 10053,
-              name: 'Test96',
-              type: 'avi',
-              size: null,
-              date: '2021-04-01',
-              childs: [
-                { id: 24330, name: 'Test5', type: 'txt', size: 25, date: '2021-10-01' },
-                { id: 21011, name: 'Test6', type: 'pdf', size: 512, date: '2020-01-01' },
-                { id: 22200, name: 'Test7', type: 'js', size: 1024, date: '2021-06-01' }
-              ]
-            }
-          ]
-        },
-        { id: 23666, name: 'Test8', type: 'xlsx', size: 2048, date: '2020-11-01' },
-        { id: 24555, name: 'Test9', type: 'avi', size: 224, date: '2020-10-01' }
+        { id: 1000, parentId: null, name: 'vxe-table 从入门到放弃1', type: 'mp3', size: 1024, date: '2020-08-01' },
+        { id: 1005, parentId: null, name: 'Test2', type: 'mp4', size: null, date: '2021-04-01' },
+        { id: 24300, parentId: 1005, name: 'Test3', type: 'avi', size: 1024, date: '2020-03-01' },
+        { id: 20045, parentId: 24300, name: 'vxe-table 从入门到放弃4', type: 'html', size: 600, date: '2021-04-01' },
+        { id: 10053, parentId: 24300, name: 'vxe-table 从入门到放弃96', type: 'avi', size: null, date: '2021-04-01' },
+        { id: 24330, parentId: 10053, name: 'vxe-table 从入门到放弃5', type: 'txt', size: 25, date: '2021-10-01' },
+        { id: 21011, parentId: 10053, name: 'Test6', type: 'pdf', size: 512, date: '2020-01-01' },
+        { id: 22200, parentId: 10053, name: 'Test7', type: 'js', size: 1024, date: '2021-06-01' },
+        { id: 23666, parentId: null, name: 'Test8', type: 'xlsx', size: 2048, date: '2020-11-01' },
+        { id: 24555, parentId: null, name: 'vxe-table 从入门到放弃9', type: 'avi', size: 224, date: '2020-10-01' }
       ]
     })
 
@@ -215,7 +201,7 @@ export default defineComponent({
           resizable
           border="inner"
           ref="xTree"
-          :tree-config="{children: 'childs'}"
+          :tree-config="{transform: true, rowKey: 'id', parentKey: 'parentId'}"
           :data="demo1.tableData"
           @toggle-tree-expand="toggleExpandChangeEvent">
           <vxe-column field="name" title="app.body.label.name" tree-node></vxe-column>
@@ -235,32 +221,16 @@ export default defineComponent({
 
             const demo1 = reactive({
               tableData: [
-                { id: 1000, name: 'Test1', type: 'mp3', size: 1024, date: '2020-08-01' },
-                {
-                  id: 1005,
-                  name: 'Test2',
-                  type: 'mp4',
-                  size: null,
-                  date: '2021-04-01',
-                  childs: [
-                    { id: 24300, name: 'Test3', type: 'avi', size: 1024, date: '2020-03-01' },
-                    { id: 20045, name: 'Test4', type: 'html', size: 600, date: '2021-04-01' },
-                    {
-                      id: 10053,
-                      name: 'Test96',
-                      type: 'avi',
-                      size: null,
-                      date: '2021-04-01',
-                      childs: [
-                        { id: 24330, name: 'Test5', type: 'txt', size: 25, date: '2021-10-01' },
-                        { id: 21011, name: 'Test6', type: 'pdf', size: 512, date: '2020-01-01' },
-                        { id: 22200, name: 'Test7', type: 'js', size: 1024, date: '2021-06-01' }
-                      ]
-                    }
-                  ]
-                },
-                { id: 23666, name: 'Test8', type: 'xlsx', size: 2048, date: '2020-11-01' },
-                { id: 24555, name: 'Test9', type: 'avi', size: 224, date: '2020-10-01' }
+                { id: 1000, parentId: null, name: 'vxe-table 从入门到放弃1', type: 'mp3', size: 1024, date: '2020-08-01' },
+                { id: 1005, parentId: null, name: 'Test2', type: 'mp4', size: null, date: '2021-04-01' },
+                { id: 24300, parentId: 1005, name: 'Test3', type: 'avi', size: 1024, date: '2020-03-01' },
+                { id: 20045, parentId: 24300, name: 'vxe-table 从入门到放弃4', type: 'html', size: 600, date: '2021-04-01' },
+                { id: 10053, parentId: 24300, name: 'vxe-table 从入门到放弃96', type: 'avi', size: null, date: '2021-04-01' },
+                { id: 24330, parentId: 10053, name: 'vxe-table 从入门到放弃5', type: 'txt', size: 25, date: '2021-10-01' },
+                { id: 21011, parentId: 10053, name: 'Test6', type: 'pdf', size: 512, date: '2020-01-01' },
+                { id: 22200, parentId: 10053, name: 'Test7', type: 'js', size: 1024, date: '2021-06-01' },
+                { id: 23666, parentId: null, name: 'Test8', type: 'xlsx', size: 2048, date: '2020-11-01' },
+                { id: 24555, parentId: null, name: 'vxe-table 从入门到放弃9', type: 'avi', size: 224, date: '2020-10-01' }
               ]
             })
 
diff --git a/package.json b/package.json
index 6f38c08c4..930d10721 100644
--- a/package.json
+++ b/package.json
@@ -83,7 +83,7 @@
     "vxe-table-plugin-element": "^3.0.5",
     "vxe-table-plugin-export-pdf": "^3.0.2",
     "vxe-table-plugin-export-xlsx": "^3.0.3",
-    "vxe-table-plugin-menus": "^3.0.5",
+    "vxe-table-plugin-menus": "^3.0.6",
     "vxe-table-plugin-renderer": "^3.0.2",
     "vxe-table-plugin-shortcut-key": "^3.0.2",
     "xe-ajax": "^4.0.5",
diff --git a/packages/table/src/table.ts b/packages/table/src/table.ts
index 2ff51c8bf..3f17d261c 100644
--- a/packages/table/src/table.ts
+++ b/packages/table/src/table.ts
@@ -1805,6 +1805,18 @@ export default defineComponent({
       const { editStore, scrollYLoad: oldScrollYLoad } = reactData
       const { scrollYStore, scrollXStore, lastScrollLeft, lastScrollTop } = internalData
       const sYOpts = computeSYOpts.value
+      const treeOpts = computeTreeOpts.value
+      if (treeConfig && treeOpts.transform) {
+        if (process.env.VUE_APP_VXE_TABLE_ENV === 'development') {
+          if (!treeOpts.rowtKey) {
+            errLog('vxe.error.reqProp', ['table.tree-config.rowtKey'])
+          }
+          if (!treeOpts.parentKey) {
+            errLog('vxe.error.reqProp', ['table.tree-config.parentKey'])
+          }
+        }
+        datas = XEUtils.toArrayTree(datas, { key: treeOpts.rowtKey, parentKey: treeOpts.parentKey, children: treeOpts.children })
+      }
       const tableFullData = datas ? datas.slice(0) : []
       const scrollYLoad = !treeConfig && !!sYOpts.enabled && sYOpts.gt > -1 && sYOpts.gt < tableFullData.length
       scrollYStore.startIndex = 0
diff --git a/packages/v-x-e-table/src/conf.ts b/packages/v-x-e-table/src/conf.ts
index b8b4e9465..a58048e17 100644
--- a/packages/v-x-e-table/src/conf.ts
+++ b/packages/v-x-e-table/src/conf.ts
@@ -66,6 +66,8 @@ const GlobalConfig: VXETableGlobalConfig = {
       showIcon: true
     },
     treeConfig: {
+      rowtKey: 'id',
+      parentKey: 'parentId',
       children: 'children',
       hasChild: 'hasChild',
       indent: 20,
diff --git a/types/table.d.ts b/types/table.d.ts
index 766239613..0fa01571e 100644
--- a/types/table.d.ts
+++ b/types/table.d.ts
@@ -1389,6 +1389,9 @@ export namespace VxeTablePropTypes {
    * 树形结构配置项
    */
   export interface TreeConfig {
+    transform?: boolean;
+    rowtKey?: string;
+    parentKey?: string;
     children?: string;
     indent?: number;
     line?: boolean;
@@ -1417,6 +1420,8 @@ export namespace VxeTablePropTypes {
     iconLoaded?: string;
   }
   export interface TreeOpts extends TreeConfig {
+    rowtKey: string;
+    parentKey: string;
     children: string;
     indent: number;
     hasChild: string;