el-table一键展开 一键收起_el-table展开行一键展开全部-程序员宅基地

技术标签: vue  前端  vue.js  

el-table 一键展开 一键收起

<el-button type="small" icon="el-icon-plus" @click="handleClick(true)">全部展开</el-button>
<el-button type="small" icon="el-icon-minus" @click="handleClick(false)">全部折叠</el-button>
data(){
    
  return {
    
    isExpand:true,// 默认为展开状态
  }
}
methods: {
    
    handleClick(isAss){
    
      //this.$refs.ctab.handleExpand(isAss)
      this.handleExpand(isAss)
    },
    handleExpand(isAss) {
    
      // 此判断是否为展开状态或折叠状态--若展开折叠是同一个按钮则无需传参和加此if
      if (this.isExpand == isAss){
    
        return
      }
      this.isExpand = !this.isExpand
      // this.tableData为返回的二级数据data
      this.$nextTick(() => {
    
        this.forArr(this.tableData, this.isExpand)
      })
    },
    // 遍历
    forArr(arr, isExpand) {
    
      arr.forEach(i => {
    
        // toggleRowExpansion见element文档
        this.$refs.ctab.toggleRowExpansion(i, isExpand)
        if (i.children) {
    
          this.forArr(i.children, isExpand)
        }
      })
    },
}
版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/qq_43987527/article/details/122069273

智能推荐

使用npm安装typescript一直处于sill install loadAllDepsIntoIdealTree状态,安装无法完成_loadrequesteddeps: sill install loadalldepsintoide-程序员宅基地

文章浏览阅读4.5w次。使用npm安装typescript一直处于sill install loadAllDepsIntoIdealTree状态,安装无法完成。iZuf64n23158mew3n6xshaZ:~/node-v6.9.2-linux-x64/bin # npm install typescript -g[ ..............] - loadRequestedDeps: sill in_loadrequesteddeps: sill install loadalldepsintoidealtree

laydate插件 只显示到月_laydate只设置月日-程序员宅基地

文章浏览阅读4.4k次。.laydate_table { display: none;}#laydate_hms{ display: none !important;}&lt;input type="text" name = "startMonth" onblur="mark_month(this)" id="startMonth" onclick="laydate({istime: true, form..._laydate只设置月日

2019中国大学生程序设计竞赛(CCPC) - 网络选拔赛 部分题解_全国大学生程序设计竞赛试题-程序员宅基地

文章浏览阅读617次。题目链接:http://acm.hdu.edu.cn/contests/contest_show.php?cid=8691001 . ^&^ 位运算签到题,输出a,b与的结果,如果为0,输出lowbit最小的。#include <bits/stdc++.h>using namespace std;#define lowbit(x) x&..._全国大学生程序设计竞赛试题

秒杀场景如何设计呢?-程序员宅基地

文章浏览阅读1k次。1 秒杀场景秒杀场景登陆12306进行火车票抢座1599元购入飞天茅台周董演唱会的门票双十一秒杀活动秒杀场景关注点严格防止超卖:库存1000件卖了1020件,要杀个码农祭天了!防止超卖是秒杀系统设计最核心的部分。防止黑产:防止不怀好意的羊毛党薅羊毛。保证用户体验:高并发下,给用户提供友善的购物体验,尽可能支持比较高的QPS等等。接下来就让我们按照关注点,不断细化秒杀场景。2 第1版-裸奔不加思考,上来直接按照 SpringBoot + MyBatis 模

通过ESP8266将STM32串口数据传输到MQTT服务器_stm32如何将传染期采集的数据发送到mqtt服务端-程序员宅基地

文章浏览阅读6.9k次,点赞6次,收藏51次。最近在和自己的小组捣鼓怎么将STM32的串口数据传输到MQTT服务器上,由于是第一次,所有走了一些弯路。在这里分享一下自己的这次经验。在开始之前,我想对我另外的两个队员:小杨、小行,说:你们幸苦了!在开始之前,你得要会lua语言,并且要配置ESP8266的环境,在这里我推荐一个视频 ----> 视频地址。这个视频里详细的说了怎么配置ESP8266环境,并且也介绍了lua语言,个人认为足够用..._stm32如何将传染期采集的数据发送到mqtt服务端

