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

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

 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);//展开/折叠全部-数据处理}); }},}});

完整代码

<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>

接口数据

{"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}]}]
}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/440196.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

新建VM虚拟机-安装centOS7-连接finalshell调试

原文 这里有问题 首先进入/etc/sysconfig/network-scripts/目录 cd /etc/sysconfig/network-scripts/ 然后编辑文件 ifcfg-ens33 vi ifcfg-ens33

知识点积累系列(一)golang语言篇

云原生学习路线导航页&#xff08;持续更新中&#xff09; 本文是 知识点积累 系列文章的第一篇&#xff0c;记录golang语言相关的知识点 1.结构体的mapstructure是什么 mapstructure:"default" mapstructure是一个Go语言的库&#xff0c;用于将一个map中的值映射到…

少儿编程 中国电子学会图形化编程2021年3月等级考试Scratch三级真题解析(选择题、判断题)

1.在《采矿》游戏中&#xff0c;当角色捡到黄金时财富值加1分&#xff0c;捡到钻石时财富值加2分&#xff0c;下面哪个程序实现这个功能&#xff1f; A&#xff1a; B&#xff1a; C&#xff1a; D&#xff1a; 2.设计一个和在20以内&#xff08;包括20&#xff09;的整数加法…

2024年【T电梯修理】及T电梯修理复审模拟考试

题库来源&#xff1a;安全生产模拟考试一点通公众号小程序 T电梯修理是安全生产模拟考试一点通总题库中生成的一套T电梯修理复审模拟考试&#xff0c;安全生产模拟考试一点通上T电梯修理作业手机同步练习。2024年【T电梯修理】及T电梯修理复审模拟考试 1、【多选题】工作结束跨…

部署PXE高效批量网络装机

部署PXE高效批量网络装机 因在Cisco3850核心交换机中已开启DHCP 服务&#xff0c;因此不需要在配置DHCP服务。如果您的网络环境中也已有DHCP服务&#xff0c;也不用再配置DHCP服务了&#xff0c;直接部署PXE相关服务即可。 找一台linux系统的服务器&#xff0c;这本次试验用的是…

32定时器定时输出比较输入捕获编码器接口

一.定时器简介 1.基本定时器 2.通用定时器 滤波器可以滤掉信号的抖动和干扰&#xff0c;其工作原理&#xff1a;在一个固定的时钟频率f下进行采样&#xff0c;如果连续n隔采样点都为相同的电平&#xff0c;那就代表输入的信号稳定了。如果采样值不全都相同&#xff0c;那就说明…

DataTable.Load(reader)注意事项

对于在C#中操作数据库查询&#xff0c;这样的代码很常见&#xff1a; using var cmd ExecuteCommand(sql); using var reader cmd.ExecuteReader(); DataTable dt new DataTable(); dt.Load(reader); ...一般的查询是没问题的&#xff0c;但是如果涉及主键列的查询&#xf…

(2024,CompAgent,LLM,提示分解,基于布局的对象组合)分而治之:语言模型可以规划和自我纠正组合文本到图像的生成

Divide and Conquer: Language Models can Plan and Self-Correct for Compositional Text-to-Image Generation 公和众和号&#xff1a;EDPJ&#xff08;进 Q 交流群&#xff1a;922230617 或加 VX&#xff1a;CV_EDPJ 进 V 交流群&#xff09; 目录 0. 摘要 3. 方法 3.1…

【郑益慧】模拟电子技术:8.结型场效应管特性和参数

结型场效应管特性&#xff08;N沟道&#xff09; &#xff1a;当日事当当日毕 &#xff1a;通过讨论加强学习的深度 中间是一个N型区参杂了两个高浓度的P 栅极控制了两个P。 源端电压给0&#xff0c;看一看到图中天生就沟道。 如何控制呢&#xff1f; 给Ugs加反偏电压&…

网络安全B模块(笔记详解)- Sql注入之绕过

1.使用渗透机场景kali中的工具扫描服务器场景,打开搜索页面,并将页面url做为Flag提交(IP地址不提交例如:http:123.com:8080/a/b/a.html提交/a/b/a.html); 2.使用渗透机场景windows7访问服务器场景搜索页面,利用该页面的漏洞,查询数据库的字段,并将字段数作为Flag提交…

仿真APP在金属波纹管液压胀形工艺设计中的应用

一、背景介绍 金属波纹管是带有波纹状截面的金属管状零件&#xff0c;在工业中应用广泛。金属波纹管特殊的截面形状使其具备较好的柔韧性&#xff0c;能够在一定范围内伸缩弯曲。这一特性赋予波纹管两大用途&#xff1a;一是作为变形补偿器&#xff0c;可用于补偿管道设备由于…

Windows系统安装OpenSSH+VS Code结合内网穿透实现远程开发

文章目录 前言1、安装OpenSSH2、vscode配置ssh3. 局域网测试连接远程服务器4. 公网远程连接4.1 ubuntu安装cpolar内网穿透4.2 创建隧道映射4.3 测试公网远程连接 5. 配置固定TCP端口地址5.1 保留一个固定TCP端口地址5.2 配置固定TCP端口地址5.3 测试固定公网地址远程 前言 远程…