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

news2024/11/19 13:43:15

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.coloradmin.cn/o/1428254.html

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

相关文章

解决nvm切换node版本后原先npm全局安装(npm i -g)的包无法使用

找到node14版本下的node_global文件夹&#xff0c;复制文件夹路径&#xff0c;然后点击环境变量、系统编辑&#xff0c;点击path、点击编辑 在终端输入npm config set prefix “E:\devSoft\git\nvm\v14.18.3\node_global”&#xff0c;其中E:\devSoft\git\nvm\v14.18.3\node_g…

【软件工程】建模工具之开发各阶段绘图——UML2.0常用图实践技巧(功能用例图、静态类图、动态序列图状态图活动图)

更多示例图片可以参考&#xff1a;&#xff08;除了常见的流程图&#xff0c;其他都有&#xff09; 概念&#xff1a;类图 静态&#xff1a;用例图 动态&#xff1a;顺序图&状态图&活动图 1、【面向对象】UML类图、用例图、顺序图、活动图、状态图、通信图、构件图、部…

2024年美赛 (D题ICM)| 湖流网络水位控制 |数学建模完整代码+建模过程全解全析

当大家面临着复杂的数学建模问题时&#xff0c;你是否曾经感到茫然无措&#xff1f;作为2022年美国大学生数学建模比赛的O奖得主&#xff0c;我为大家提供了一套优秀的解题思路&#xff0c;让你轻松应对各种难题。 让我们来看看美赛的D题&#xff01; 完整内容可以在文章末尾领…

网络原理-TCP/IP(4)

TCP原理 滑动窗口 之前我们讲过了确认应答策略,对发送的每一个数据段,都要给一个ACK确认应答,收到ACK后再发送下一个数据段. 确认应答,超时重传,连接管理这样的特性都是为了保证可靠运输,但就是付出了传输效率(单位时间能传输数据的多少)的代价,因为确认应答机制导致了时间大…

hivesql的基础知识点

目录 一、各数据类型的基础知识点 1.1 数值类型 整数 小数 float double(常用) decimal(针对高精度) 1.2 日期类型 date datetime timestamp time year 1.3 字符串类型 char varchar / varchar2 blob /text tinyblob / tinytext mediumblob / mediumtext lon…

字符串的简单处理

第1题 ISBN号码 查看测评数据信息 每一本正式出版的图书都有一个ISBN号码与之对应&#xff0c;ISBN码包括9位数字、1位识别码和3位分隔符&#xff0c;其规定格式如“x-xxx-xxxxx-x”&#xff0c;其中符号“-”就是分隔符&#xff08;键盘上的减号&#xff09;&#xff0c;最…

图像超分辨率方法与在线工具

图像超分辨率(Super Resolution, SR)是一种增强图像分辨率的技术&#xff0c;目的是从低分辨率(Low Resolution, LR)图像重建出高分辨率(High Resolution, HR)图像。这项技术在视频增强、卫星图像处理、医学成像等领域有广泛应用。图像超分辨率方法可以分为三大类&#xff1a;插…

Python算法题集_矩阵置零

Python算法题集_矩阵置零 题73&#xff1a;矩阵置零1. 示例说明2. 题目解析- 题意分解- 优化思路- 测量工具 3. 代码展开1) 标准求解【三层循环】2) 改进版一【纵横计数器】3) 改进版二【原地算法】 4. 最优算法 本文为Python算法题集之一的代码示例 题73&#xff1a;矩阵置零…

linux ln命令-linux软链接、硬链接-linux软、硬链接的区别(二):软链接

0、序 上一篇&#xff1a;linux ln命令-linux软链接、硬链接-linux软、硬链接的区别(一)&#xff1a;硬链接 描述了硬链接相关内容&#xff0c;本篇主要描述软链接。 1、软链接 符号链接也称软链接&#xff0c;是将一个路径名链接到一个文件。这些文件是一种特别类型的文件。…

【JS】Express.js环境配置与示例

&#x1f60f;★,:.☆(&#xffe3;▽&#xffe3;)/$:.★ &#x1f60f; 这篇文章主要介绍Express.js环境配置与示例。 学其所用&#xff0c;用其所学。——梁启超 欢迎来到我的博客&#xff0c;一起学习&#xff0c;共同进步。 喜欢的朋友可以关注一下&#xff0c;下次更新不…

