feat(grid): [grid] expose getTreeExpandeds function (#2996)

* feat(grid): expose getTreeExpandeds function

* docs: fix description error

examples/sites/demos/apis/grid.js

@@ -1692,6 +1692,20 @@ export default {
           mode: ['pc', 'mobile-first'],
           pcDemo: 'grid-tree-table#tree-table-tree-grid-insert-delete-update'
         },
+        {
+          name: 'getTreeExpandeds',
+          type: '() => IRow[]',
+          defaultValue: '',
+          meta: {
+            stable: '3.22.0'
+          },
+          desc: {
+            'zh-CN': '获取展开的行数据',
+            'en-US': 'Get the expanded row data'
+          },
+          mode: ['pc', 'mobile-first'],
+          pcDemo: 'grid-tree-table#tree-table-tree-grid-expand'
+        },
         {
           name: 'closeFilter',
           type: '() => void',

examples/sites/demos/pc/app/grid/tree-table/tree-table-tree-grid-expand-composition-api.vue

@@ -0,0 +1,149 @@
+<template>
+  <div>
+    <tiny-grid
+      ref="treeGridRef"
+      :data="tableData"
+      :tree-config="{ children: 'children' }"
+      @toggle-tree-change="handTreeExpand"
+    >
+      <tiny-grid-column type="index" width="80" tree-node></tiny-grid-column>
+      <tiny-grid-column field="name" title="公司名称"></tiny-grid-column>
+      <tiny-grid-column field="area" title="区域"></tiny-grid-column>
+      <tiny-grid-column field="employees" title="员工数"></tiny-grid-column>
+    </tiny-grid>
+  </div>
+</template>
+
+<script setup lang="jsx">
+import { ref } from 'vue'
+import { TinyGrid, TinyGridColumn, TinyModal } from '@opentiny/vue'
+
+const tableData = ref([
+  {
+    id: '1',
+    pid: '0',
+    name: 'GFD 科技 YX 公司',
+    area: '华东区',
+    employees: '800',
+    introduction: '公司技术和研发实力雄厚，是国家 863 项目的参与者，并被政府认定为“高新技术企业”。',
+    children: [
+      {
+        id: '15',
+        pid: '1',
+        name: 'GFD 科技股份有限子公司',
+        area: '华东区',
+        employees: '700',
+        introduction: '公司技术和研发实力雄厚，是国家 863 项目的参与者，并被政府认定为“高新技术企业”。'
+      }
+    ]
+  },
+  {
+    id: '2',
+    pid: '0',
+    name: 'WWWW 科技 YX 公司',
+    area: '华南区',
+    employees: '500',
+    introduction: '公司技术和研发实力雄厚，是国家 863 项目的参与者，并被政府认定为“高新技术企业”。',
+    children: [
+      {
+        id: '22',
+        pid: '2',
+        name: 'WWWW 科技股份有限子公司',
+        area: '华南区',
+        employees: '720',
+        introduction: '公司技术和研发实力雄厚，是国家 863 项目的参与者，并被政府认定为“高新技术企业”。'
+      }
+    ]
+  },
+  {
+    id: '4',
+    pid: '0',
+    name: 'TGBYX 公司',
+    area: '华南区',
+    employees: '360',
+    introduction: '公司技术和研发实力雄厚，是国家 863 项目的参与者，并被政府认定为“高新技术企业”。',
+    children: [
+      {
+        id: '3',
+        pid: '4',
+        name: 'RFV 有限责任公司',
+        area: '华南区',
+        employees: '300',
+        introduction: '公司技术和研发实力雄厚，是国家 863 项目的参与者，并被政府认定为“高新技术企业”。'
+      },
+      {
+        id: '5',
+        pid: '4',
+        name: 'YHN 科技 YX 公司',
+        area: '华南区',
+        employees: '810',
+        introduction: '公司技术和研发实力雄厚，是国家 863 项目的参与者，并被政府认定为“高新技术企业”。',
+        children: [
+          {
+            id: '6',
+            pid: '5',
+            name: 'WSX 科技 YX 公司',
+            area: '华南区',
+            employees: '800',
+            introduction: '公司技术和研发实力雄厚，是国家 863 项目的参与者，并被政府认定为“高新技术企业”。'
+          },
+          {
+            id: '9',
+            pid: '5',
+            name: 'UJM 有限责任公司',
+            area: '华南区',
+            employees: '750',
+            introduction: '公司技术和研发实力雄厚，是国家 863 项目的参与者，并被政府认定为“高新技术企业”。'
+          }
+        ]
+      }
+    ]
+  },
+  {
+    id: '7',
+    pid: '0',
+    name: '康康物业 YX 公司',
+    area: '华南区',
+    employees: '400',
+    introduction: '公司技术和研发实力雄厚，是国家 863 项目的参与者，并被政府认定为“高新技术企业”。',
+    children: [
+      {
+        id: '8',
+        pid: '7',
+        name: '深圳市福德宝网络技术 YX 公司',
+        area: '华南区',
+        employees: '540',
+        introduction: '公司技术和研发实力雄厚，是国家 863 项目的参与者，并被政府认定为“高新技术企业”。'
+      },
+      {
+        id: '10',
+        pid: '7',
+        name: 'IK 有限责任公司',
+        area: '华南区',
+        employees: '400',
+        introduction: '公司技术和研发实力雄厚，是国家 863 项目的参与者，并被政府认定为“高新技术企业”。',
+        children: [
+          {
+            id: '23',
+            pid: '10',
+            name: 'IK 有限责任股份 YX 公司',
+            area: '华南区',
+            employees: '455',
+            introduction: '公司技术和研发实力雄厚，是国家 863 项目的参与者，并被政府认定为“高新技术企业”。'
+          }
+        ]
+      }
+    ]
+  }
+])
+const treeGridRef = ref()
+
+function handTreeExpand() {
+  let treeExpandeds = treeGridRef.value.getTreeExpandeds()
+
+  TinyModal.message({
+    message: `展开行数：${treeExpandeds.length}`,
+    status: 'info'
+  })
+}
+</script>

examples/sites/demos/pc/app/grid/tree-table/tree-table-tree-grid-expand.spec.js

@@ -0,0 +1,9 @@
+import { test, expect } from '@playwright/test'
+
+test('检查树节点展开行数', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('grid-tree-table#tree-table-tree-grid-expand')
+  await page.getByRole('cell', { name: '1' }).getByRole('img').click()
+
+  await expect(page.getByText('展开行数：1')).toBeVisible()
+})

examples/sites/demos/pc/app/grid/tree-table/tree-table-tree-grid-expand.vue

@@ -0,0 +1,158 @@
+<template>
+  <div>
+    <tiny-grid
+      ref="treeGrid"
+      :data="tableData"
+      :tree-config="{ children: 'children' }"
+      @toggle-tree-change="handTreeExpand"
+    >
+      <tiny-grid-column type="index" width="80" tree-node></tiny-grid-column>
+      <tiny-grid-column field="name" title="公司名称"></tiny-grid-column>
+      <tiny-grid-column field="area" title="区域"></tiny-grid-column>
+      <tiny-grid-column field="employees" title="员工数"></tiny-grid-column>
+    </tiny-grid>
+  </div>
+</template>
+
+<script lang="jsx">
+import { TinyGrid, TinyGridColumn, TinyModal } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyGrid,
+    TinyGridColumn
+  },
+  data() {
+    return {
+      tableData: [
+        {
+          id: '1',
+          pid: '0',
+          name: 'GFD 科技 YX 公司',
+          area: '华东区',
+          employees: '800',
+          introduction: '公司技术和研发实力雄厚，是国家 863 项目的参与者，并被政府认定为“高新技术企业”。',
+          children: [
+            {
+              id: '15',
+              pid: '1',
+              name: 'GFD 科技股份有限子公司',
+              area: '华东区',
+              employees: '700',
+              introduction: '公司技术和研发实力雄厚，是国家 863 项目的参与者，并被政府认定为“高新技术企业”。'
+            }
+          ]
+        },
+        {
+          id: '2',
+          pid: '0',
+          name: 'WWWW 科技 YX 公司',
+          area: '华南区',
+          employees: '500',
+          introduction: '公司技术和研发实力雄厚，是国家 863 项目的参与者，并被政府认定为“高新技术企业”。',
+          children: [
+            {
+              id: '22',
+              pid: '2',
+              name: 'WWWW 科技股份有限子公司',
+              area: '华南区',
+              employees: '720',
+              introduction: '公司技术和研发实力雄厚，是国家 863 项目的参与者，并被政府认定为“高新技术企业”。'
+            }
+          ]
+        },
+        {
+          id: '4',
+          pid: '0',
+          name: 'TGBYX 公司',
+          area: '华南区',
+          employees: '360',
+          introduction: '公司技术和研发实力雄厚，是国家 863 项目的参与者，并被政府认定为“高新技术企业”。',
+          children: [
+            {
+              id: '3',
+              pid: '4',
+              name: 'RFV 有限责任公司',
+              area: '华南区',
+              employees: '300',
+              introduction: '公司技术和研发实力雄厚，是国家 863 项目的参与者，并被政府认定为“高新技术企业”。'
+            },
+            {
+              id: '5',
+              pid: '4',
+              name: 'YHN 科技 YX 公司',
+              area: '华南区',
+              employees: '810',
+              introduction: '公司技术和研发实力雄厚，是国家 863 项目的参与者，并被政府认定为“高新技术企业”。',
+              children: [
+                {
+                  id: '6',
+                  pid: '5',
+                  name: 'WSX 科技 YX 公司',
+                  area: '华南区',
+                  employees: '800',
+                  introduction: '公司技术和研发实力雄厚，是国家 863 项目的参与者，并被政府认定为“高新技术企业”。'
+                },
+                {
+                  id: '9',
+                  pid: '5',
+                  name: 'UJM 有限责任公司',
+                  area: '华南区',
+                  employees: '750',
+                  introduction: '公司技术和研发实力雄厚，是国家 863 项目的参与者，并被政府认定为“高新技术企业”。'
+                }
+              ]
+            }
+          ]
+        },
+        {
+          id: '7',
+          pid: '0',
+          name: '康康物业 YX 公司',
+          area: '华南区',
+          employees: '400',
+          introduction: '公司技术和研发实力雄厚，是国家 863 项目的参与者，并被政府认定为“高新技术企业”。',
+          children: [
+            {
+              id: '8',
+              pid: '7',
+              name: '深圳市福德宝网络技术 YX 公司',
+              area: '华南区',
+              employees: '540',
+              introduction: '公司技术和研发实力雄厚，是国家 863 项目的参与者，并被政府认定为“高新技术企业”。'
+            },
+            {
+              id: '10',
+              pid: '7',
+              name: 'IK 有限责任公司',
+              area: '华南区',
+              employees: '400',
+              introduction: '公司技术和研发实力雄厚，是国家 863 项目的参与者，并被政府认定为“高新技术企业”。',
+              children: [
+                {
+                  id: '23',
+                  pid: '10',
+                  name: 'IK 有限责任股份 YX 公司',
+                  area: '华南区',
+                  employees: '455',
+                  introduction: '公司技术和研发实力雄厚，是国家 863 项目的参与者，并被政府认定为“高新技术企业”。'
+                }
+              ]
+            }
+          ]
+        }
+      ]
+    }
+  },
+  methods: {
+    handTreeExpand() {
+      let treeExpandeds = this.$refs.treeGrid.getTreeExpandeds()
+
+      TinyModal.message({
+        message: `展开行数：${treeExpandeds.length}`,
+        status: 'info'
+      })
+    }
+  }
+}
+</script>

