功能需求
每次只打开一个同级数据节点展开,之前展开的自动收起
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);
},