docs: column header of the ListTable supports folding

李杨枚 · 李杨枚 · commit d84d90035f5a · 2025-04-03T10:30:43.000+08:00
diff --git a/docs/assets/demo/en/basic-functionality/list-table-header-group.md b/docs/assets/demo/en/basic-functionality/list-table-header-group.md
@@ -9,11 +9,13 @@ option: ListTable-columns-text#columns
 
 # List Table - Header Group
 
-Configure columns as a nested multi-layer structure to achieve multi-layer header grouping effects
+Configure columns as a nested multi-layer structure to achieve multi-layer header grouping effects. Enable tree-style expansion and collapse functionality through `columnHierarchyType: 'grid-tree'`, and set the default expansion level with `columnExpandLevel`.
 
 ## Key Configurations
 
 - columns
+- `columnHierarchyType` Set hierarchy display to `grid-tree` to enable tree-style expand/collapse
+- `columnExpandLevel` Configure default expansion level (defaults to 1)
 
 ## Code demo
 
@@ -22,33 +24,43 @@ let tableInstance;
 const records = [
   {
     id: 1,
-    name1: 'a1',
-    name2: 'a2',
-    name3: 'a3'
+    name: 'name.1',
+    name_1: 'name_1.1',
+    name_2: 'name_2.1',
+    name_2_1: 'name_2_1.1',
+    name_2_2: 'name_2_2.1'
   },
   {
     id: 2,
-    name1: 'b1',
-    name2: 'b2',
-    name3: 'b3'
+    name: 'name.2',
+    name_1: 'name_1.2',
+    name_2: 'name_2.2',
+    name_2_1: 'name_2_1.2',
+    name_2_2: 'name_2_2.2'
   },
   {
     id: 3,
-    name1: 'c1',
-    name2: 'c2',
-    name3: 'c3'
+    name: 'name.3',
+    name_1: 'name_1.3',
+    name_2: 'name_2.3',
+    name_2_1: 'name_2_1.3',
+    name_2_2: 'name_2_2.3'
   },
   {
     id: 4,
-    name1: 'd1',
-    name2: 'd2',
-    name3: 'd3'
+    name: 'name.4',
+    name_1: 'name_1.4',
+    name_2: 'name_2.4',
+    name_2_1: 'name_2_1.4',
+    name_2_2: 'name_2_2.4'
   },
   {
     id: 5,
-    name1: 'e1',
-    name2: 'e2',
-    name3: 'e3'
+    name: 'name.5',
+    name_1: 'name_1.5',
+    name_2: 'name_2.5',
+    name_2_1: 'name_2_1.5',
+    name_2_2: 'name_2_2.5'
   }
 ];
 