【云手机】快速获取一台属于你的云手机,在云上调试你的应用!

0x00 前言 随着科技的飞速发展&#xff0c;云手机已然成为一种云端虚拟商品&#xff0c;它打破地域限制&#xff0c;让你随时随地畅享移动体验。红手指、小鱼云手机等平台虽便捷易用&#xff0c;却在可扩展性和隐私性方面有所欠缺。冗长的《隐私政策》是否让你望而却步&#x…

C++通用编程(2)

函数模板高级用法 1.分文件编写的优点2.普通函数的分文件编写3.函数模板的分文件编写4.细节提示5.函数模板应用高级decltype推导类型函数后置返回类型 6.总结 函数模板讲完后&#xff0c;C全部的函数类型我们就接触的差不多了。今天给做一些关于函数份文件编写的知识点补充。 1…

C# winform 多语言(json)方式实现

前后对比 使用nuget json工具包1.总体思路 创建对应的json字典对照表 { "测试":"Test", "语言":"Language", "设置":"Set", "中文(默认)":"Chinese (default)", "英文":"E…

【对象属性拷贝】⭐️按照需要转换的类型反射设置拷贝后对象的属性

背景&#xff1a; 小伙伴们大家好&#xff0c;最近开发的时候遇到一种情况&#xff0c;项目引入了全局序列化器来实现Date&#xff0c;LocalDateTime类型的字段根据时区转换&#xff0c;总体来说接口没什么要改动的&#xff0c;只要原来字段的属性是以上两种就行&#xff0c;但…

【linux】校招中的“熟悉linux操作系统”一般是指达到什么程度?

这样&#xff0c;你先在网上找一套完整openssh升级方案&#xff08;不是yum或apt的&#xff0c;要源码安装的&#xff09;&#xff0c;然后在虚拟机上反复安装测试&#xff0c;直到把他理解了、背下来。 面试的时候让你简单说说linux命令什么的&#xff0c;你就直接把这个方案…

Linux服务详解

如有错误或有补充&#xff0c;以及任何改进的意见&#xff0c;请在评论区留下您的高见&#xff0c;同时文中给出大部分命令的示例&#xff0c;即是您暂时无法在Linux中查看&#xff0c;您也可以知道各种操作的功能以及输出 如果觉得本文写的不错&#xff0c;不妨点个赞&#x…

CentOS 7中搭建NFS文件共享服务器的完整步骤

CentOS 7中搭建NFS文件共享服务器的完整步骤 要求&#xff1a;实现镜像文件共享&#xff0c;并基于挂载的共享目录配置yum源。 系统环境&#xff1a; 服务器&#xff1a;172.20.26.167-CentOS7.6 客户端&#xff1a;172.20.26.198-CentOS7.6 1、在服务器和客户端上&#x…

案例分析技巧-软件工程

一、考试情况 需求分析&#xff08;※※※※&#xff09;面向对象设计&#xff08;※※&#xff09; 二、结构化需求分析 数据流图 数据流图的平衡原则 数据流图的答题技巧 利用数据平衡原则&#xff0c;比如顶层图的输入输出应与0层图一致补充实体 人物角色&#xff1a;客户、…

MySQL 索引和事务

目录 1 索引1.1 简介1.2 使用1.3 示例 2 事务2.1 简介2.2 使用 1 索引 1.1 简介 索引是一种特殊的文件&#xff0c;包含着对数据表里所有记录的引用指针。可以对表中的一列或多列创建索引&#xff0c;并指定索引的类型&#xff0c;各类索引有各自的数据结构实现。 索引底层是…

TypeScript 学习笔记(Day4)

「写在前面」 本文为 b 站黑马程序员 TypeScript 教程的学习笔记。本着自己学习、分享他人的态度&#xff0c;分享学习笔记&#xff0c;希望能对大家有所帮助。推荐先按顺序阅读往期内容&#xff1a; 1. TypeScript 学习笔记&#xff08;Day1&#xff09; 2. TypeScript 学习笔…