element/tree的使用(树的多选以及回显)

news2025/7/15 2:49:34

获取和设置各有两种方式:通过 node 或通过 key。如果需要通过 key 来获取或设置,则必须设置node-key。

获取和设置各有两种方式:通过 node 或通过 key。如果需要通过 key 来获取或设置,则必须设置node-key。

<el-tree
  :data="data"
  show-checkbox
  default-expand-all
  node-key="id"
  ref="tree"
  highlight-current
  :props="defaultProps">
</el-tree>

<div class="buttons">
  <el-button @click="getCheckedNodes">通过 node 获取</el-button>
  <el-button @click="getCheckedKeys">通过 key 获取</el-button>
  <el-button @click="setCheckedNodes">通过 node 设置</el-button>
  <el-button @click="setCheckedKeys">通过 key 设置</el-button>
  <el-button @click="resetChecked">清空</el-button>
</div>

<script>
  export default {
    methods: {
      // 编辑回显
      edit(){
      // 获取详情接口
           getRole(this.id).then((res) => {
            this.getRole = res.data
            if (res.code == 200) {
              this.dialogVisible = true
              this.$nextTick(() => {
                if (res.data.menuIds != null) {
                // 将后端接口数据回显到树上的方法
                  this.$refs.tree.setCheckedKeys(res.data.menuIds)
                }
              })
            } else {
              this.$message.error(res.msg)
            }
          })
      },
      getCheckedNodes() {
        console.log(this.$refs.tree.getCheckedNodes());
      },
      getCheckedKeys() {
        console.log(this.$refs.tree.getCheckedKeys());
      },
      // 设置整个节点
      setCheckedNodes() {
        this.$refs.tree.setCheckedNodes([{
          id: 5,
          label: '二级 2-1'
        }, {
          id: 9,
          label: '三级 1-1-1'
        }]);
      },
      // 设置key值
      setCheckedKeys() {
        this.$refs.tree.setCheckedKeys([3]);
      },
      resetChecked() {
        this.$refs.tree.setCheckedKeys([]);
      }
    },

    data() {
      return {
        data: [{
          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'
          }]
        }],
        defaultProps: {
          children: 'children',
          label: 'label'
        }
      };
    }
  };
</script>

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

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

相关文章

Oracle格式化五位数字格式时间

首先五位的时间格式一般出现在Excel批量导入时&#xff0c;年月日的时间格式读取时出现可以在excel文件中复现出来&#xff0c;在Excel文件中填写时间格式2023/02/21&#xff0c;然后右键设置单元格格式就选择常规就可以显示为5位的时间格式&#xff0c;也就是说2023/02/21对应…

不要对chatgpt过度反思 第二部分

如果未来&#xff0c;它真的可以引爆下一轮科技革命&#xff0c;只要双方不存在科技代差&#xff0c;就无法阻止科技扩散。 打个比方&#xff0c;如果你本身没有网络基础&#xff0c;没有大数据&#xff0c;她确实和你无关&#xff0c;反之&#xff0c;捅破了那层窗户纸&#x…

5.9 BGP属性-local_pref

