🐛 [Bug]: grid 组件 setAllTreeExpansion(true),树形表格层级多之后，展开全部页面卡死

[David-TechNomad]

Version

v3.14.0

Vue Version

v 3.4

Link to minimal reproduction

https://opentiny.design/vue-playground?mode=pc&theme=default#3.14|eyJzcmMvQXBwLnZ1ZSI6IjxzY3JpcHQgbGFuZz1cInRzeFwiPlxyXG4vLyDlvJXlhaUgQG9wZW50aW55L3Z1ZSDnu4Tku7ZcclxuaW1wb3J0IHsgQnV0dG9uLCBMaW5rIH0gZnJvbSAnQG9wZW50aW55L3Z1ZSdcclxuXHJcbmV4cG9ydCBkZWZhdWx0IHtcclxuICBjb21wb25lbnRzOiB7XHJcbiAgICBUaW55QnV0dG9uOiBCdXR0b24sXHJcbiAgICBUaW55TGluazogTGlua1xyXG4gIH0sXHJcbiAgZGF0YSgpIHtcclxuICAgIHJldHVybiB7XHJcbiAgICAgIG1zZzogJ2hlbGxvIHdvcmxkISdcclxuICAgIH1cclxuICB9XHJcbn1cclxuPC9zY3JpcHQ+XHJcblxyXG48dGVtcGxhdGU+XHJcbiAgPFRpbnlCdXR0b24+56Gu5a6aPC9UaW55QnV0dG9uPlxyXG4gIDxoMT57eyBtc2cgfX08L2gxPlxyXG4gIDxkaXYgY2xhc3M9XCJ0aW55dnVlXCI+XHJcbiAgICA8ZGl2IGNsYXNzPVwidGlueXZ1ZS1wYWdlXCI+XHJcbiAgICAgIHRpbnl2dWVcclxuICAgICAgPHRpbnktbGluayB0eXBlPVwic3VjY2Vzc1wiIGhyZWY9J2h0dHBzOi8vZ2l0aHViLmNvbS9vcGVudGlueS90aW55LXZ1ZSc+XHJcbiAgICAgICAgdGlueXZ1ZVxyXG4gICAgICA8L3RpbnktbGluaz5cclxuICAgIDwvZGl2PlxyXG4gIDwvZGl2PlxyXG48L3RlbXBsYXRlPlxyXG5cclxuPHN0eWxlIGxhbmc9XCJsZXNzXCIgc2NvcGVkPlxyXG4gIGgxe1xyXG4gICAgY29sb3I6IzVlN2NlMDtcclxuICB9XHJcbiAgLnRpbnl2dWV7XHJcbiAgICBmb250LXNpemU6IDE4eHA7XHJcbiAgICAmLXBhZ2V7XHJcbiAgICAgIGNvbG9yOiM1ZTdjZTA7XHJcbiAgICB9XHJcbiAgfVxyXG48L3N0eWxlPlxyXG4iLCIiOiJ7XCJpbXBvcnRzXCI6e1wiQG9wZW50aW55L3Z1ZVwiOlwiaHR0cHM6Ly9ucG0ub25taWNyb3NvZnQuY24vQG9wZW50aW55L3Z1ZUAzLjE0L3J1bnRpbWUvdGlueS12dWUubWpzXCIsXCJAb3BlbnRpbnkvdnVlLWljb25cIjpcImh0dHBzOi8vbnBtLm9ubWljcm9zb2Z0LmNuL0BvcGVudGlueS92dWVAMy4xNC9ydW50aW1lL3RpbnktdnVlLWljb24ubWpzXCIsXCJAb3BlbnRpbnkvdnVlLWxvY2FsZVwiOlwiaHR0cHM6Ly9ucG0ub25taWNyb3NvZnQuY24vQG9wZW50aW55L3Z1ZUAzLjE0L3J1bnRpbWUvdGlueS12dWUtbG9jYWxlLm1qc1wiLFwiQG9wZW50aW55L3Z1ZS1jb21tb25cIjpcImh0dHBzOi8vbnBtLm9ubWljcm9zb2Z0LmNuL0BvcGVudGlueS92dWVAMy4xNC9ydW50aW1lL3RpbnktdnVlLWNvbW1vbi5tanNcIixcIkBvcGVudGlueS92dWUtdGhlbWUvXCI6XCJodHRwczovL25wbS5vbm1pY3Jvc29mdC5jbi9Ab3BlbnRpbnkvdnVlLXRoZW1lQDMuMTQvXCIsXCJAb3BlbnRpbnkvdnVlLXRoZW1lLW1vYmlsZS9cIjpcImh0dHBzOi8vbnBtLm9ubWljcm9zb2Z0LmNuL0BvcGVudGlueS92dWUtdGhlbWUtbW9iaWxlQDMuMTQvXCIsXCJAb3BlbnRpbnkvdnVlLXJlbmRlcmxlc3MvXCI6XCJodHRwczovL25wbS5vbm1pY3Jvc29mdC5jbi9Ab3BlbnRpbnkvdnVlLX

