首页 > 其他分享 >element--tree树形组件

element--tree树形组件

时间:2024-08-08 20:28:43浏览次数:10  
标签:node -- tree label 节点 children element id

一、有一个 default-expand-all 是否默认展开所有节点的属性,只在第一次初始化tree的时候有效,改变这个属性的值好像不能控制展开折叠

给出示例代码:

<template>
  <div><el-tree :data="treeData" ref="tree" :default-expand-all="false"></el-tree>
    <el-button @click="handleExpandAll">展开全部</el-button>
    <el-button @click="handleCollapseAll">折叠全部</el-button></div>

</template>

<script>
export default {
  data() {
    return {
      treeData: [
        {
          id: 1,
          label: '一级节点 1',
          children: [
            {
              id: 2,
              label: '二级节点 1-1'
            },
            {
              id: 3,
              label: '二级节点 1-2'
            }
          ]
        },
        {
          id: 4,
          label: '一级节点 2',
          children: [
            {
              id: 5,
              label: '二级节点 2-1'
            },
            {
              id: 6,
              label: '二级节点 2-2'
            }
          ]
        }
      ]
    };
  },
  methods: {
    handleExpandAll() {
      const tree = this.$refs.tree;
      this.traverseTree(tree.store.root, (node) => {
        node.expanded = true;
      });
    },
    handleCollapseAll() {
      const tree = this.$refs.tree;
      this.traverseTree(tree.store.root, (node) => {
        node.expanded = false;
      });
    },
    traverseTree(node, callback) {
      if (!node) return;
      callback(node);
      const children = node.root ? node.root.childNodes : node.childNodes;
      if (children) {
        children.forEach((child) => {
          this.traverseTree(child, callback);
        });
      }
    }
  }
};
</script>

点击按钮后通过遍历各个节点更改状态实现展开或折叠

标签:node,--,tree,label,节点,children,element,id
From: https://www.cnblogs.com/chenxdnote/p/18349667

相关文章

  • String类,及构造方法day11
    packagecom.shujia.day11;/*String:字符串解释:白话文描述:使用一个串将一个一个字符串起来的串儿叫字符串。专业术语:使用双引号将若干个字符括起来的字符序列官网概述:String类代表字符串。Java程序中的所有字符串文字(例如"......
  • 如何抵挡Temu半托管?提升全托管效果的测评号策略
    2024年,跨境电商的市场风向又变了!1月4日,阿里旗下的速卖通推出半托管模式,通过免佣金和现金补贴吸引卖家;同月,拼多多的Temu也在美国上线了半托管服务,TikTokShop和SHEIN紧随其后。这给才流行不久的全托管模式商家增加了不少压力,尽管全托管模式能提供全面的运营支持,但在竞争激烈的......
  • 潜在新就业岗位超300万个 原生鸿蒙开发创造百万级人才缺口
    在数字化转型的浪潮中,开发者作为数字经济的建设者和创新者,成为了推动社会进步的重要⼒量。InfoQ研究中⼼最新发布的《中国开发者画像洞察研究报告2024》显示,截至2023年年底,中国泛开发者⼈数高达2067.21万,增速为2.5%。在这2000多万人中,鸿蒙⽣态吸引了超过254万开发者。伴随着鸿蒙......
  • Temu、Shein半托管vs全托管?养号测评自救一下
    2024年,跨境电商的市场风向又变了!1月4日,阿里旗下的速卖通推出半托管模式,通过免佣金和现金补贴吸引卖家;同月,拼多多的Temu也在美国上线了半托管服务,TikTokShop和SHEIN紧随其后。这给才流行不久的全托管模式商家增加了不少压力,尽管全托管模式能提供全面的运营支持,但在竞争激烈的......
  • 反向代理的工作原理解析
     在当今数字化时代,网络通讯扮演着重要的角色,而代理技术为网络通讯提供了更多的灵活性和安全性。作为两种重要的代理技术,代理服务器和反向代理的运行原理和用途各有不同。本文将重点介绍反向代理的运行原理,深入探讨其在网络通讯中的作用和优势。1.代理服务器和反向代理之间......
  • CSP16
    这题,唯一坑点,子序列是不连续的注意,子序列可以不连续,子串必须连续。有一个很显然的暴力点击查看代码intdp[N][N],n,p[N],q[N];intmain(){ speed(); freopen("in.in","r",stdin); freopen("out.out","w",stdout); cin>>n; for(inti=1;i<=n;i++)cin>>......
  • 鹏哥C语言自定义笔记重点
    1.浮点数在内存中不能精确保存。2.sizeof这个操作符计算返回的结果是size_t类型的,是无符号整数型的,当遇见负数会被认为是非常大的数。3.strcpy在拷贝字符串时,会把源字符串中的\0也拷贝过去。assert是断言,可以防止NULL,需要头文件#include<assert.h>。const修饰指针变量放在*......
  • [lnsyoj2073/luogu5911]PRZ
    题意给定由\(n\)个二元组\((t,w)\)组成的集合\(S\)和常数\(W\),需要将\(S\)分为任意多个非空子集\(sub_1,sub_2,\cdots,sub_k\),求:\[\min\{\sum_{i=1}^k\max_{j\insub_i}\{t_j\}(\sum_{j\insub_i}w_j\leW)\}\]sol数据范围较小,显然状态压缩DP。状态比较好想,\(f_......
  • 目录函数以及链接文件
    一、stat补充1、getpwuid()structpasswd*getpwuid(uid_tuid);功能:根据用户id到/etc/passwd文件下解析获得结构体信息参数:uid:用户id返回值:成功返回id对应用户的信息失败返回NULL2、getgrgid()structgroup*getgrgid(gid_tgid);拿到组的结构体功能:根据gid......
  • 【生成式人工智能-八-大型语言模型的能力评估】
    语言模型的能力评估评估难度来自哪里输出没办法确定给出选择题本身就没标准答案评估方法人力用语言模型来评估语言模型语言模型的偏爱评估语言模型的数据集评估模型的不同能力阅读长文的能力心智测验道德性测试安全性测试通常情况下我们想到的语言模型能力评估,就......