怎么控制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.rhkb.cn/news/248009.html

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

相关文章

为什么需要 SSL 证书?

网站需要 SSL 证书来确保用户数据的安全&#xff0c;验证网站的所有权&#xff0c;防止攻击者创建虚假网站版本&#xff0c;以及将信任传达给用户。 如果网站要求用户登录、输入个人详细信息&#xff08;例如其信用卡号&#xff09;或查看机密信息&#xff08;例如&#xff0c…

C++入门(一)— 使用VScode开发简介

文章目录 C 介绍C 擅长领域C 程序是如何开发编译器、链接器和库编译预处理编译阶段汇编阶段链接阶段 安装集成开发环境 &#xff08;IDE&#xff09;配置编译器&#xff1a;构建配置配置编译器&#xff1a;编译器扩展配置编译器&#xff1a;警告和错误级别配置编译器&#xff1…

Ubuntu 20.04 Server 使用命令行设置 IP 地址

1、编辑 /etc/netplan/ 目录下的配置文件00-installer-config.yaml (修改之前&#xff0c;把原来的文件备份) 按照对应的配置进行修改IP地址和网关 2、运行命令使其生效 sudo netplan apply 修改完成后&#xff0c;永久有效。重启后配置不会丢失

关于bypassuac的探究——基础知识

用户帐户控制(User Account Control)是Windows Vista&#xff08;及更高版本操作系统&#xff09;中一组新的基础结构技术&#xff0c;可以帮助阻止恶意程序&#xff08;有时也称为“恶意软件”&#xff09;损坏系统&#xff0c;同时也可以帮助组织部署更易于管理的平台。 使用…

【网站项目】基于SSM的204面向工程教育专业认证的毕业生跟踪调查反馈系统

&#x1f64a;作者简介&#xff1a;拥有多年开发工作经验&#xff0c;分享技术代码帮助学生学习&#xff0c;独立完成自己的项目或者毕业设计。 代码可以私聊博主获取。&#x1f339;赠送计算机毕业设计600个选题excel文件&#xff0c;帮助大学选题。赠送开题报告模板&#xff…

PyTorch的nn.Module类的详细介绍

在PyTorch中&#xff0c;nn.Module 类是构建神经网络模型的基础类&#xff0c;所有自定义的层、模块或整个神经网络架构都需要继承自这个类。nn.Module 类提供了一系列属性和方法用于管理网络的结构和训练过程中的计算。 1. PyTorch中nn.Module基类的定义 在PyTorch中&#xff…

谷达冠楠:抖音开店卖什么退货率低

在抖音开设电商店铺&#xff0c;选择合适的商品对于降低退货率至关重要。商品的质量和满足消费者需求是保证低退货率的关键因素。例如&#xff0c;日常必需品如个人护理用品、家居清洁工具等因其使用频率高和需求稳定&#xff0c;通常拥有较低的退货率。另外&#xff0c;独特性…

HiveSQL题——窗口函数(lag/lead)

目录 一、窗口函数的知识点 1.1 窗户函数的定义 1.2 窗户函数的语法 1.3 窗口函数分类 1.4 前后函数:lag/lead 二、实际案例 2.1 股票的波峰波谷 0 问题描述 1 数据准备 2 数据分析 3 小结 2.2 前后列转换&#xff08;面试题&#xff09; 0 问题描述 1 数据准备 …

JavaWeb中的Filter(过滤器)和 Listener(监听器)

提示&#xff1a;这两个东西听起来似乎很难&#xff0c;实际上是非常简单的&#xff0c;按照要求写就行了&#xff0c;一定不要被新名词给吓到了。 JavaWeb中的Filter&#xff08;过滤器&#xff09; 一、Filter&#xff08;过滤器&#xff09;1.如何编写 Filter2.Filter 中的细…

1002. HarmonyOS 开发问题:鸿蒙 OS 技术特性是什么?

1002. HarmonyOS 开发问题&#xff1a;鸿蒙 OS 技术特性是什么? 硬件互助&#xff0c;资源共享 分布式软总线 分布式软总线是多种终端设备的统一基座&#xff0c;为设备之间的互联互通提供了统一的分布式通信能力&#xff0c;能够快速发现并连接设备&#xff0c;高效地分发…

方案:将vue项目放在SpringMVC中,并用tomcat访问

需要先将项目生成一次war包才能访问项目的webapp文件夹下的资源&#xff0c;否则tomcat的webapp文件夹下面不会生成对应资源文件夹就无法访问。 问题&#xff1a;目录如下&#xff1a; 今天我测试了一下将vue打包后&#xff0c;放入webapp下面访问&#xff0c;却发现vue项目无…

关于Spring Boot和MyBatis常见的十道面试题

拦截器和过滤器有什么区别&#xff1f; 拦截器&#xff08;Interceptor&#xff09;和过滤器&#xff08;Filter&#xff09;都是用于在请求道道目标资源的之前或之后进行处理的组件。主要区别有以下几点&#xff1a; 依赖对象不同&#xff1a;过滤器是来时Servlet&#xff0…

备战蓝桥杯--数据结构及STL应用(基础)

今天轻松一点&#xff0c;讲一讲stl的基本操作吧&#xff01; 首先&#xff0c;让我们一起创建一个vector容器吧&#xff01; #include<bits/stdc.h> using namespace std; struct cocoack{ int coco,ck; } void solve(){vector<cocoack> x;for(int i0;i<5;i){…

私有化部署pdf工具箱

功能简介 用于合并/拆分/旋转/移动PDF及其页面的完全交互式GUI。 将多个 PDF 合并到一个生成的文件中。 将 PDF 拆分为多个文件&#xff0c;并按指定的页码或将所有页面提取为单个文件。 将 PDF 页面重新组织为不同的顺序。 以 90 度为增量旋转 PDF。 删除页面。 多页布局…

《HTML 简易速速上手小册》第7章:HTML 多媒体与嵌入内容(2024 最新版)

文章目录 7.1 在HTML中嵌入视频和音频7.1.1 基础知识7.1.2 案例 1&#xff1a;嵌入视频文件7.1.3 案例 2&#xff1a;嵌入音频文件7.1.4 案例 3&#xff1a;创建一个视频和音频混合的播放列表 7.2 使用 <iframe> 嵌入外部内容7.2.1 基础知识7.2.2 案例 1&#xff1a;嵌入…

超越传统—Clean架构打造现代Android架构指南

超越传统—Clean架构打造现代Android架构指南 1. 引言 在过去几年里&#xff0c;Android应用开发经历了巨大的变革和发展。随着移动设备的普及和用户对应用的期望不断提高&#xff0c;开发人员面临着更多的挑战和需求。传统的Android架构在应对这些挑战和需求时显得有些力不从…

除了Adobe之外,还有什么方法可以将Excel转为PDF?

前言 Java是一种广泛使用的编程语言&#xff0c;它在企业级应用开发中发挥着重要作用。而在实际的开发过程中&#xff0c;我们常常需要处理各种数据格式转换的需求。今天小编为大家介绍下如何使用葡萄城公司的的Java API 组件GrapeCity Documents for Excel&#xff08;以下简…

Docker 安装篇(CentOS)

Docker社区版 Docker从1.13版本之后采用时间线的方式作为版本号&#xff0c;分为社区版CE和企业版EE。 社区版是免费提供给个人开发者和小型团体使用的&#xff0c;企业版会提供额外的收费服务&#xff0c;比如经过官方测试认证过的基础设施、容器、插件等。 1、Docker 要求 C…

研发日记,Matlab/Simulink避坑指南(五)——CAN解包 DLC Bug

文章目录 前言 背景介绍 问题描述 分析排查 解决方案 总结 前言 见《研发日记&#xff0c;Matlab/Simulink避坑指南&#xff08;一&#xff09;——Data Store Memory模块执行时序Bug》 见《研发日记&#xff0c;Matlab/Simulink避坑指南(二)——非对称数据溢出Bug》 见《…

Activity创建与跳转

快捷&#xff0c;一下创建三个 跳转