el-tree 实现单选功能

vue2 Elementui 树形组件怎么实现多选并获取选中节点的node对象 树形组件常用的方法及怎么实现多选并获取选中节点的node对象 阅读详情
AI摘要

本文介绍了如何在Element UI的el-tree组件中,利用check事件配合setCheckedKeys方法,实现树形结构的单选功能。通过示例代码展示了如何在选中多个节点时,确保只有一个节点被选中。

el-tree是不支持单选的,可以通过选中事件进行处理,实现单选

主要思路:

1,check 事件 共两个参数,依次为:传递给 data 属性的数组中该节点所对应的对象、树目前的选中状态对象。

2,判断选中的对象大于1时,调用使用setCheckedKeys方法,选中当前节点。

代码如下:

<el-tree  lazy 
    :load="loadNodeTreeMyself" 
    :props="defaultProps"
    :show-checkbox="true" //显示选择框
    :check-on-click-node="true" //点击节点的时候选中节点
    :check-strictly="true" //在显示复选框的情况下,严格的遵循父子不互相关联的做法
     node-key="PHY_ID" 
    @check="treeCheck" //选中后事件,在此事件中实现单选
    ref="treeForm">
</el-tree>
treeCheck:function(node,list){
     //node 该节点所对应的对象、list 树目前的选中状态对象
     //选中事件在选中后执行,当lis中有两个选中时,使用setCheckedKeys方法,选中一个节点
      if (list.checkedKeys.length == 2) {
            //单选实现
            this.$refs.treeForm.setCheckedKeys([node.PHY_ID]);
     }
}

示例:

 

el-tree实现只显示某一级复选框且单选 其实这个东西做出来之后,还是蛮简单的啦。 先说一下实现的思路: 只显示某一级复选框:el-tree中提供了disabled属性,当咱们给某一个节点设置了disabled属性后,那么当前节点就禁用了,所以咱们找到添加disabled的节点复选框的类名,通过display:none隐藏掉就好了,这里我都已经找好了,贴在下面。 单选:大家都知道复选框都是多选的,但是需求总是不尽人意,非得单选才行呢,其实也不难。大家在选中之后,拿到当前选中的节点对象,然后重新设置下选中的节点(只设置当前选中的节点,即单选. 阅读详情

相关推荐

STM32F103C8T6 驱动2位共阳数码管(基于 74HC595 和 PNP 三极管)

整体设计思路是通过 STM32F103C8T6 控制 74HC595 和 PNP 三极管,实现共阳数码管的显示功能。最初的电路设计中,三极管发射极接 5V 电源,这导致了数码管两位显示相同数字的问题。数码管能够稳定显示 0-99的数字。

qq_40289410的博客 2214

el-tree实现单选

实现之后的单选效果图: 下面贴代码: 结构: <el-input placeholder="输入关键字进行过滤" v-model="filterText"> </el-input> <el-tree class="filter-tree" :data="treeObj.optionList" :props="defaultProps" node-key="value" :check-strictly="true" default-expand

luoteen的博客 4965

OCEAN 电路仿真

介绍利用 Cadence OCEAN 进行电路脚本仿真的方法

weixin_43249158的博客 4405

el-tree的实现叶子节点单选

Vue实现el-tree叶子节点单选

qq_50661854的博客 5587

揭秘大型语言模型:从神经元到思维透明的奇妙旅程

这篇博客带你走进大型语言模型的内部世界,从神经元的小任务,到功能向量的团队合作,再到层间的协作和思维的透明化。掌握这些知识,能让你在开发中更高效地优化AI,在研究中更深入地探索模型的奥秘。建议多动手实践,把这些理论变成自己的能力!

数据与算法架构提升之路专栏 1521

KIBANA可视化管理界面说明

更说明转自https://blog.csdn.net/IT_ZRS/article/details/125496588 1 主要结构功能 使用浏览器访问 ip:5601 默认端口,进入首页 Discover:日志管理视图 主要进行搜索和查询 Visualize:统计视图 构建可视化的图表 Dashboard:仪表视图 将构建的图表组合形成图表盘 Timelion:时间轴视图 随着时间流逝的数据 APM:性能管理视图 应用程序的性能管理系统 Canvas:大屏展示

tian830937的专栏 7086

Vue3问题:如何实现el-tree树的单选?

使用el-tree组件,渲染树状数据。 要求默认全部展开、不显示复选框、支持单选、以及点击父级节点时不折叠子节点。 当然,还有个小细节就是,点击当前节点要高亮显示。

专注于前后端技术知识分享。 5825

FPGA实现Gardner环定时同步:Verilog代码与Testbench实战解析

本文深入解析了在FPGA上实现Gardner环定时同步的完整过程,详细阐述了其非数据辅助的定时误差检测原理。通过Verilog代码实战,展示了内插滤波器、定时误差检测器、环路滤波器和数控振荡器等核心模块的设计,并提供了完整的Testbench验证方法,帮助开发者解决数字通信系统中的时钟同步难题。

gpt4scribbler的博客 581

ElementUI el-tree实现单选功能

ElementUI el-tree实现单选功能

d305199的博客 2893

Qwen-Image-2.1本地图像生成整合包:8G显存一键部署指南

文生图模型是AI视觉创作的核心技术,其本地化部署需兼顾模型能力、硬件适配与工程易用性。Qwen-Image-2.1作为支持文本生成、图像编辑与多图参考的统一架构模型,突破了传统Diffusion模型在消费级显卡上的运行瓶颈。通过AWQ量化、vLLM推理优化与ComfyUI节点重构,实现8G显存稳定运行,显著降低CUDA环境配置复杂度。该方案面向设计师、教师与普通用户,提供开箱即用的本地AI图像工作流,适用于电商主图迭代、教学配图生成与IP角色延展等真实场景,让高质量图像生成真正走出云端,落地桌面。

weixin_29082143的博客 401

【异常】 OpenClaw 超长入参报错排查与解决方案 [错误]: 400 <400> InternalError.Algo.InvalidParameter: Range of input leng

摘要: OpenClaw服务调用出现400 InvalidParameter报错,核心原因为输入内容长度超出1-129024字符限制。解决方案包括:1)紧急精简冗余入参;2)标准分块处理长文本;3)客户端增加预校验模块;4)长期可申请调整服务规格。该错误属于客户端参数校验异常,通过合理控制输入长度或分批次处理即可解决,重点需保证语义完整性。建议优先采用自动化预校验机制,从源头预防问题发生。(149字)

