elementui 树形表格 全部展开及收起功能

elementui: v2.12.0
主要方法: toggleRowExpansion

方法名说明参数
toggleRowExpansion用于可展开表格与树形表格,切换某一行的展开状态,如果使用了第二个参数,则是设置这一行展开与否(expanded 为 true 则展开)row, expanded

使用: this.$refs.theTable.toggleRowExpansion(row, true)
需求简说: 树形表格上方提供两个按钮: “展开全部” “收起全部”
逻辑简说: 递归遍历赋给表格的值(tableData),依次展开或收起每一行

forArr(arr, isExpand) {
  arr.forEach(i => {
    this.$refs.theTable.toggleRowExpansion(i, isExpand)
    if (i.children) {
      this.forArr(i.children, isExpand)
    }
  })
},
expandAll() { // 默认展开全部的话,首次加载需要在$nextTick下进行
  this.forArr(this.tableData, true)
},
collapseAll() {
  this.forArr(this.tableData, false)
}

用了很多方法,折腾了好久,这个是最简单粗暴起效的,所以说,还是要多看api啊…
在这里插入图片描述

  • 12
    点赞
  • 21
    收藏
    觉得还不错? 一键收藏
  • 9
    评论
评论 9
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值