el-tree 展开指定层级 节点

news2024/11/16 1:54:28

示例:只展开一级节点

 

 代码实现:

element UI 文档

 html代码

defaultExpandedArr 是重点 需要加node-key


    <el-tree
      :props="defaultProps"
      :data="treeData"
      :default-expanded-keys="defaultExpandedArr"
      node-key="id"
      ref="tree"
    ></el-tree>

js代码

export default {
  data() {
    return {
      defaultProps: {
        children: "children",
        label: "label",
      },
      treeData: [],
      defaultExpandedArr: [],
    };
  },
  mounted() {
    // 相当于请求接口
    this.init();
  },
  methods: {
    init() {
      // 获取到接口数据 之后赋值
      this.treeData = [
        {
          id: 1,
          label: "一级 1",
          children: [
            {
              id: 4,
              label: "二级 1-1",
              children: [
                {
                  id: 9,
                  label: "三级 1-1-1",
                },
                {
                  id: 10,
                  label: "三级 1-1-2",
                },
              ],
            },
          ],
        },
        {
          id: 2,
          label: "一级 2",
          children: [
            {
              id: 5,
              label: "二级 2-1",
            },
            {
              id: 6,
              label: "二级 2-2",
            },
          ],
        },
        {
          id: 3,
          label: "一级 3",
          children: [
            {
              id: 7,
              label: "二级 3-1",
            },
            {
              id: 8,
              label: "二级 3-2",
            },
          ],
        },
      ];
      // 给 你想展开的数据 进行 push 到 defaultExpandedArr内
      // 我这个展示的是一级的展开 在想往下级 可以继续循环嵌套之后循环children 进行push
      this.treeData.forEach((item) => {
        this.defaultExpandedArr.push(item.id);
      });
    },
  },
};

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/712180.html

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

相关文章

第十六章Java多线程常见模式

文章目录 同步模式之保护性暂停带超时版 GuardedObjectjoin 原理多任务版 GuardedObject 异步模式之生产者/消费者模式标准库中的阻塞队列阻塞队列的实现加锁实现 生产者消费者模型的作用是什么 同步模式之保护性暂停 定义 即 Guarded Suspension&#xff0c;用在一个线程等待…

LeetCode_链表_中等_445.两数相加 II

目录 1.题目2.思路3.代码实现&#xff08;Java&#xff09; 1.题目 给你两个非空链表来代表两个非负整数。数字最高位位于链表开始位置。它们的每个节点只存储一位数字。将这两数相加会返回一个新的链表。 你可以假设除了数字 0 之外&#xff0c;这两个数字都不会以零开头。 …

C#异常总结

C#异常总结 定义Try语句异常类创建用户自定义异常搜索调用栈的示例异常抛出 定义 程序中的运行时错误&#xff0c;它违反一个系统约束或应用程序约束&#xff0c;或出现了在正常操作时未预料的情形。 Try语句 指明被异常保护的代码块&#xff0c;并提供代码以处理异常。try由…

ICC2:fixed和locked有什么不同?

如题&#xff0c;physical status中locked与fixed有很多小伙伴会搞混&#xff0c;从实用性的角度来讲这两个并没有什么区别&#xff0c;一是工具都不会更改object这两种属性&#xff0c;二是工具都不会在优化过程中移除这两个属性的object。 所以&#xff0c;唯一的区别在于lo…

【JUC-4】线程池实战应用

线程池 线程池创建方式 Executors创建线程池(不推荐) JDK提供的工具类Execurtors创建线程池(不推荐), 列举几个Executors中创建线程池的方法; 查看Executors的源代码发现, 它创建线程池也是通过 new ThreadPoolExecutor() 来创建线程池的. 当然其中有一些特殊的线程池也不是…

Moka AI产品后观察:HR SaaS迈进AGI时代

在AI这条路上&#xff0c;Moka已经走了很远。如今的Moka Eva是在此前AI模型基础上的更进一步。未来AGI时代&#xff0c;HR SaaS会有更多可能性。 出品|产业家 在AI潮水里&#xff0c;Moka正在加速快跑。 在6月28日的2023夏季新品发布会上&#xff0c;国内首个AI原生HR Saa…

流量卡收货地就是归属地,这是什么意思呢?

我们在网上申请流量卡时&#xff0c;会比较关注流量卡归属地这一问题&#xff0c;据小编了解&#xff0c;目前网上的流量卡归属地有两种模式&#xff0c;接下来&#xff0c;小编一一为大家介绍一下&#xff0c;大家可以根据自己的情况来选择。 ​ 在中国的手机号码都有固定的区…

【MySQL】备份数据(导出数据 / 导入数据)

&#x1f3af;导出数据 1、使用 SELECT ... INTO OUTFILE 语句导出数据 SELECT...INTO OUTFILE 是 MySQL 用于导出数据的语句&#xff0c;它允许将查询结果保存到指定的文件中。 该语句的基本语法如下&#xff1a; SELECT column1, column2, ... INTO OUTFILE file_path …

Kotlin~Template模版方法模式