Step to reproduce

grid 组件 setAllTreeExpansion(true),树形表格层级多之后，展开全部页面卡死

What is expected

希望可以优化一下setAllTreeExpansion(true)函数，不至于页面卡死

What is actually happening

grid 组件 setAllTreeExpansion(true),树形表格层级多之后，展开全部页面卡死

What is your project name

bom树表组件

Any additional comments (optional)

No response

[Issues-translate-bot]

Bot detected the issue body's language is not English, translate it automatically.

---

Title: 🐛 [Bug]: grid component setAllTreeExpansion(true), after the tree table has many levels, all pages will get stuck when expanding.

[gimmyhehe]

@David-TechNomad 您好~，树表在数据量大的情况，可以尝试参考一下demo,配置优化虚拟滚动~
https://opentiny.design/tiny-vue/zh-CN/smb-theme/components/grid-large-data#large-data-grid-large-tree-data

[Issues-translate-bot]

Bot detected the issue body's language is not English, translate it automatically.

---

@David-TechNomad Hello~, when the tree table has a large amount of data, you can try to refer to the demo to configure and optimize virtual scrolling~
https://opentiny.design/tiny-vue/zh-CN/smb-theme/components/grid-large-data#large-data-grid-large-tree-data

[David-TechNomad]

展开全部卡死demo

展开指定树节点 展开所有树节点 切换展开树节点