java.sql.SQLException: Could not retrieve transation read-only status serve-程序员宅基地

文章浏览阅读4.3k次。异常信息如下### Cause: java.sql.SQLException: Could not retrieve transation read-only status server; Could not retrieve transation read-only status server; nested exception is java.sql.SQLException: Could not retrieve transation read-only status server at o_java.sql.sqlexception: could not retrieve transation read-only status server

随便推点

IDEA史上最全的各种快捷键_ideactrl+p快键键吧print调处来了-程序员宅基地

文章浏览阅读1.5w次,点赞216次,收藏1.1k次。文章目录一.快速生成main二.快速生成System.out.print三.文件保存四.删除一行五.新添,新建,添加的快捷键六.切换java程序七.目录显示与关闭八.运行九.提示方法的参数十.切换窗口一.快速生成main输入psvm二.快速生成System.out.print使用sout三.文件保存IDEA是自动保存的,不需要我们去Ctrl + S保存。四.删除一行Ctrl+Y五.新添,新建,添加的快捷键Alt + lnsert六.切换java程序_ideactrl+p快键键吧print调处来了

云服务器和虚拟机介绍,以及服务器购买,Linux环境配置教程_云服务器买来是自己安装环境还是自带的-程序员宅基地

文章浏览阅读1.3k次。什么是虚拟主机虚拟主机就是用网络空间技术,把一台服务器利用空间技术分成很多的“虚拟”的主机,每一台网络空间都拥有独立域名和IP地址,具备完整的Internet服务器的功能。网络空间之间都是完全独立,每台网络空间和一台独立的主机完全一样。效果一样,但费用却大不一样了。由于多个网络空间都需要共享一台真实的主机资源,所以每个网络空间用户承受的网络维护费用、硬件费用、通信线路的费用大幅度降低,Internet真正让人人用得起的网络。但虚拟主机有一定的局限性,以下这些网站适合搭建在虚拟主机上:1、流量在一定限度的_云服务器买来是自己安装环境还是自带的

《Kubernetes监控篇:Kubernetes监控之基础层监控(一)》_kubernetes_sd_configs-程序员宅基地

文章浏览阅读1.5k次,点赞5次,收藏2次。系列文章目录提示:这里可以添加系列文章的所有文章的目录,目录需要自己手动添加例如:第一章 Python 机器学习入门之pandas的使用提示:写完文章后,目录可以自动生成,如何生成可参考右边的帮助文档文章目录系列文章目录前言一、pandas是什么?二、使用步骤1.引入库2.读入数据总结前言提示:这里可以添加本文要记录的大概内容:例如:随着人工智能的不断发展,机器学习这门技术也越来越重要,很多人都开启了学习机器学习,本文就介绍了机器学习的基础内容。提示:以下是本篇文章正文内容,下面案例_kubernetes_sd_configs

opencv 目标检测 CascadeClassifier工作原理_cascadeclassifierimpl runat-程序员宅基地

文章浏览阅读8.3k次,点赞2次,收藏9次。opencv 目标检测模块opencv_objdetect中的类 CascadeClassifierImpl 实现了几个重要的方法load()和detectMultiScale()。load()是用来加载训练好的模型的;而detectMultiScale()实现了多尺度检测的过程,它有三重重载: void detectMultiScale( InputArray image, ..._cascadeclassifierimpl runat

UVa 10158 - War_uva10158-程序员宅基地

文章浏览阅读3.5k次。题目:有n个人,有四种操作:1.朋友设定;2.敌人设定;3.朋友询问;4.敌人询问。对每个操作判断合法性。分析:并查集。通过分析可以知道,朋友都在一个集合,每个集合只能有一个敌对的集合,并且他们是相互敌对的。 (如果一个集合存在2个以上的敌人,那么他们一定是同一个集合的。)所以每个人设置一个对应的enemy, 利用sets(i+n)记录i的敌_uva10158

openwrt 收集-程序员宅基地

文章浏览阅读179次。**********************************************************************************http://wiki.openwrt.org/doc/howto/buildroot.exigencehttp://blog.csdn.net/sdvch/article/details/16343011https://y..._openwrt 收集信息

推荐文章

热门文章

相关标签