配置BGP LOCAL_PREF属性控制选路 1. 实验目的 熟悉BGP LOCAL_PREF属性控制选路的应用场景掌握BGP LOCAL_PREF属性控制选路的配置方法2. 实验拓扑 实验拓扑如图5-9所示: 图5-9:配置BGP LOCAL_PREF属性控制选路 3. 实验步骤 (…

html笔记(一)

一、html简介 什么是HTML&#xff1f; Hyper Text Markup Language 超文本标记语言 超文本&#xff1f;超级文本&#xff0c;例如流媒体&#xff0c;声音、视频、图片等。 标记语言&#xff1f;这种语言是由大量的标签组成。 任何一个标签都有开始标签和结束标签&…

Datawahle组队学习——妙趣横生大数据 Day3

妙趣横生大数据 Day3四、HBase1. 背景2. HBase 概述3. HBase 数据模型相关概念数据坐标概念视图物理视图面向列的存储4. HBase 实现原理HBase 功能组件表和 RegionRegion 定位5. HBase 运行机制系统架构Region服务器的工作原理Store工作原理HLog工作原理实验Datawhale 大数据技…

Redis学习之Jedis(五)

这里写目录标题一、Jedis简介二、Jedis代码实现2.1 新建java工程2.2 导入jar包2.3 编写代码2.4 这里可以换用maven项目三、Jedis简易工具类开发3.1 添加jar包3.2 封装连接参数3.3 加载配置信息3.4 获取连接一、Jedis简介 Jedis提供了Java与Redis的连接服务。 二、Jedis代码实…

Sigmoid和Softmax共通与区分

一、共同点 Softmax以及Sigmoid这两者都是神经网络中的激活函数&#xff0c;将输入非线性化。 都作为神经网络的最后一层&#xff0c;将输出数值转换为概率值。 二、不同点 1、Softmax Softmaxexi∑j1nexjSoftmax \frac{e^{x_{i}}}{\sum_{j1}^{n}e^{x_{j}}} Softmax∑j1n​…

第一章 操作系统概述

目录一、什么是操作系统&#xff1f;1、操作系统的概念2、计算系统的构成3、主要作用二、操作系统有哪些功能&#xff1f;1、操作系统的目标2、操作系统的功能三、操作系统有哪些特征&#xff1f;1、并发性2、共享性3、虚拟性4、异步性四、操作系统的运行机制是怎样的&#xff…

uniapp 实时定位(高德、后台运行、支持息屏、坐标转换、距离计算) Ba-LocationAMap

简介&#xff08;下载地址&#xff09; Ba-LocationAMap 是一款基于高德的定位插件。支持实时定位、后台运行、息屏运行等&#xff1b;支持逆地理地址信息&#xff1b;支持坐标转换&#xff1b;支持坐标转换&#xff1b;支持距离计算&#xff1b;支持电池优化白名单。 本插件…

Pod容器

1、Pod基础概念Pod是kubernetes中最小的资源管理组件&#xff0c;Pod也是最小化运行容器化应用的资源对象。一个Pod代表着集群中运行的一个进程。kubernetes中其他大多数组件都是围绕着Pod来进行支撑和扩展Pod功能的&#xff0c;例如&#xff0c;用于管理Pod运行的StatefulSet和…

如何在jmeter中把响应中的数据提取出来并引用

jmeter做接口测试过程中&#xff0c;经常遇到请求需要用到token的时候&#xff0c;我们可以把返回token的接口用后置处理器提取出来&#xff0c;但是在这种情况下&#xff0c;只能适用于当前的线程组&#xff0c;其他线程组无法引用到提取的token变量值&#xff0c;所以必须要生…

数据库三大范式

目录 1.什么是范式 2.为什么使用范式 3.数据库范式类型 4.第一范式 5.第二范式 6.第三范式 1.什么是范式 一些约束、规范、规则 来优化数据库表的设计和存储&#xff0c;这些规则就称为范式。 2.为什么使用范式 遵从不同的规范要求&#xff0c;设计出合理的关系型数据库…

vue中go.js的使用教学(三:创建零部件)

目录 1.介绍 2.创建零部件 一.复杂版 二.简洁版 a.(小复杂版)重写上方复杂版代码&#xff1a; b.&#xff08;优化版&#xff09;重写上方小复杂版 c.这边在加一个扩展&#xff08;GraphObject.make 构建一个 Brush&#xff09; 1.介绍 这边的零部件&#xff0c;指的是每…

破解遗留系统快速重构的5步心法(附实例)

前两天和一个架构师朋友闲聊&#xff0c;说到了 「重构」 这个话题&#xff0c;他们公司早年间上线的项目系统&#xff0c;因一直没专人在演进过程中为代码质量负责&#xff0c;导致现在代码越来越混乱&#xff0c;逐渐堆积成“屎山”&#xff0c;目前的维护成本已远高于重新开…

#贴改色膜前,你必须要知道的事情

关于汽车改色&#xff0c;大多数人都会觉得简单的改个颜色&#xff0c;只是上一层膜而已。但是事实不是这样&#xff0c;改色膜真的不只是看价格和颜色这么简单。最近也有车主来吐槽自己踩过的坑&#xff0c;这篇给大家科普一下&#xff0c;怎么才能避坑&#xff01;一&#xf…

Python os和sys模块

一、os模块 os 模块是 Python中的一个内置模块&#xff0c;也是 Python中整理文件和目录最为常用的模块。 该模块提供了非常丰富的方法用来处理文件和目录。比如&#xff1a;显示当前目录下所有文件/删除某个文件/获取文件大小 1、获取当前的工作路径 在 Python 中&#xff0…

传统巨头生“变”,中国毫米波雷达市场战火再升级

进入2023年&#xff0c;中国车载毫米波雷达市场战火明显升级。 一方面&#xff0c;愈演愈烈的份额抢夺战不仅仅存在于几大传统巨头之间&#xff0c;也快速转移到与国产供应商之间&#xff1b;随着部分外资巨头的本土化战略深入落地&#xff0c;同时对国产供应商造成了压力。 …

多层感知机的区间随机初始化方法

摘要&#xff1a; 训练是构建神经网络模型的一个关键环节&#xff0c;该过程对网络中的参数不断进行微调&#xff0c;优化模型在训练数据集上的损失函数。参数初始化是训练之前的一个重要步骤&#xff0c;决定了训练过程的起点&#xff0c;对模型训练的收敛速度和收敛结果有重要…

mysql -学习总结

mysql 详解1、mysql特点2、事务2.1 事务的四大特性 – ACID2.2 并发事务问题2.3 事务的四大隔离级别2.4 事务隔离级别操作sql2.5 事务原理 – LBCC MVCC2.4.1 行的隐藏列2.4.2 ReadView2.4.3 MVCC在四种隔离级别下的区别2.5 undo log、binlog、redo log2.5.1 Undo log2.5.2 bin…

【BCT_RFC 3927】IPv4 链路本地地址的动态配置

本文件规定了一个因特网标准跟踪协议互联网社区&#xff0c;并请求讨论和建议改进。请参考当前版本的“互联网标准化国家的官方协议标准”&#xff08;STD1&#xff09;和该协议的状态。 抽象的 要参与广域 IP 网络&#xff0c;主机需要为其接口配置 IP 地址&#xff0c;可以通…