增加参数 tree-config.transform

2026-01-21 05:27:57 +08:00 · 2021-10-23 22:45:12 +08:00
parent a03cf64713
commit 5bb1a7b5a7
6 changed files with 73 additions and 57 deletions
--- 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: '',
--- 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' }
              ]
            })

--- 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",
--- 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
--- 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,
--- 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;