奶爸的编程之路,也就一周冷个三天 1992

element UI 中的 el-tree 实现 checkbox 单选框功能,及 bus 传递参数的方法

element UI 中的 el-tree 实现 checkbox 单选框功能,及 bus 传递参数的方法

weixin_49934623的博客 3791

高精度地图数据的结构

本文是个人在学习高精度地图数据结构的心得,主要是描述高精度地图的几层数据结构以及元数据信息。

qq_40664711的博客 5575

el-tree实现单选功能

关键配置 : data 树形结构的数据 show-checkbox 显示复选框 ref 可以this.$refs.tree拿到此控件 node-key 给节点的编号 check-stricty 父、子节点之间没有关联【不写这个,选了父节点,会默认选择全部的子节点】 check 复选框选择、取消选择时触发的事件 <el-tree ref="tree" @check="handleCheck" :data="treeData" node-key="id"

Hay-Zero的博客 3242

IEM模型,地表粗糙度模拟

利用微波反演土壤水分时候,利用IEM模型可以实现对随机地表的模拟

C# WinForm 基于DirectShow.dll编写的程序,可边预览边保存视频,音频和图片

基于微软的DirectShow.dll的二次开发1.自动识别连接的摄像头跟麦克风且可以对其进行选择(默认选中第一个)2.可录制wmv和avi两种格式的视频并且都带有音频,avi可以录制的分辨率和帧数进行选择,wmv默认进行了淸晰度优化如不喜欢可去除代码中有相关提示3.可在预览点开之后进行拍照,也可边录制视频边拍照4.添加了视频和音频的压缩功能(酌情使用)这次二次开发发现C#对DirectShow的相关信息太少,这次做完也不敢藏私共享出来,还望大家指正

element-ui的el-tree组件实现单选功能及选择子节点,获取所有父级节点或选中所有父级节点

element-ui的el-tree组件实现单选功能及选择子节点,获取所有父级节点或选中所有父级节点

我总是词不达意的博客 1万+

LinePhone3.2.7(android端最新版本) sip客户端

SIP客户端For android:LinePhone3.2.7(最新版本),官网地址:http://www.linphone.org/

vue3+element-ui-plus的el-tree组件实现复选框形式下的单选功能,且禁用父级

只要给对应的节点添加字段"disabled": true,即可禁用节点,因为使用了check-strictly取消父子节点关联,所有即使禁用父节点,也不会影响子节点的选择。实现效果图,一二级都是灰色的不可选,三级只能同时选中一个。

青莳的博客 2580

jre9下载 jdk9

(Java SE Runtime Environment 9.0) 9.0u175 官方最新版 【x86|x64】

Element plus el-tree 实现选择框单选、根节点不可选的功能代码

el-tree 实现选择框单选、根节点不可选的功能

weixin_47772411的博客 2773

el-tree树形列表实现单选效果

今天开发的时候遇到了这样一个业务需求:页面中有一个表示不同公司部门下的员工的树形列表,要求选择员工后录入表单主要负责人字段,因此需要实现el-tree的单选效果,但是el-tree自身并没有直接支持单选的属性,查阅了文档和其他博客后我找到了解决方法。

omroji的博客 2138

vue中el-tree实现单选复选框

vue中el-tree实现单选复选框 遇到的问题 使用vue的element框架时el-tree时,当填入复选框时,不能单选父节点 解决办法 结合el-tree属性的控制和js配合来实现单选父子节点 去掉父子节点的关联 监听checkbox改变事件,从而控制只选择一个节点 最后的效果 效果 控件关键代码 el-tree控件   &lt;el-tree :...

菜鸟零号 kungfu~peng 1万+

Vue el-tree 如何实现单选

Vue el-tree 如何实现单选 最近项目用到el-tree,并且需要实现单选,搜了很多文章并研究了一下,实现代码如下,希望可以对你有帮助! <el-tree class="tree-tap" :data="deaplist" show-checkbox node-key="deptid" ref="treeForm" :check-on-click-node="true"

a85093541的博客 9340

elementUI中el-tree组件单选没有复选框时,选中、current-node-key高亮、刷新后保留展开状态功能的实现

elementUI中el-tree组件单选没有复选框时,选中、current-node-key高亮、刷新后保留展开状态功能的实现

weixin_41549971的博客 2914

Element-UI 的树列表实现单选

1. Element-UI 的 el-tree 组件当设置了 show-checkbox 属性以后,默认是只能多选的,如果我们想要将其改选为单选,就要进行一些特殊的处理,首先看效果图。 2. 组件代码(只列出el-tree组件相关的代码) ... <el-tree class="filter-tree" :data="temp3Msg.currentCourseList" :p...

weixin_30369041的博客 362

element ui 中 el-tree 实现懒加载

element ui 中 el-tree 实现懒加载

weixin_49934623的博客 5320
上一篇: Vue中index.html、main.js、App.vue,之间关系
下一篇: 多线程实现数据共享
一地红尘
博客等级 码龄12年 4粉丝 9原创
评论 3
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付:10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值