Skip to content

Commit 10f537f

Browse files
gweesingweesin
authored
feat(grid): [grid] expose getTreeExpandeds function (#2996)
* feat(grid): expose getTreeExpandeds function * docs: fix description error
1 parent 61ced4d commit 10f537f

File tree

6 files changed

+342
-0
lines changed

6 files changed

+342
-0
lines changed

‎examples/sites/demos/apis/grid.js‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1692,6 +1692,20 @@ export default {
16921692
mode: ['pc', 'mobile-first'],
16931693
pcDemo: 'grid-tree-table#tree-table-tree-grid-insert-delete-update'
16941694
},
1695+
{
1696+
name: 'getTreeExpandeds',
1697+
type: '() => IRow[]',
1698+
defaultValue: '',
1699+
meta: {
1700+
stable: '3.22.0'
1701+
},
1702+
desc: {
1703+
'zh-CN': '获取展开的行数据',
1704+
'en-US': 'Get the expanded row data'
1705+
},
1706+
mode: ['pc', 'mobile-first'],
1707+
pcDemo: 'grid-tree-table#tree-table-tree-grid-expand'
1708+
},
16951709
{
16961710
name: 'closeFilter',
16971711
type: '() => void',

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

Lines changed: 149 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,149 @@
1+
<template>
2+
<div>
3+
<tiny-grid
4+
ref="treeGridRef"
5+
:data="tableData"
6+
:tree-config="{ children: 'children' }"
7+
@toggle-tree-change="handTreeExpand"
8+
>
9+
<tiny-grid-column type="index" width="80" tree-node></tiny-grid-column>
10+
<tiny-grid-column field="name" title="公司名称"></tiny-grid-column>
11+
<tiny-grid-column field="area" title="区域"></tiny-grid-column>
12+
<tiny-grid-column field="employees" title="员工数"></tiny-grid-column>
13+
</tiny-grid>
14+
</div>
15+
</template>
16+
17+
<script setup lang="jsx">
18+
import { ref } from 'vue'
19+
import { TinyGrid, TinyGridColumn, TinyModal } from '@opentiny/vue'
20+
21+
const tableData = ref([
22+
{
23+
id: '1',
24+
pid: '0',
25+
name: 'GFD 科技 YX 公司',
26+
area: '华东区',
27+
employees: '800',
28+
introduction: '公司技术和研发实力雄厚，是国家 863 项目的参与者，并被政府认定为“高新技术企业”。',
29+
children: [
30+
{
31+
id: '15',
32+
pid: '1',
33+
name: 'GFD 科技股份有限子公司',
34+
area: '华东区',
35+
employees: '700',
36+
introduction: '公司技术和研发实力雄厚，是国家 863 项目的参与者，并被政府认定为“高新技术企业”。'
37+
}
38+
]
39+
},
40+
{
41+
id: '2',
42+
pid: '0',
43+
name: 'WWWW 科技 YX 公司',
44+
area: '华南区',
45+
employees: '500',
46+
introduction: '公司技术和研发实力雄厚，是国家 863 项目的参与者，并被政府认定为“高新技术企业”。',
47+
children: [
48+
{
49+
id: '22',
50+
pid: '2',
51+
name: 'WWWW 科技股份有限子公司',
52+
area: '华南区',
53+
employees: '720',
54+
introduction: '公司技术和研发实力雄厚，是国家 863 项目的参与者，并被政府认定为“高新技术企业”。'
55+
}
56+
]
57+
},
58+
{
59+
id: '4',
60+
pid: '0',
61+
name: 'TGBYX 公司',
62+
area: '华南区',
63+
employees: '360',
64+
introduction: '公司技术和研发实力雄厚，是国家 863 项目的参与者，并被政府认定为“高新技术企业”。',
65+
children: [
66+
{
67+
id: '3',
68+
pid: '4',
69+
name: 'RFV 有限责任公司',
70+
area: '华南区',
71+
employees: '300',
72+
introduction: '公司技术和研发实力雄厚，是国家 863 项目的参与者，并被政府认定为“高新技术企业”。'
73+
},
74+
{
75+
id: '5',
76+
pid: '4',
77+
name: 'YHN 科技 YX 公司',
78+
area: '华南区',
79+
employees: '810',
80+
introduction: '公司技术和研发实力雄厚，是国家 863 项目的参与者，并被政府认定为“高新技术企业”。',
81+
children: [
82+
{
83+
id: '6',
84+
pid: '5',
85+
name: 'WSX 科技 YX 公司',
86+
area: '华南区',
87+
employees: '800',
88+
introduction: '公司技术和研发实力雄厚，是国家 863 项目的参与者，并被政府认定为“高新技术企业”。'
89+
},
90+
{
91+
id: '9',
92+
pid: '5',
93+
name: 'UJM 有限责任公司',
94+
area: '华南区',
95+
employees: '750',
96+
introduction: '公司技术和研发实力雄厚，是国家 863 项目的参与者，并被政府认定为“高新技术企业”。'
97+
}
98+
]
99+
}
100+
]
101+
},
102+
{
103+
id: '7',
104+
pid: '0',
105+
name: '康康物业 YX 公司',
106+
area: '华南区',
107+
employees: '400',
108+
introduction: '公司技术和研发实力雄厚，是国家 863 项目的参与者，并被政府认定为“高新技术企业”。',
109+
children: [
110+
{
111+
id: '8',
112+
pid: '7',
113+
name: '深圳市福德宝网络技术 YX 公司',
114+
area: '华南区',
115+
employees: '540',
116+
introduction: '公司技术和研发实力雄厚，是国家 863 项目的参与者，并被政府认定为“高新技术企业”。'
117+
},
118+
{
119+
id: '10',
120+
pid: '7',
121+
name: 'IK 有限责任公司',
122+
area: '华南区',
123+
employees: '400',
124+
introduction: '公司技术和研发实力雄厚，是国家 863 项目的参与者，并被政府认定为“高新技术企业”。',
125+
children: [
126+
{
127+
id: '23',
128+
pid: '10',
129+
name: 'IK 有限责任股份 YX 公司',
130+
area: '华南区',
131+
employees: '455',
132+
introduction: '公司技术和研发实力雄厚，是国家 863 项目的参与者，并被政府认定为“高新技术企业”。'
133+
}
134+
]
135+
}
136+
]
137+
}
138+
])
139+
const treeGridRef = ref()
140+
141+
function handTreeExpand() {
142+
let treeExpandeds = treeGridRef.value.getTreeExpandeds()
143+
144+
TinyModal.message({
145+
message: `展开行数：${treeExpandeds.length}`,
146+
status: 'info'
147+
})
148+
}
149+
</script>

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

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
import { test, expect } from '@playwright/test'
2+
3+
test('检查树节点展开行数', async ({ page }) => {
4+
page.on('pageerror', (exception) => expect(exception).toBeNull())
5+
await page.goto('grid-tree-table#tree-table-tree-grid-expand')
6+
await page.getByRole('cell', { name: '1' }).getByRole('img').click()
7+
8+
await expect(page.getByText('展开行数：1')).toBeVisible()
9+
})

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

Lines changed: 158 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,158 @@
1+
<template>
2+
<div>
3+
<tiny-grid
4+
ref="treeGrid"
5+
:data="tableData"
6+
:tree-config="{ children: 'children' }"
7+
@toggle-tree-change="handTreeExpand"
8+
>
9+
<tiny-grid-column type="index" width="80" tree-node></tiny-grid-column>
10+
<tiny-grid-column field="name" title="公司名称"></tiny-grid-column>
11+
<tiny-grid-column field="area" title="区域"></tiny-grid-column>
12+
<tiny-grid-column field="employees" title="员工数"></tiny-grid-column>
13+
</tiny-grid>
14+
</div>
15+
</template>
16+
17+
<script lang="jsx">
18+
import { TinyGrid, TinyGridColumn, TinyModal } from '@opentiny/vue'
19+
20+
export default {
21+
components: {
22+
TinyGrid,
23+
TinyGridColumn
24+
},
25+
data() {
26+
return {
27+
tableData: [
28+
{
29+
id: '1',
30+
pid: '0',
31+
name: 'GFD 科技 YX 公司',
32+
area: '华东区',
33+
employees: '800',
34+
introduction: '公司技术和研发实力雄厚，是国家 863 项目的参与者，并被政府认定为“高新技术企业”。',
35+
children: [
36+
{
37+
id: '15',
38+
pid: '1',
39+
name: 'GFD 科技股份有限子公司',
40+
area: '华东区',
41+
employees: '700',
42+
introduction: '公司技术和研发实力雄厚，是国家 863 项目的参与者，并被政府认定为“高新技术企业”。'
43+
}
44+
]
45+
},
46+
{
47+
id: '2',
48+
pid: '0',
49+
name: 'WWWW 科技 YX 公司',
50+
area: '华南区',
51+
employees: '500',
52+
introduction: '公司技术和研发实力雄厚，是国家 863 项目的参与者，并被政府认定为“高新技术企业”。',
53+
children: [
54+
{
55+
id: '22',
56+
pid: '2',
57+
name: 'WWWW 科技股份有限子公司',
58+
area: '华南区',
59+
employees: '720',
60+
introduction: '公司技术和研发实力雄厚，是国家 863 项目的参与者，并被政府认定为“高新技术企业”。'
61+
}
62+
]
63+
},
64+
{
65+
id: '4',
66+
pid: '0',
67+
name: 'TGBYX 公司',
68+
area: '华南区',
69+
employees: '360',
70+
introduction: '公司技术和研发实力雄厚，是国家 863 项目的参与者，并被政府认定为“高新技术企业”。',
71+
children: [
72+
{
73+
id: '3',
74+
pid: '4',
75+
name: 'RFV 有限责任公司',
76+
area: '华南区',
77+
employees: '300',
78+
introduction: '公司技术和研发实力雄厚，是国家 863 项目的参与者，并被政府认定为“高新技术企业”。'
79+
},
80+
{
81+
id: '5',
82+
pid: '4',
83+
name: 'YHN 科技 YX 公司',
84+
area: '华南区',
85+
employees: '810',
86+
introduction: '公司技术和研发实力雄厚，是国家 863 项目的参与者，并被政府认定为“高新技术企业”。',
87+
children: [
88+
{
89+
id: '6',
90+
pid: '5',
91+
name: 'WSX 科技 YX 公司',
92+
area: '华南区',
93+
employees: '800',
94+
introduction: '公司技术和研发实力雄厚，是国家 863 项目的参与者，并被政府认定为“高新技术企业”。'
95+
},
96+
{
97+
id: '9',
98+
pid: '5',
99+
name: 'UJM 有限责任公司',
100+
area: '华南区',
101+
employees: '750',
102+
introduction: '公司技术和研发实力雄厚，是国家 863 项目的参与者，并被政府认定为“高新技术企业”。'
103+
}
104+
]
105+
}
106+
]
107+
},
108+
{
109+
id: '7',
110+
pid: '0',
111+
name: '康康物业 YX 公司',
112+
area: '华南区',
113+
employees: '400',
114+
introduction: '公司技术和研发实力雄厚，是国家 863 项目的参与者，并被政府认定为“高新技术企业”。',
115+
children: [
116+
{
117+
id: '8',
118+
pid: '7',
119+
name: '深圳市福德宝网络技术 YX 公司',
120+
area: '华南区',
121+
employees: '540',
122+
introduction: '公司技术和研发实力雄厚，是国家 863 项目的参与者，并被政府认定为“高新技术企业”。'
123+
},
124+
{
125+
id: '10',
126+
pid: '7',
127+
name: 'IK 有限责任公司',
128+
area: '华南区',
129+
employees: '400',
130+
introduction: '公司技术和研发实力雄厚，是国家 863 项目的参与者，并被政府认定为“高新技术企业”。',
131+
children: [
132+
{
133+
id: '23',
134+
pid: '10',
135+
name: 'IK 有限责任股份 YX 公司',
136+
area: '华南区',
137+
employees: '455',
138+
introduction: '公司技术和研发实力雄厚，是国家 863 项目的参与者，并被政府认定为“高新技术企业”。'
139+
}
140+
]
141+
}
142+
]
143+
}
144+
]
145+
}
146+
},
147+
methods: {
148+
handTreeExpand() {
149+
let treeExpandeds = this.$refs.treeGrid.getTreeExpandeds()
150+
151+
TinyModal.message({
152+
message: `展开行数：${treeExpandeds.length}`,
153+
status: 'info'
154+
})
155+
}
156+
}
157+
}
158+
</script>

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

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -96,6 +96,15 @@ export default {
9696
},
9797
'codeFiles': ['tree-table/has-tree-expand.vue']
9898
},
99+
{
100+
'demoId': 'tree-table-tree-grid-expand',
101+
'name': { 'zh-CN': '获取展开的行数据', 'en-US': 'Get the expanded row data' },
102+
'desc': {
103+
'zh-CN': '<p>通过 <code>getTreeExpandeds</code> 方法可以获取展开的行数据</p>',
104+
'en-US': '<p>You can use the <code>getTreeExpandeds</code> method to get the expanded row data</p>'
105+
},
106+
'codeFiles': ['tree-table/tree-table-tree-grid-expand.vue']
107+
},
99108
{
100109
'demoId': 'tree-table-tree-grid-index',
101110
'name': { 'zh-CN': '树表展开序号列配置', 'en-US': 'Expand Row No. Column Configuration' },

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

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -122,5 +122,8 @@ export default {
122122
this.treeExpandeds = []
123123
setTreeScrollYCache(this)
124124
return this.$nextTick().then(() => (hasExpand ? this.recalculate() : 0))
125+
},
126+
getTreeExpandeds() {
127+
return this.treeExpandeds
125128
}
126129
}

0 commit comments

Comments
 (0)