概念 定义算法骨架、代码模版 角色介绍 Abstract ClassConcrete Class UML 代码实现 abstract class Game {protected abstract fun initialize()protected abstract fun startPlay()protected abstract fun endPlay()// 模版fun play(){initialize()startPlay()endPlay()…

Spring面试题--Spring中事务失效的场景有哪些

Spring中事务失效的场景有哪些&#xff1f; 异常捕获处理 Transactional public void update(Integer from, Integer to, Double money) {try {//转账的用户不能为空Account fromAccount accountDao.selectById(from);//判断用户的钱是否够转账if (fromAccount.getMoney() - …

idea运行项目时右下角一直提示Lombok requires enabled annotation processing

出现这个错误是因为使用了Lombok插件的原因&#xff0c;可能是安装时候没有配置好 Lombok requires enabled annotation processing&#xff1a;翻译过来就是Lombok 需要启用注释处理 解决方案 File -> Settings ->Build,Execution,Deployment -> Compiler ->An…

35岁程序员现状,太真实!

“未来每年&#xff0c;我们将会为社会输送1000名工作10年以上的人才。” 这是之前马云在演讲中提到的关于阿里巴巴这样的大厂老员工的问题。总的来讲就是——“毕业”。 也经常能够看到在各个平台有程序员讲到自己35岁的焦虑。 之前&#xff0c;在某平台上就有一个有意思的…

Redis主从复制模式3

谋权篡位 假设在一个Redis集群中&#xff0c;有一台主机和两台从机构成一个Redis集群。此时因外部原因&#xff0c;导致主机宕机&#xff0c;俗话说 “国不可⼀一日无君&#xff0c;军不可一日无帅”&#xff0c;那么需要从剩余的两台从机中再次选出一台主机&#xff0c;从而来…

【小沐学Unity3d】Unity插件之绳索模拟Obi Rope

文章目录 1、简介2、安装3、示例测试3.1 Chains3.2 Crane3.3 ElectricalWires3.4 FreightLift3.5 Rocker3.6 RopeAndJoints3.7 RopeShowcase 4、简单测试结语 1、简介 https://assetstore.unity.com/packages/tools/physics/obi-rope-55579 Obi 是一款基于粒子的高级物理引擎…

本地部署 Chatbot UI,一个开源的 ChatGPT UI

openchat-ui 0. 什么是 Chatbot UI1. Github 地址2. 本地部署3. (参考)配置文件说明 0. 什么是 Chatbot UI Chatbot UI 是一个用于 AI 模型的开源聊天 UI。适用于 OpenChat 模型。 画面效果展示如下&#xff0c; 1. Github 地址 https://github.com/imoneoi/openchat-ui 2.…

Docker安装RabbitMQ docker安装RabbitMQ完整详细教程

Docker安装RabbitMQ docker安装RabbitMQ完整详细教程 Docker 上安装 RabbitMQ 3.12 的步骤&#xff1a;选择要安装的RabbitMQ 版本1、拉取 RabbitMQ 镜像2、创建并运行容器3、RabbitMQ 常用端口以及作用4、访问 管理页面测试&#xff0c;是否启动成功关闭容器启动容器 5、Docke…

OpenResty cosocket

cosocket 是各种 lua-resty-* 非阻塞库的基础 cosocket coroutine socket 需要 Lua 协程特性的支持&#xff0c;也需要 Nginx 事件机制的支持&#xff0c;两者结合在一起实现非阻塞网络 I/O。 遇到网络 I/O 时会交出控制权&#xff0c;把网络事件注册到 Nginx 监听列表中&a…

OpenSSH 用户枚举漏洞(CVE-2018-15473) 漏洞修复

OpenSSH 用户枚举漏洞&#xff08;CVE-2018-15473&#xff09;漏洞修复 1 漏洞说明2 漏洞修复3 相关问题 1 漏洞说明 2 漏洞修复 查看当前openssh版本&#xff1a; [rootizr0a05u4qferpr7yfhtotz ~]# ssh -V OpenSSH_7.4p1, OpenSSL 1.0.2k-fips 26 Jan 2017 [rootizr0a05u4…

ChatGLM-6B一键安装,马上使用(windows)!!

产品特点 双语&#xff1a; 同时支持中文和英文。 高精度&#xff08;英文&#xff09;&#xff1a; 在公开的英文自然语言榜单 LAMBADA、MMLU 和 Big-bench-lite 上优于 GPT-3 175B&#xff08;API: davinci&#xff0c;基座模型&#xff09;、OPT-175B 和 BLOOM-176B。 高…

MiniKube安装教程,简易版k8s,带你用最简单的方法体验k8s(学习环境通用)

Minikube安装教程 minikube 是本地 Kubernetes&#xff0c;专注于让 Kubernetes 易于学习和开发&#xff0c;这能很方便的在本地进行k8s学习&#xff0c;减轻初学者对于k8s的安装困难。&#xff08;信我&#xff0c;新手入门k8s就用这个够用了&#xff01;先别去折腾生产环境的…