html页面
<el-button style="margin-left: 10px;margin-bottom: 10px;" type="primary" plain size="mini" @click="toggleRowExpansion" icon="el-icon-sort">
全部{{ isExpansion ? "收缩" : "展开" }}
</el-button>
<el-table
default-expand-all
ref="dataTreeList"
:tree-props="{children: 'children'}">
......
</el-table>
js方法
export default {
data() {
return {
tableData: [],
isExpansion: true
}
},
methods: {
// 切换数据表格树形展开
toggleRowExpansion() {
this.isExpansion = !this.isExpansion;
this.toggleRowExpansionAll(this.tableData, this.isExpansion);
},
toggleRowExpansionAll(data, isExpansion) {
data.forEach((item) => {
this.$refs.dataTreeList.toggleRowExpansion(item, isExpansion);
if (item.children !== undefined && item.children !== null) {
this.toggleRowExpansionAll(item.children, isExpansion);
}
});
},
},
.......
}
参考链接:https://blog.csdn.net/weixin_46724415/article/details/121908210