怎么控制Element的数据树形表格展开所有行;递归操作,打造万能数据表格折叠。

HTML

html 复制代码
<el-button type="success" size="small" @click="expandStatusFun"> 
	<span v-show="expandStatus==false"><i class="el-icon-folder-opened"></i>展开全部</span>
	<span v-show="expandStatus==true"><i class="el-icon-folder"></i>折叠全部</span>
</el-button>

<el-table 
class="mt-30" 
:data="tableList" 
border 
style="width: 100%" 
row-key="id"
:tree-props="{children: 'children', hasChildren: 'hasChildren'}" 
:default-expand-all="expandStatus" 
ref="el_Table">
</el-table>

JS

javascript 复制代码
 var app = new Vue({
        el: '#app',
        data() {
            return {
			 tableList: [],
			 expandStatus:true,
			  }
        },
		methods:{
		//展开/折叠全部-状态
            expandStatusFun(){ 
                var that=this;
                that.expandStatus=!that.expandStatus;   
                 //一级的展开和折叠
                 that.tableList.forEach(function(item){ 
                    that.expandDataFun(item,that.expandStatus);//展开/折叠全部-数据处理
                }); 
            },
            //展开/折叠全部-逐行数据处理
            expandDataFun(row_item,status)
            {
                var that=this;
                that.$refs.el_Table.toggleRowExpansion(row_item,status); 
                if(row_item.children != undefined && row_item.children != null)
                {
                     //使用递归遍历每一级
                     row_item.children.forEach(function(item){ 
                        that.expandDataFun(item,status);//展开/折叠全部-数据处理
                        }); 
                }
                
            },
		}
		
		});

完整代码

html 复制代码
<el-button type="success" size="small" @click="expandStatusFun"> 
	<span v-show="expandStatus==false"><i class="el-icon-folder-opened"></i>展开全部</span>
	<span v-show="expandStatus==true"><i class="el-icon-folder"></i>折叠全部</span>
</el-button>

<el-table 
class="mt-30" 
:data="tableList" 
border 
style="width: 100%" 
row-key="id"
:tree-props="{children: 'children', hasChildren: 'hasChildren'}" 
:default-expand-all="expandStatus" 
ref="el_Table">
</el-table>
<script>
 var app = new Vue({
        el: '#app',
        data() {
            return {
			 tableList: [],
			 expandStatus:true,
			  }
        },
		methods:{
		//展开/折叠全部-状态
            expandStatusFun(){ 
                var that=this;
                that.expandStatus=!that.expandStatus;   
                 //一级的展开和折叠
                 that.tableList.forEach(function(item){ 
                    that.expandDataFun(item,that.expandStatus);//展开/折叠全部-数据处理
                }); 
            },
            //展开/折叠全部-逐行数据处理
            expandDataFun(row_item,status)
            {
                var that=this;
                that.$refs.el_Table.toggleRowExpansion(row_item,status); 
                if(row_item.children != undefined && row_item.children != null)
                {
                     //使用递归遍历每一级
                     row_item.children.forEach(function(item){ 
                        that.expandDataFun(item,status);//展开/折叠全部-数据处理
                        }); 
                }
                
            },
		}
		
		});
</script>

接口数据

javascript 复制代码
{
    "code": "10000",
    "msg": "数据加载成功!",
    "total": 7,
    "data": [ 
        {
            "id": "72",
            "reid": "0",
            "typename": "站点栏目",
            "code": "",
            "orderNumber": "0",
            "idPath": "",
            "ishidden": true,
            "children": [
                {
                    "id": "75",
                    "reid": "72",
                    "typename": "平台资讯",
                    "code": "",
                    "orderNumber": "99",
                    "idPath": "72",
                    "ishidden": true,
                    "children": [
                        {
                            "id": "76",
                            "reid": "75",
                            "typename": "新闻资讯",
                            "code": "",
                            "orderNumber": "99",
                            "idPath": "72,75",
                            "ishidden": true,
                            "children": null
                        },
                        {
                            "id": "77",
                            "reid": "75",
                            "typename": "行业资讯",
                            "code": "",
                            "orderNumber": "99",
                            "idPath": "72,75",
                            "ishidden": true,
                            "children": null
                        }
                    ]
                },
                {
                    "id": "78",
                    "reid": "72",
                    "typename": "关于我们",
                    "code": "",
                    "orderNumber": "99",
                    "idPath": "72",
                    "ishidden": true,
                    "children": null
                }
            ]
        }
    ]
}
相关推荐
心易行者5 小时前
Python在线运行+SQLite数据库实战:0成本搭个人数据后台,5个场景直接套用
前端·网络·人工智能·python
雪芽蓝域zzs5 小时前
第 10 章:大屏看板自动轮播高亮(ECharts 大屏经典效果)
vue.js·echars
@tangguo1235 小时前
npm 和 yarn 配置说明
前端·javascript·npm·node.js·yarn
zhiyouTech5 小时前
GEO实战:把生成式引擎优化当成检索工程来做(含五断点诊断与50题Benchmark)
前端·人工智能
志尊宝5 小时前
Vue3 零基础每日笔记(052):路由常见坑一次排雷——404、刷新丢参数、部署白屏
前端·javascript·vue.js·笔记·html5
linux_cfan5 小时前
videojs v10 源代码系列解读:13 · 能力型媒体契约:`Media` 的组合接口
前端·javascript·音视频
涛涛ing5 小时前
2026年9月,前端圈同时发生了四件事,指向同一个方向
前端
艾伦野鸽ggg6 小时前
Vue2 模板语法与样式绑定
前端
Amos_Web6 小时前
Rspack 源码解析(十一):资产 Hook 与增量构建
前端·rust·源码阅读
PC2005_cloud6 小时前
Windows 数据使用量页面卡死:1097 个热点档案和 161 MB 的 SRUM 库
前端·后端