怎么控制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
                }
            ]
        }
    ]
}
相关推荐
中文呀4 小时前
三维 GIS 离线缓存实战:逆向 CesiumOfflineCache,并亲手为它补上"自动更新"能力
前端
前进前进前进5 小时前
TRAE 全链路实战:做了一个警示牌一键生成器:纯 Canvas、单文件、零依赖
前端
小万7426 小时前
God‘s Eye View 深度解析:15 路公开信号 + CesiumJS 的浏览器级 OSINT 控制台,60 帧渲染的“真实间谍卫星模拟器”
前端
IT星宿6 小时前
浏览器标签页全是一个图标:我用名字哈希生成 favicon,让每个项目都有身份标识
前端
OpsEye6 小时前
大模型账单对账难:不同厂商 Token 统计口径差异怎么处理
javascript·ai编程
全栈项目管理程序猿6 小时前
ArcGIS JS 基础教程(32):体元系列 - VoxelSlice 体元切片
前端·javascript
拖孩8 小时前
AI 帮我写的小程序「厨菜记」上线满月了,挣了两百块!!!
前端·后端·微信小程序
用户360055579008 小时前
Kestrel_VLLM - 13 · 为什么排除 MoE FFN Tiling 与 Tensor Core
前端
流烟默8 小时前
SSE 实战:在 SpringBoot + Vue 项目中零依赖实现轻量级实时消息推送
vue.js·spring boot·后端·sse
Hilaku8 小时前
AI 流式输出都用 SSE,什么时候必须换 WebSocket?
前端·javascript·程序员