vue el-table 树形数据懒加载每次点击子集父级只展示一行

功能需求

每次只打开一个同级数据节点展开，之前展开的自动收起

ps：找了好久都没有找到完全符合需求的组件。

展示效果

vue el-table 数据懒加载实现每次子集只展示一行

实现代码

模板（使用load配合expand-change使用）

<el-table :expand-row-keys="expands" @expand-change="handleExpandChange" :row-style="{ height: '0' }"
                    :cell-style="{ padding: 0 + 'px' }" class="table-box Industry-table" :data="Industrytable" row-key="id"
                    border style="width:100%" lazy :load="load" :tree-props="{ hasChildren: 'hasChildren' }">
                    <el-table-column prop="name" label="行业名称">
                    </el-table-column>
                    <el-table-column prop="description" label="行业说明">
                    </el-table-column>
</el-table>

js

//@expand-change绑定
 handleExpandChange(row, expanded) {
            if (expanded) { 
            	//获取已展开的元素
                const elsopen = this.$el.getElementsByClassName('el-table__expand-icon--expanded')
                if (this.$el.getElementsByClassName('el-table__expand-icon--expanded')) {
                    for (let i = 0; i < elsopen.length; i++) {
                    	//模拟点击关闭
                        elsopen[i].click()
                    }
                }
            }
        },
        //行业表格树形数据的处理
        load(tree, treeNode, resolve) {
        	//获取子集数据
            this.getBusinessTree({ pid: tree.id })
            setTimeout(() => {
                resolve(this.tableTreeBusiness);
            }, 1000);
        },