examples/sites/demos/pc/app/grid/webdoc/grid-tree-table.js

@@ -96,6 +96,15 @@ export default {
       },
       'codeFiles': ['tree-table/has-tree-expand.vue']
     },
+    {
+      'demoId': 'tree-table-tree-grid-expand',
+      'name': { 'zh-CN': '获取展开的行数据', 'en-US': 'Get the expanded row data' },
+      'desc': {
+        'zh-CN': '<p>通过 <code>getTreeExpandeds</code> 方法可以获取展开的行数据</p>',
+        'en-US': '<p>You can use the <code>getTreeExpandeds</code> method to get the expanded row data</p>'
+      },
+      'codeFiles': ['tree-table/tree-table-tree-grid-expand.vue']
+    },
     {
       'demoId': 'tree-table-tree-grid-index',
       'name': { 'zh-CN': '树表展开序号列配置', 'en-US': 'Expand Row No. Column Configuration' },

packages/vue/src/grid/src/tree/src/methods.ts

@@ -122,5 +122,8 @@ export default {
     this.treeExpandeds = []
     setTreeScrollYCache(this)
     return this.$nextTick().then(() => (hasExpand ? this.recalculate() : 0))
+  },
+  getTreeExpandeds() {
+    return this.treeExpandeds
   }
 }