elementui 实现树形控件单选

实现:

<!--
    @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

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

解决SSH连接自动断开的问题

一、环境 centos7.6 xshell7 二、目标 ssh长联状态&#xff0c;不主动断开 三、实施 1.修改/etc/profile文件 末尾添加export TMOUT0 vim /etc/profileexport TMOUT02.修改/etc/ssh/sshd_config文件 默认都被注释掉&#xff0c;放开并设置CAI参数为0-60间 vim /etc…

Python中表格插件Tabulate的用法

目录 一、引言 二、Tabulate插件安装与导入 三、Tabulate基本用法 1、创建表格&#xff1a; 2. 格式化表格&#xff1a; 3. 表格转置&#xff1a; 4、合并单元格&#xff1a; 5、指定每列的格式&#xff1a; 6、指定每行的格式&#xff1a; 7、使用自定义表格格式&am…

kubernetes学习笔记-概念

参考&#xff1a;https://kubernetes.io/zh-cn/docs/concepts/overview/ 概述 Kubernetes 是一个可移植、可扩展的开源平台&#xff0c;用于管理容器化的工作负载和服务&#xff0c;可促进声明式配置和自动化。 Kubernetes 拥有一个庞大且快速增长的生态&#xff0c;其服务、…

观测云产品更新 | 监控、图表、服务管理、单点登录、Pipeline 等优化

观测云更新 监控相关的若干使用优化 1.【告警沉默】功能回归&#xff0c;您仍可以通过告警沉默配置定义重复告警通知的时间间隔。 2.【监控器】删除 ”紧急“、”重要“、”警告“触发条件必须配置任意一项的限制&#xff0c;您可任意配置”紧急“、”重要“、”警告“、”无…

实时云渲染与带宽探讨:解密数字新基建中的网络技术

随着“数字新基建”和5G技术的蓬勃发展&#xff0c;数字孪生、智慧工厂、智慧城市、虚拟仿真教学等领域正经历着迅速的技术进步。部署方案也由最初的本地部署&#xff0c;发展到webGL本地网络方式再到最新的实时云渲染技术。本文将深入探讨实时云渲染技术方案对于带宽的要求条件…

【用unity实现100个游戏之15】开发一个类保卫萝卜的Unity2D塔防游戏4(附项目源码)

文章目录 先看本次实现的最终效果前言把敌人和炮塔全部配置成预制体炮塔商店打开商店放置炮塔升级炮塔出售显示炮塔攻击范围显示玩家金额和血量关闭升级面板和商店功能源码完结 先看本次实现的最终效果 前言 本期紧接着上一篇&#xff0c;本期主要内容是实现商店、购买、出售、…

Python学习笔记--自定义元类

四、自定义元类 到现在&#xff0c;我们已经知道元类是什么鬼东西了。 那么&#xff0c;从始至终我们还不知道元类到底有啥用。 只是了解了一下元类。 在了解它有啥用的时候&#xff0c;我们先来了解下怎么自定义元类。 因为只有了解了怎么自定义才能更好的理解它的作用。…

《向量数据库指南》——2023云栖大会现场,向量数据库Milvus Cloud成关注焦点

近期,广受关注的2023 云栖大会正式收官,来自全球各地的开发者集聚一堂,共同探索 AI 时代的更多可能性。 云栖大会是由阿里巴巴集团主办的科技盛宴,是中国最早的开发者创新展示平台。据悉,今年云栖大会的主题为“计算,为了无法计算的价值”,共吸引了全球 44 个国家和地区…

【MySQL8】1130 - Host *** is not allowed to connect to this MySOL server

问题描述 使用 Navicat 连接 MySQL8 报错&#xff1a; 1130 - Host *** is not allowed to connect to this MySOL server解决方案 use mysql;select host ,user from user; -- 将 root 用户的主机&#xff08;host&#xff09;值修改为 %&#xff0c;即允许从任何主机连接 …

进阶JAVA篇- Lambda 表达式与 Lambda 表达式的省略规则

目录 1.0 什么是 Lambda 表达式&#xff1f; 1.1 既然跟匿名内部类相关&#xff0c;先来回顾匿名内部类。 1.2 Lambda 表达式与匿名内部类之间的关系。 1.3 函数式接口 1.4 在具体代码中来操作一下 2.0 Lambda 表达式省略规则 1.0 什么是 Lambda 表达式&#xff1f; Lambda 表达…

