怎么控制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.mzph.cn/news/656130.shtml

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

相关文章

如何使用Python+Flask搭建本地Web站点并结合内网穿透公网访问?

文章目录 前言1. 安装部署Flask并制作SayHello问答界面2. 安装Cpolar内网穿透3. 配置Flask的问答界面公网访问地址4. 公网远程访问Flask的问答界面 前言 Flask是一个Python编写的Web微框架&#xff0c;让我们可以使用Python语言快速实现一个网站或Web服务&#xff0c;本期教程…

OpenAI发布新模型!ChatGPT性能重磅提升,API大幅降价,GPT-4 「变懒」被修复

OpenAI 对ChatGPT进行了大更新&#xff1a;推出了新一代的嵌入模型&#xff0c;对GPT-4 Turbo模型进行了更新&#xff0c;并将很快对GPT-3.5 Turbo的API进行大幅降价&#xff0c;GPT-4「变懒」行为也被修复。 接下来二狗就带大家看看ChatGPT的这次详细更新。 推出新的嵌入模型…

电脑护眼模式怎么设置?4个有效方法保护眼睛!

“我感觉每天使用电脑的时间久了&#xff0c;眼睛总是不太舒服。电脑护眼模式怎么设置呢&#xff1f;有什么比较好用的方法可以推荐吗&#xff1f;” 如果长时间使用电脑&#xff0c;或许会让我们感到用眼疲劳。电脑护眼模式是现代人常用的电脑设置之一&#xff0c;它能有效地减…

大数据学习之Redis,十大数据类型的具体应用(一)

目录 3. 数据类型命令及落地应用 3.1 备注 3.2 Redis字符串&#xff08;String&#xff09; 单值单value 多值操作 获取指定区间范围内的值 数值增减 获取字符串长度和内容追加 分布式锁 getset(先get后set) 3.3 Redis列表&#xff08;List&#xff09; 简单说明 …

switch-case的简单使用

签名&#xff1a;但行好事&#xff0c;莫问前程。 文章目录 前言一、switch二、case三、break四、default总结 前言 记录一下switch-case的简单使用。 一、switch switch中的表达式只能是特定的数据类型。如下&#xff1a; byteshortcharint枚举&#xff08;jdk5.0&#xff…

Java API 操作 HDFS

Java API 操作HDFS一般有两种方式&#xff1a; 使用HDFS客户端配置文件自动配置 Java 代码中配置 一 使用HDFS客户端配置 1.1 下载HDFS客户端配置 1.2 创建Maven项目 创建Maven项目&#xff0c;将下载的客户端配置文件 core-site.xml、hdfs-site.xml 放入resources目录下&…

echart 完整例子

<!--集团用电数据柱状图--> <template><div class"scsj-wsd"><div class"type-btns"><divclass"btns-item":class"currType 0 ? active : "click"change(0)">年</div><divclass&q…

华为OD-华为机试精讲500篇系列文章目录介绍(持续补充ing)

目录 背景介绍 什么是华为OD&#xff1f; OD现状 OD趋势 华为OD机考刷题攻略 1、刷题资料&#xff1a;投递岗位通过筛选后提供 2、注意事项&#xff1a; 真题代码目录 背景介绍 经济下行的这几年&#xff0c;每个人都感同身受&#xff0c;如何让自己在芸芸众生中脱颖而…

【高效开发工具系列】Wolfram Alpha

&#x1f49d;&#x1f49d;&#x1f49d;欢迎来到我的博客&#xff0c;很高兴能够在这里和您见面&#xff01;希望您在这里可以感受到一份轻松愉快的氛围&#xff0c;不仅可以获得有趣的内容和知识&#xff0c;也可以畅所欲言、分享您的想法和见解。 推荐:kwan 的首页,持续学…

Unity3d Cinemachine篇(三)— FreeLook

文章目录 前言一、使用FreeLook制造第三人称跟随效果1. 创建一个游戏物体2. 创建FreeLook相机4. 完成 前言 上一期我们简单的使用了Dolly CamerawithTrack相机&#xff0c;这次我们来使用一下FreeLook 一、使用FreeLook制造第三人称跟随效果 1. 创建一个游戏物体 游戏物体比较…

