elementui 实现树形控件单选

news2024/11/29 12:44:51

实现:

<!--
    @author: itmacy
    @desc: 树节点单选
-->
<template>
  <div class="about">
      <el-tree :data="data"
               ref="tree"
               :props="defaultProps"
               node-key="id"
               show-checkbox
               check-strictly
               @check-change="handleNodeClick"/>
  </div>
</template>
<script>
export default {
  data () {
    return {
      data: [{
        id: 1,
        label: '一级 1',
        children: [{
          id: 11,
          label: '二级 1-1',
          children: [{
            id: 111,
            label: '三级 1-1-1'
          }]
        }]
      }, {
        id: 2,
        label: '一级 2',
        children: [{
          id: 21,
          label: '二级 2-1',
          children: [{
            id: 222,
            label: '三级 2-1-1'
          }]
        }, {
          id: 22,
          label: '二级 2-2',
          children: [{
            id: 221,
            label: '三级 2-2-1'
          }]
        }]
      }, {
        id: 3,
        label: '一级 3',
        children: [{
          id: 31,
          label: '二级 3-1',
          children: [{
            id: 311,
            label: '三级 3-1-1'
          }]
        }, {
          id: 32,
          label: '二级 3-2',
          children: [{
            id: 321,
            label: '三级 3-2-1'
          }]
        }]
      }],
      defaultProps: {
        children: 'children',
        label: 'label'
      },
      selectNode: {} // 选中的节点
    }
  },
  methods: {
    handleNodeClick (data, checked) {
      if (checked) {
        this.$refs.tree.setCheckedNodes([data])
        this.selectNode = data
      }
    }
  }
}
</script>


效果:

在这里插入图片描述

小结:

在标签中需要设置: show-checkbox(支持选框)、 check-strictly(勾选时子父节点不关联)
在使用事件@check-change,通过第二个参数checked来判断是否勾选,当checkedtrue时,通过方法setCheckedNodes([])来设置勾选的节点
原文链接:https://blog.csdn.net/itmacy/article/details/124817295

问题:

在这里插入图片描述
这是emelemtui官网说的,说第一个参数是勾选节点的key的数组,导致我写的时候传递的是勾选的节点的key的数组,一直没有效果,后面第一个参数改成勾选的节点的对象才成功,离谱
错误示范:
在这里插入图片描述
正确写法:
在这里插入图片描述
未整理参考添加链接描述

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

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

相关文章

2-10岁女童冬季穿搭怎么选?麻麻们看这里

分享适合女宝的羽绒服穿搭 这种黄色真的超好看 吸睛显白怎么穿都好看 长款连帽设计&#xff0c;精致走线 冬天穿时尚又好看&#xff01;&#xff01;

某个订单项目记录,涉及MQ消息处理、分布式问题、幂等性等问题解决设计

文章目录 消息队列&#xff08;Message Queue&#xff09;什么场景下&#xff0c;使用消息队列&#xff1f;消息队列 概述 RabbitMQ 消息队列RabbitMQ 概念名词 概念RabbitMQ 流程 RabbitMQ 安装RabbitMQ 页面介绍Exchange 交换机类型Spring Boot 整合RabbitMQAmqpAdmin 与 Rab…

Angular 由一个bug说起之二:trackBy的一点注意事项

trackBy是angualr优化项目性能的一种方法, 通过返回一个具有绑定性的唯一值, 比如id&#xff0c;手机号&#xff0c;身份证号之类的&#xff0c;来让angular能够跟踪数组的项目&#xff0c;根据数据的变化来重新生成DOM, 这样就节约了性能。 但是如果是使用ngFor循环组件&…

分享好用的浏览器内截图和滚动截图扩展

一、先打开浏览器安装好这个扩展 我已经安装过了 二、使用方式 单击就行了&#xff0c;如果页面很长&#xff0c;那么会自动滚动截屏。 截图完成后&#xff0c;如图 右上角是一排操作按钮&#xff0c;有删除、下载(pdf和png)、编辑。不过编辑过的图片下载是要开会员的。直接…

为什么小型企业应该拥抱数字化转型?

在当今飞速发展的商业环境中&#xff0c;数字化转型已经成为各种规模组织的必然选择。特别是小型企业&#xff0c;通过数字化转型&#xff0c;可以在保持竞争力、提高运营效率并开启新的增长机会方面获益匪浅。本文探讨了数字化转型的概念&#xff0c;强调了它对小型企业的重要…

【智能家居项目】FreeRTOS版本——将裸机程序改造成FreeRTOS程序 | DHT11温湿度传感器

&#x1f431;作者&#xff1a;一只大喵咪1201 &#x1f431;专栏&#xff1a;《智能家居项目》 &#x1f525;格言&#xff1a;你只管努力&#xff0c;剩下的交给时间&#xff01; 如上图所示是裸机版本的智能家居项目总体框架结构&#xff0c;这篇文章开始&#xff0c;本喵要…

OpenAI 的 CEO Sam Altman :OpenAI 正在研发下一代 AI 模型 GPT-5 但没有承诺发布时间

本心、输入输出、结果 文章目录 OpenAI 的 CEO Sam Altman :OpenAI 正在研发下一代 AI 模型 GPT-5 但没有承诺发布时间前言Sam Altman 接受《金融时报》的采访 消息汇总GPT-4 turboOpenAI 目标 AGI (通用人工智能)弘扬爱国精神OpenAI 的 CEO Sam Altman :OpenAI 正在研发下…