SQL server从安装到入门(一)

文章目录 彻底安装怎么安装&#xff1f;Polybase要求安装orcale jre 7更新 51或更高版本&#xff1f;安装完怎么配置&#xff1f;没有SSMS&#xff1f; 熟悉一下SMSS&#xff01; 根据本人实际安装和初步使用SQL server的过程中&#xff0c;经历的一些关键性的步骤和精品文章。…

【volatality 3】使用说明文档

由于volatility2.6 和3.0 版本之间略有差异,所以特写本文档用来学习参考。 在vol3 中不需要指定profile,而是在命令中指定系统。 如windows.info、Windows.pslist 使用示例 文档说明 本文作者:SwBack 创作时间:‎2022‎年‎6‎月‎14‎日&#xff0c;‏‎15:47:05 知乎:https…

OPPO发布AndesGPT大模型;Emu Video和Emu Edit的新突破

&#x1f989; AI新闻 &#x1f680; OPPO发布全新ColorOS 14及自主训练的AndesGPT大模型 摘要&#xff1a;OPPO在2023 OPPO开发者大会上发布了全新的ColorOS 14&#xff0c;并正式推出了自主训练的安第斯大模型&#xff08;AndesGPT&#xff09;。AndesGPT拥有对话增强、个人…

集合贴——智能客服是什么

基础课1——智能客服的定义-CSDN博客文章浏览阅读166次。智能客服是一种采用人工智能技术的客户服务方式&#xff0c;它通过语音识别、自然语言处理、语义理解等技术&#xff0c;实现了与客户的自动交互。https://blog.csdn.net/2202_75469062/article/details/134406392?spm1…

为什么选择CodeEase?

目录 为什么选择CodeEase核心功能后端前端 框架结构总结 为什么选择CodeEase CodeEase是一个标准化的低代码平台 愿景 我们励志开发一站式服务&#xff0c;缩短网站开发周期&#xff0c;降低程序bug率&#xff0c;减少开发人力和成本&#xff0c;推出了多租户SaaS平台开发模板…

unity中的模型坐标系与3dmax导出的模型坐标系不一致的解决方案

unity中的模型坐标系与3dmax导出的模型坐标系不一致的解决方案 unity是左手坐标系&#xff0c;3dmax为右手坐标系 需要在3dmax中修改坐标系 顶视图中改成&#xff1a;X轴&#xff08;红色&#xff09;向右&#xff1a; Y轴&#xff08;蓝色&#xff09;朝向自己: Z轴&#xff…

码住!听我说护眼台灯这样选!

台灯的显色指数是其非常重要的指标&#xff0c;它可以表示灯光照射到物体身上&#xff0c;物体颜色的真实程度&#xff0c;一般用平均显色指数Ra来表示&#xff0c;Ra值越高&#xff0c;灯光显色能力越强。常见的台灯显色指数最低要求一般是在Ra80以上即可&#xff0c;比较好的…

机械人必须要了解的丝杆螺母参数

丝杆螺母是机械中重要的零部件之一&#xff0c;主要用于将旋转运动转化为直线运动&#xff0c;或者将直线运动转化为旋转运动。只有正确了解丝杆螺母的参数&#xff0c;才能进行选型。 1、螺纹规格&#xff1a;丝杆螺母的螺纹规格是按照国家标准进行分类的&#xff0c;常见的有…

CleanMyMac X2024免费苹果笔记本清理内存清理工具

CleanMyMac X的优点包括&#xff1a; 全面的系统清理&#xff1a;CleanMyMac X可以扫描和清理系统中的垃圾文件、缓存文件、无用的语言文件、残留文件等&#xff0c;从而释放磁盘空间&#xff0c;提高系统性能。 优化工具&#xff1a;该软件还提供了一系列优化工具&#xff0c…

Linux下好玩有趣的指令(持续更新)

适用于centOS下&#xff0c;别的Linux换个指令就行&#xff0c;内容是一样的 centOS有的指令安装不了&#xff1f;试试拓展yum源&#xff0c;再安装基本就OK啦&#xff01; yum install -y epel-release 下面是作者在centOS环境下亲测可以使用的&#xff0c;如果你是root用户直…