<script setup> import { ref, onMounted } from 'vue' import { Grid as TinyGrid, GridColumn as TinyGridColumn, Button as TinyButton } from '@opentiny/vue' const tableData = ref([ { id: '1', pid: '0', name: 'GFD科技YX公司', area: '华东区', employees: '800', children: [ { id: '15', pid: '1', name: 'GFD科技股份有限子公司', area: '华东区', employees: '700' } ] }, { id: '2', pid: '0', name: 'WWWW科技YX公司', area: '华南区', employees: '500', children: [ { id: '22', pid: '2', name: 'WWWW科技股份有限子公司', area: '华南区', employees: '720' } ] }, { id: '4', pid: '0', name: 'TGBYX公司', area: '华南区', employees: '360', children: [ { id: '3', pid: '4', name: 'RFV有限责任公司', area: '华南区', employees: '300' }, { id: '5', pid: '4', name: 'YHN科技YX公司', area: '华南区', employees: '810', children: [ { id: '6', pid: '5', name: 'WSX科技YX公司', area: '华南区', employees: '800' }, { id: '9', pid: '5', name: 'UJM有限责任公司', area: '华南区', employees: '750' } ] } ] }, { id: '7', pid: '0', name: '康康物业YX公司', area: '华南区', employees: '400', children: [ { id: '8', pid: '7', name: '深圳市福德宝网络技术YX公司', area: '华南区', employees: '540' }, { id: '10', pid: '7', name: 'IK有限责任公司', area: '华南区', employees: '400', children: [ { id: '23', pid: '10', name: 'IK有限责任股份YX公司', area: '华南区', employees: '455' } ] } ] } ]) const grid = ref('grid') const setTreeExpansion = () => { grid.value.setTreeExpansion([tableData.value[1], tableData.value[3]], true) } const setAllTreeExpansion = () => { grid.value.setAllTreeExpansion(true) } const toggleTreeExpansion = () => { grid.value.toggleTreeExpansion(tableData.value[1]) } function generateUniqueID(length) { // 默认ID长度为8 var defaultLength = length || 8; // 可能的字符集，id中使用了数字和大小写字母 var characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789'; var charactersLength = characters.length; var result = ''; var usedCharacters = []; // 生成指定长度的随机ID for (var i = 0; i < defaultLength; i++) { var randomIndex = Math.floor(Math.random() * charactersLength); var character = characters.charAt(randomIndex); // 确保生成的字符不会重复 while (usedCharacters.indexOf(character) >= 0) { randomIndex = Math.floor(Math.random() * charactersLength); character = characters.charAt(randomIndex); } // 将生成的字符添加到结果中，并记录已使用 result += character; usedCharacters.push(character); } return result; } onMounted(() => { getData(2) }) function getData(size) { return new Promise(() => { getRandomGridData(size).then((data) => { tableData.value = data.result }) }) } // 生成模拟数据 function getRandomGridData(size) { const citys = ['福州', '深圳', '中山', '龙岩', '韶关', '黄冈', '赤壁', '厦门', '广州', '长沙', '青岛', '杭州'] const fristName = ['王', '陈', '刘', '张', '吴', '唐', '李', '崔', '郭', '周', '林', '匡', '何', '黄'] const names = [ '智', '璐', '项', '华', '兰', '富', '凯', '幂', '桑', '航', '明', '坤', '平', '秀', '思', '鹏', '会', '之', '瑞', '伟', '彤', '秀', '欣', '董', ] const randomChar = Array.from({ length: 26 }).map((item, index) => String.fromCharCode(65 + index)) const tels = ['131', '151', '150', '132', '169', '159', '191', '172', '185', '181', '134'] const nums = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9] const now = new Date() const randomArrayToString = (arr, len, isRundomLen) => { const name = [] const ranLen = (isRundomLen === false ? len : Math.floor(Math.random() * len)) || 1 for (let i = 0; i < ranLen; i++) { name.push(arr[Math.floor(Math.random() * arr.length)]) } return name.join('') } const generateTree = (depth) => { if (depth === 0) { return [] } const tree = [] let node = {} for (let i = 1; i <= depth; i++) { node = { treeNSTest: { treeNSTest1: { treeNSTest2: 'treeNSTest12' } }, treeNodeSlotTest: 'treeNodeSlotTest', id: generateUniqueID(10), name: randomArrayToString(names, 5) + '科技公司', area: randomArrayToString(['N', 'E', 'N'], 2), area2: randomArrayToString(['N', 'E', 'N'], 2), employees: Math.floor(Math.random() * 10000), city: randomArrayToString(citys, 1), manager: randomArrayToString(fristName, 1) + randomArrayToString(names, 3), telphone: randomArrayToString(tels, 1) + ('' + Math.floor(Math.random() * 1000000000)).substring(0, 8) + 88888888888888, gender: randomArrayToString(['男', '女'], 1), char: randomArrayToString(randomChar, 5), char1: randomArrayToString(randomChar, 4), char2: randomArrayToString(randomChar, 7), char3: randomArrayToString(randomChar, 12), num: randomArrayToString(nums, 8), num1: randomArrayToString(nums, 6), num2: randomArrayToString(nums, 12), time: now.getFullYear() + '-' + Math.ceil(11 * Math.random()) + '-' + Math.ceil(27 * Math.random()), isFormal: [true, false][Math.floor(Math.random() * 2)], like: [['a', 'b', 'c', 'd', 'e'][Math.floor(Math.random() * 4)]], num11: randomArrayToString(nums, 12), num12: randomArrayToString(nums, 12), num13: randomArrayToString(nums, 12), num14: randomArrayToString(nums, 12), num15: randomArrayToString(nums, 12), num16: randomArrayToString(nums, 12), num17: randomArrayToString(nums, 12), num18: randomArrayToString(nums, 12), num19: randomArrayToString(nums, 12), num20: randomArrayToString(nums, 12), num21: randomArrayToString(nums, 12), num22: randomArrayToString(nums, 12), num23: randomArrayToString(nums, 12), num24: randomArrayToString(nums, 12), num25: randomArrayToString(nums, 12), num26: randomArrayToString(nums, 12), num27: randomArrayToString(nums, 12), num28: randomArrayToString(nums, 12), num29: randomArrayToString(nums, 12), num30: randomArrayToString(nums, 12), children: generateTree(depth - 1), // 递归生成子节点 } tree.push(node) } return tree } return new Promise(resolve => { setTimeout(() => { const result = [] for (let i = 0; i < size; i++) { result.push({ treeNSTest: { treeNSTest1: { treeNSTest2: 'treeNSTest12' } }, treeNodeSlotTest: 'treeNodeSlotTest', id: generateUniqueID(10), name: randomArrayToString(names, 5) + '科技公司', area: randomArrayToString(['N', 'E', 'S'], 2), area2: randomArrayToString(['N', 'E', 'S'], 2), employees: Math.floor(Math.random() * 10000), city: randomArrayToString(citys, 1), manager: randomArrayToString(fristName, 1) + randomArrayToString(names, 3), telphone: randomArrayToString(tels, 1) + ('' + Math.floor(Math.random() * 1000000000)).substring(0, 8), gender: randomArrayToString(['男', '女'], 1), char: randomArrayToString(randomChar, 5), char1: randomArrayToString(randomChar, 4), char2: randomArrayToString(randomChar, 7), char3: randomArrayToString(randomChar, 12), num: randomArrayToString(nums, 8), num1: randomArrayToString(nums, 6), num2: randomArrayToString(nums, 12), time: now.getFullYear() + '-' + Math.ceil(11 * Math.random()) + '-' + Math.ceil(27 * Math.random()), isFormal: [true, false][Math.floor(Math.random() * 2)], like: [['a', 'b', 'c', 'd', 'e'][Math.floor(Math.random() * 4)]], num11: randomArrayToString(nums, 12), num12: randomArrayToString(nums, 12), num13: randomArrayToString(nums, 12), num14: randomArrayToString(nums, 12), num15: randomArrayToString(nums, 12), num16: randomArrayToString(nums, 12), num17: randomArrayToString(nums, 12), num18: randomArrayToString(nums, 12), num19: randomArrayToString(nums, 12), num20: randomArrayToString(nums, 12), num21: randomArrayToString(nums, 12), num22: randomArrayToString(nums, 12), num23: randomArrayToString(nums, 12), num24: randomArrayToString(nums, 12), num25: randomArrayToString(nums, 12), num26: randomArrayToString(nums, 12), num27: randomArrayToString(nums, 12), num28: randomArrayToString(nums, 12), num29: randomArrayToString(nums, 12), num30: randomArrayToString(nums, 12), children: generateTree(7), }) } console.log('result798888888', result) resolve({ result }) }) }) } const columns = ref([ { title: '公司名称 1', field: 'name', width: '280', treeNode: true, }, { title: '区域 2', field: 'area', width: '120', }, { title: '区域 3', field: 'area2', width: '120', }, { title: '员工数 3', field: 'employees', width: '160', }, { title: '所属城市 4', field: 'city', width: '140', }, { title: '公司经理 5', field: 'manager', width: '130', }, { title: '联系手机 6', field: 'telphone', width: '130', }, { title: '性别 7', field: 'gender', width: '120', }, { title: '入职时间 8', field: 'time', width: '130', }, { title: '兴趣爱好 9', field: 'like', width: '150', }, { title: '是否转正 10', field: 'isFormal', width: '140', }, { title: '测试 11', field: 'num11', width: '100', }, { title: '测试 12', field: 'num12', width: '100', }, { title: '测试 13', field: 'num13', width: '100', }, { title: '测试 14', field: 'num14', width: '100', }, { title: '测试 15', field: 'num15', width: '100', }, { title: '测试 16', field: 'num16', width: '100', }, { title: '测试 17', field: 'num17', width: '100', }, { title: '测试 18', field: 'num18', width: '100', }, { title: '测试 19', field: 'num19', width: '100', }, { title: '测试 20', field: 'num20', width: '100', }, { title: '测试 21', field: 'num21', width: '100', }, { title: '测试 22', field: 'num22', width: '100', }, { title: '测试 23', field: 'num23', width: '100', }, { title: '测试 24', field: 'num24', width: '100', }, { title: '测试 25', field: 'num25', width: '100', }, { title: '测试 26', field: 'num26', width: '100', }, { title: '测试 27', field: 'num27', width: '100', }, { title: '测试 28', field: 'num28', width: '100', }, { title: '测试 29', field: 'num29', width: '100', }, { title: '测试 30', field: 'num30', width: '100', }, ]) </script>

[gimmyhehe]

@David-TechNomad
用你提供的demo，添加一下配置，就不会卡死了~
:height="300"
:optimization="{
scrollX: { gt: 15, rSize: 14, vSize: 10, adaptive: false },
scrollY: { gt: 1, adaptive: false }
}"
参数说明：
height----虚拟滚动必须配置height
scrollY.gt: 1 ---- 目前表格逻辑是判断第一层数据长度，demo中第一层数据长度为2，因此这里配置大于等于1开启虚拟滚动~
这里是个待优化点，组件库侧记录一下~