(十)springboot实战——springboot3下的webflux项目mysql数据库事务处理

前言 WebFlux 是 Spring Framework 5.0 中引入的一种新型反应式编程模型&#xff0c;支持非阻塞 I/O&#xff0c;适用于高并发、高吞吐量的应用程序。在 WebFlux 应用程序中使用事务需要注意以下几点。使用 Reactive R2DBC&#xff1a;WebFlux 支持使用 Reactive R2DBC 访问关…

WebService的services.xml问题

WebService有多种实现方式&#xff0c;这里使用的是axis2 问题&#xff1a; 在本地开发&#xff0c;访问本地的http://localhost:8080/services/ims?wsdl&#xff0c;正常访问 但是打成jar包&#xff0c;不管是linux还是window启动&#xff0c;都访问不到&#xff0c;报错…

金线检测步骤

半导体行业,金线检测是必不可以少的一个检测项,除了焊点,die面,手指以外的必检项目. 重难点在于金线的提取,算法多种多样,找到适合才是关键,涉及到打光,图像处理,这里不做深入分析,软件和硬件配合好才能做的最好. 经典算法Block分析,结合图像检测. 高斯算法提取 边缘检测算法提…

空间域:空间组学的耶路撒冷

文章目录 环境配置与数据SquidpySpaGCN将基因表达和组织学整合到一个图上基因表达数据质控与预处理SpaGCN的超参优化空间域 参考文献 空间组学不能没有空间域&#xff0c;就如同蛋白质不能没有结构域。 摘要&#xff1a; 空间域是反映细胞在基因表达方面的相似性以及空间邻近性…

【Android Studio 启动出错】

Android Studio版本&#xff1a;2022.3.1 出错前操作&#xff1a; 昨晚开着三四个项目&#xff0c;然后太晚了直接关机睡觉&#xff0c;第二天起来开机&#xff0c;启动Android Studio&#xff0c;就出现了这个问题&#xff1a; Internal error. Please refer to https://co…

网络防御保护——课程笔记

一.防火墙 防火墙的主要职责&#xff1a;控制和防护 --- 安全策略 --- 防火墙可以根据安全策略来抓取流量之后做出对应的动作。 防火墙的分类 防火墙的发展进程 防火墙的控制 带内管理 --- 通过网络环境对设备进行控制 --- telnet&#xff0c;ssh&#xff0c;web --- 登录设备…

C语言——如何进行文件操作

大家好&#xff0c;我是残念&#xff0c;希望在你看完之后&#xff0c;能对你有所帮助&#xff0c;有什么不足请指正&#xff01;共同学习交流 本文由&#xff1a;残念ing原创CSDN首发&#xff0c;如需要转载请通知 个人主页&#xff1a;残念ing-CSDN博客&#xff0c;欢迎各位→…

提升编程效率的利器: 解析Google Guava库之集合篇RangeSet范围集合(五)

在编程中&#xff0c;我们经常需要处理各种范围集合&#xff0c;例如时间范围、数字范围等。传统的集合类库往往只能处理离散的元素集合&#xff0c;对于范围集合的处理则显得力不从心。为了解决这个问题&#xff0c;Google的Guava库提供了一种强大的数据结构——RangeSet&…

计算机网络-物理层传输介质(导向传输介质-双绞线 同轴电缆 光纤和非导向性传输介质-无线波 微波 红外线 激光)

文章目录 传输介质及分类导向传输介质-双绞线导向传输介质-同轴电缆导向传输介质-光纤非导向性传输介质小结 传输介质及分类 物理层规定电气特性&#xff1a;规定电气信号对应的数据 导向传输介质-双绞线 双绞线的主要作用是传输数据和语音信息。它通过将两根导线以特定的方…

C#,德兰诺依数(Dealnnoy Number)的算法与源代码

1 Dealnnoy Number 德兰诺依数&#xff0c;德兰诺伊数 德兰诺依数是以法国军官、业余数学家亨利德兰诺依&#xff08;Henry Dealnnoy&#xff09;的名字命名。 Henry Dealnnoy 在组合数学中&#xff0c;德兰诺依数描述了从(0,0)到(m,n)的格路问题中&#xff0c; 只允许按照(0…