RS485接线方式

用2个触点连接RS485设备——RS485引脚半双工分配&#xff1a; 用4个触点连接RS485设备——RS485引脚全双工分配&#xff1a; 参考文章&#xff1a;RS485引脚说明及接口说明 文章目录 RS485 接线方式引言RS485通信标准简介基本特性差分信号&#xff1a;RS485使用差分信号传输&am…

怎样备份电脑文件比较安全

域智盾软件是一款功能强大的电脑监控软件&#xff0c;它不仅具备实时屏幕监控、行为审计等功能&#xff0c;还能够对电脑文件进行备份和管理。下面将介绍域智盾软件如何备份电脑文件&#xff0c;以确保数据安全。 1、开启文档备份功能 部署后台&#xff0c;然后点击文档安全&a…

前后端分离项目在Linux的部署方法、一台Nginx如何部署多个Web应用

需求场景:目前有三个前后端分离项目(vue+springboot),Linux服务器一台,nginx一个,比如服务器地址为www.xxxxxxx.com 我想通过80端口访问服务①(即访问www.xxxxxxx.com);通过81端口访问服务②(即www.xxxxxxx.com:81);通过82端口访问服务③(即www.xxxxxxx.com:82) ①部…

「软件设计」权威领域驱动设计(DDD)简介

「软件设计」权威领域驱动设计(DDD)简介 今天的企业应用程序无疑是复杂的&#xff0c;并依赖一些专门技术&#xff08;持久性&#xff0c;AJAX&#xff0c;Web服务等&#xff09;来完成它们的工作。作为开发人员&#xff0c;我们倾向于关注这些技术细节是可以理解的。但事实是…

MatrixOne 支持多样化生态工具,持续提升开发者体验

概述 在选择一款数据库产品时&#xff0c;对数据库上下游生态组件的打通是大数据开发工程师需要面对的一致难题。 MatrixOne提出了“One Size Fits Most”理念&#xff0c;旨在用全新HSTAP技术架构打破数据孤岛&#xff0c;其中&#xff0c;与各生态组件的“无缝衔接”也是Ma…

用哈希表封装unordered_map(以及set)【C++】

目录 一&#xff0c;前言 二&#xff0c;封装层框架&#xff08;哈希底层以哈希桶为例&#xff09; 三&#xff0c;迭代器 1. operator 2. operator[] 3. 仿函数优化 3. 解决unordered_set中Key可以修改的Bug 代码区 Hash_map_set.h HashTable.h 下节预告&#xff1…

Notion汉化

Notion真无语&#xff0c;汉化版都没有。真的无力吐槽。 2023.11.7汉化经历 教程链接&#xff1a;github Reamd7/notion-zh_CN at 2.4.20-handmade (github.com) 网页版&#xff1a; 油猴下载插件。 Notion中文汉化 浏览器插件下载 windows&#xff1a; github realse 这…

Ubuntu22.04 部署Mqtt服务器

1、打开Download EMQX 下载mqtt服务器版本 2、Download the EMQX repository curl -s https://assets.emqx.com/scripts/install-emqx-deb.sh | sudo bash 3.Install EMQX sudo apt-get install emqx 4.Run EMQX sudo systemctl start emqx

Js:获取最近6个月的月份(包含本月、不包含本月)

一、需求 获取最近6个月的月份&#xff08;不包含本月&#xff09;&#xff0c;比如现在是11月份&#xff0c;则需要获取到的月份是&#xff1a;10、9、8、7、6、5将月份从小到大排列 二、解决 1、获取最近的6个月份&#xff08;不包含本月&#xff09; var monthALL[]; …

在3+1的方向上展开结构加法4a3+4a14

4a3 4a14 - - 1 - - - - - - - - - - - - - 1 1 1 - 1 1 - 1 - - 1 - - - 要求得到的图片只能有4个点&#xff0c;并且需要最大限度的保留4a3和4a14两张图片的内在结构特征。 4个点的结构总可以认为是3个点的结构1合成的 - - 1 - - …

Java内存模型(JMM) ----多线程/并发编程

在介绍 Java 内存模型之前&#xff0c;先来看一下到底什么是计算机内存模型。 计算机结构简介 冯诺依曼&#xff0c;提出计算机由五大组成部分&#xff0c;输入设备&#xff0c;输出设备存储器&#xff0c;控制器&#xff0c;运算器 CPU 中央处理器&#xff0c;是计算机的…

完整时间线!李开复Yi大模型套壳争议;第二届AI故事大赛;AI算命GPTs;LLM应用全栈开发笔记;GPT-5提上日程 | ShowMeAI日报

&#x1f440;日报&周刊合集 | &#x1f3a1;生产力工具与行业应用大全 | &#x1f9e1; 点赞关注评论拜托啦&#xff01; &#x1f440; 李开复「零一万物」大模型陷套壳争议&#xff0c;事件时间线完整梳理 https://huggingface.co/01-ai/Yi-34B/discussions/11#65531458…

2022CCPC绵阳 ACGHM

Dashboard - 2022 China Collegiate Programming Contest (CCPC) Mianyang Onsite - Codeforces C.Catch You Catch Me 题意 思路 首先注意到贡献可以按深度统计&#xff0c;对于每个深度dep&#xff0c;贡献是在dep深度中属于的子树种类数&#xff0c;如果在该深度中子树存在…