@@ -59,25 +71,27 @@ const columns = [
     width: 100
   },
   {
+    field: 'name',
     title: 'Name',
     columns: [
       {
-        field: 'name1',
-        title: 'name1',
-        width: 100
+        field: 'name_1',
+        title: 'Name_1',
+        width: 120
       },
       {
-        title: 'name-level-2',
+        field: 'name_2',
+        title: 'Name_2',
         width: 150,
         columns: [
           {
-            field: 'name2',
-            title: 'name2',
-            width: 100
+            field: 'name_2_1',
+            title: 'Name_2_1',
+            width: 150
           },
           {
-            title: 'name3',
-            field: 'name3',
+            field: 'name_2_2',
+            title: 'Name_2_2',
             width: 150
           }
         ]
@@ -89,6 +103,8 @@ const columns = [
 const option = {
   records,
   columns,
+  columnHierarchyType: 'grid-tree',
+  columnExpandLevel: 3,
   widthMode: 'standard',
   autoWrapText: true,
   autoRowHeight: true,
diff --git a/docs/assets/demo/zh/basic-functionality/list-table-header-group.md b/docs/assets/demo/zh/basic-functionality/list-table-header-group.md
@@ -9,46 +9,58 @@ option: ListTable-columns-text#columns
 
 # 基本表格表头分组
 
-将 columns 配置为嵌套多层结构来实现多层表头分组效果
+将 columns 配置为嵌套多层结构来实现多层表头分组效果，可通过配置 `columnHierarchyType: 'grid-tree'` 开启树形的展开和折叠，并通过 `columnExpandLevel` 来设置默认展开层级。
 
 ## 关键配置
 
 - columns
+- `columnHierarchyType` 将层级展示设置为 `grid-tree`，开启树形的展开和折叠功能
+- `columnExpandLevel` 设置默认展开层级，默认为`1`
 
-## Code demo
+## 代码演示
 
 ```javascript livedemo template=vtable
 let tableInstance;
 const records = [
   {
     id: 1,
-    name1: 'a1',
-    name2: 'a2',
-    name3: 'a3'
+    name: 'name.1',
+    name_1: 'name_1.1',
+    name_2: 'name_2.1',
+    name_2_1: 'name_2_1.1',
+    name_2_2: 'name_2_2.1'
   },
   {
     id: 2,
-    name1: 'b1',
-    name2: 'b2',
-    name3: 'b3'
+    name: 'name.2',
+    name_1: 'name_1.2',
+    name_2: 'name_2.2',
+    name_2_1: 'name_2_1.2',
+    name_2_2: 'name_2_2.2'
   },
   {
     id: 3,
-    name1: 'c1',
-    name2: 'c2',
-    name3: 'c3'
+    name: 'name.3',
+    name_1: 'name_1.3',
+    name_2: 'name_2.3',
+    name_2_1: 'name_2_1.3',
+    name_2_2: 'name_2_2.3'
   },
   {
     id: 4,
-    name1: 'd1',
-    name2: 'd2',
-    name3: 'd3'
+    name: 'name.4',
+    name_1: 'name_1.4',
+    name_2: 'name_2.4',
+    name_2_1: 'name_2_1.4',
+    name_2_2: 'name_2_2.4'
   },
   {
     id: 5,
-    name1: 'e1',
-    name2: 'e2',
-    name3: 'e3'
+    name: 'name.5',
+    name_1: 'name_1.5',
+    name_2: 'name_2.5',
+    name_2_1: 'name_2_1.5',
+    name_2_2: 'name_2_2.5'
   }
 ];
 
@@ -59,25 +71,27 @@ const columns = [
     width: 100
   },
   {
+    field: 'name',
     title: 'Name',
     columns: [
       {
-        field: 'name1',
-        title: 'name1',
-        width: 100
+        field: 'name_1',
+        title: 'Name_1',
+        width: 120
       },
       {
-        title: 'name-level-2',
+        field: 'name_2',
+        title: 'Name_2',
         width: 150,
         columns: [
           {
-            field: 'name2',
-            title: 'name2',
-            width: 100
+            field: 'name_2_1',
+            title: 'Name_2_1',
+            width: 150
           },
           {
-            title: 'name3',
-            field: 'name3',
+            field: 'name_2_2',
+            title: 'Name_2_2',
             width: 150
           }
         ]
@@ -89,6 +103,8 @@ const columns = [
 const option = {
   records,
   columns,
+  columnHierarchyType: 'grid-tree',
+  columnExpandLevel: 3,
   widthMode: 'standard',
   autoWrapText: true,
   autoRowHeight: true,
diff --git a/docs/assets/option/en/table/listTable.md b/docs/assets/option/en/table/listTable.md
@@ -93,6 +93,13 @@ When displayed as a tree structure, the number of levels is expanded by default.
 
 Whether nodes at the same level are aligned by text, such as nodes without collapsed expansion icons and nodes with icons. Default is false
 
+## columnHierarchyType('grid-tree')
+
+Defines the hierarchy display mode for column headers. When set to 'grid-tree', it enables tree-style expand/collapse functionality in the header structure.
+
+## columnExpandLevel(number)
+
+Sets the initial expansion level of column headers. Defaults to 1.
 
 ## aggregation(Aggregation|CustomAggregation|Array|Function)
 
diff --git a/docs/assets/option/zh/table/listTable.md b/docs/assets/option/zh/table/listTable.md
@@ -90,6 +90,13 @@ SortState {
 
 同层级的结点是否按文字对齐 如没有收起展开图标的节点和有图标的节点文字对齐 默认 false
 
+## columnHierarchyType('grid-tree')
+
+列表头中层级维度结构显示形式，设置为 'grid-tree' 时开启树形结构的展开折叠功能。
+
+## columnExpandLevel(number)
+
+列表头初始化展开层数，默认是 1。
 
 ## aggregation(Aggregation|CustomAggregation|Array|Function)
 
