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

news2024/11/19 6:25:51

前端功能问题系列文章,点击上方合集↑

序言

大家好,我是大澈!

本文约1400+字,整篇阅读大约需要3分钟。

本文主要内容分三部分,第一部分是需求分析,第二部分是实现步骤,第三部分是问题详解。

如果您只需要解决问题,请阅读第一、二部分即可。

如果您有更多时间,进一步学习问题相关知识点,请阅读至第三部分。

1. 需求分析

使用el-tree组件,渲染树状数据。

要求默认全部展开、不显示复选框、支持单选、以及点击父级节点时不折叠子节点。

当然,还有个小细节就是,点击当前节点要高亮显示。

用过el-tree组件的朋友,肯定清楚,el-tree默认只支持多选。而且,除了支持单选,其它需求都可以使用现成的配置属性来实现。

那么问题来了,如何实现单选呢?

图片

2. 实现步骤

2.1 先把全部代码先放上

模版代码:

<template>
  <!-- 树 -->
  <el-tree
    style="min-width: 230px"
    v-loading="treeDataListLoading"
    class="treeStyle"
    :check-on-click-node="true"
    :highlight-current="true"
    :default-expand-all="true"
    :data="treeData"
    :props="treeDefaultProps"
    node-key="id"
    :show-checkbox="false"
    :check-strictly="true"
    @check="handleTreeNodeClick"
    ref="selectTree"
    :expand-on-click-node="false"
  />
</template>

逻辑代码:

<script setup>
// 树数据
const treeData = reactive([])
// 树配置项
const treeDefaultProps = {
  children: "children",
  label: "permissionName"
};

// 树ref
const selectTree = ref();
// 树节点选中事件
const handleTreeNodeClick = (data, checkObj) => {
  // 共两个参数,依次为:传递给 data 属性的数组中该节点所对应的对象、树目前的选中状态对象
  // 树目前的选中状态对象,包含 checkedNodes、checkedKeys、halfCheckedNodes、halfCheckedKeys 四个属性
  if (checkObj.checkedKeys.length != 0) {
    if (checkObj.checkedKeys.length == 2) {
      // 如果选择超过一个节点,则只保留最后一个节点
      //单选实现
      selectTree.value.setCheckedKeys([data.id]);
    }
  }
};
</script>

2.2 然后分析代码

对这些配置属性特别了解的朋友,就当复习一遍了。

  • 先说单选的实现:

先配置node-key属性,每个树节点的唯一标识,必须设置。

然后设置check-strictly属性,父子节点选中是否不关联。默认是false,设置为true时为父子节点选中不关联。

再获取一个el-tree树的ref实例,用来对组件进行操作。

再设置@check事件,在选中节点之后触发的回调。此处注意区分使用@check-change事件,两者的回调参数是不同的。@check事件共两个参数,依次为:传递给 data 属性的数组中该节点所对应的数据对象、树目前的选中状态对象。其中,树目前的选中状态对象,包含 checkedNodescheckedKeyshalfCheckedNodeshalfCheckedKeys 四个属性。

最后在@check事件回调中,判断一下参数树选中状态对象checkObj的长度。如果选择超过一个节点,则通过树ref实例的setCheckedKeys方法,将参数树选中数据对象dataid,每一次都覆盖上一次选中的id,然后以数字形式传到setCheckedKeys方法中,如此实现只保留最后一个节点。

  • 默认全部展开:

使用了default-expand-all属性。

设置为true展开全部节点,设置为false不展开全部节点。默认是false不展开。

  • 不显示复选框:

使用了show-checkbox属性 + check-on-click-node属性。

show-checkbox属性,设置为true显示复选框,设置为false不显示复选框。默认是false不显示。

check-on-click-node属性,是否在点击节点的时候选中节点。默认值为 false,即只有在点击复选框时才会选中节点。

  • 点击父级节点时不折叠子节点:

使用了expand-on-click-node属性。

是否在点击节点的时候展开或者收缩节点。 默认值为 true,如果为 false,则只有点箭头图标的时候才会展开或者收缩节点。

点击当前节点要高亮显示:

  • 使用了highlight-current属性。

是否高亮当前选中节点。默认值是 false,如果为true,则点击当前节点时高亮显示。

3. 问题详解

3.1 官方文档地址

为了朋友们阅读到此处时,方便查阅官方文档学习。

最后附上,el-tree组件Element官方文档地址:https://element-plus.org/zh-CN/component/tree.html#%E5%B1%9E%E6%80%A7

结语

建立这个平台的初衷:

  • 打造一个仅包含前端问题的问答平台,让大家高效搜索处理同样问题。

  • 通过不断积累问题,一起练习逻辑思维,并顺便学习相关的知识点。

  • 遇到难题,遇到有共鸣的问题,一起讨论,一起沉淀,一起成长。

感谢关注微信公众号:“程序员大澈”,然后加入问答群,让我们一起解决实现所有BUG!

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

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

相关文章

springboot+activiti5.22.0集成Activiti在线流程设计器

SpringBoot集成Activiti5.22在线流程设计器 文章目录 SpringBoot集成Activiti5.22在线流程设计器&#x1f4dd;1.增加配置pom依赖 增加数据库及redis配置文件&#x1f4dc; 2.启动类ActivitiDesignApplication排除安全校验注解启动项目后将会自动在数据库中生成表 &#x1f4d8…

MySQL 的执行原理(二)

5.3. MySQL 的查询成本 5.3. MySQL 的查询成本 MySQL 执行一个查询可以有不同的执行方案&#xff0c;它会选择其中成本最低&#xff0c;或者 说代价最低的那种方案去真正的执行查询。不过我们之前对成本的描述是非常模 糊的&#xff0c;其实在 MySQL 中一条查询语句的执行成本…

游戏数据分析必知必会

游戏的分类 按端分类&#xff1a;端游&#xff08;steam&#xff09;&#xff0c;页游&#xff08;4399&#xff09;&#xff0c;手游&#xff08;手机&#xff0c;pad&#xff09;按盈利模式分类&#xff1a;付费游戏&#xff08;一次买断&#xff0c;后续购买其它剧情或者包…

使用内网穿透解决支付宝回调地址在公网问题

使用natapp解决内网穿透问题 前言NATAPP使用购买隧道 支付宝回调地址测试之后的学习计划 前言 最近一个项目用到了支付宝&#xff0c;但是本地调试的时候发现支付宝的回调地址需要在公网上能够访问到。为了更加方便地调试&#xff0c;就使用了natapp内网穿透&#xff0c;将回调…

FPGA语法相关知识合集

一.相关概念 1.四种结构说明语句 2.initial 与 always 的异同点 3.task 与 function 的3个不同点 4.task的语法结构(定义及调用) 5.function的语法结构(定义及调用) 6.function 的一个必须有和一个必须没有&#xff0c;使用规则 7.自动&#xff08;递归&#xff09;函数…

Win11+Modelsim SE-64 10.6d搭建UVM环境

1、添加源文件及tb文件 在目录下建立文件夹&#xff0c;将DUT和Testbench添加进去&#xff0c;文件夹内容如下所示&#xff1a; 2、以《UVM实战》中的例子做简单的示例&#xff1a; 2.1 设计文件 &#xff1a;dut.sv 功能很简单&#xff0c;即将接受到的数据原封不动发送出去…

指针与多维数组练习

例题一&#xff1a; 矩阵相乘 首先&#xff0c;如果你没学过线代的话&#xff0c;这边建议你去B站把宋浩的矩阵运算学了再来看题 如果有个矩阵A和一个矩阵B&#xff0c;当A的列数和B的行数相同时&#xff0c;生成一个新矩阵C&#xff0c;且C是通过矩阵乘法得来的 A[3][2]{3…

画中画视频剪辑:批量制作画中画视频,让视频更具吸引力和创意

在今天的视频制作环境中&#xff0c;画中画视频剪辑技术已经成为了一种主流。它不仅能增加视频的视觉吸引力&#xff0c;也可以提升观看体验。画中画视频剪辑是一种制作多个视频画面的技术&#xff0c;它可以将两个或更多的视频画面融合在一起&#xff0c;形成一个全新的视频。…

关于卓越服务的调研报告

NetSuite知识会发起的本次调研从2023年11月2日开始&#xff0c;到11月12日结束。16日已向参与调研的朋友邮件回复&#xff0c;感谢您的付出&#xff01;今朝分享此报告&#xff0c;各位同学参考。 调研问题与反馈总结 问题1&#xff1a;您能想到哪些服务组织能够提供高满意度&…

GIS杂记(三):MaxEnt模型中的图像地理范围不匹配【全网最好的方法,没有之一】

图像地理范围不匹配问题解决方法 1. 问题描述2. 问题范例3. 问题解决4. 其他参考 1. 问题描述 一般在使用全国的的生物气候变量时&#xff0c;由于其地理范围一致&#xff0c;因此不会出现地理范围不匹配的问题。但是&#xff0c;当加入其他影响因子的时候&#xff0c;如海拔、…

vue之浏览器存储方法封装实例

我们在项目中通常会对缓存进行一些操作&#xff0c;为了便于全局调用&#xff0c;会对缓存的设置、获取及删除方法进行封装成一个工具类。 首先我们在src目录下创建一个plugins文件夹&#xff0c;在plugins下创建cache文件夹并创建index.js&#xff0c;代码如下&#xff1a; c…

Linux每日智囊-cat, more, less

每日分享三个Linux命令&#xff0c;悄悄培养读者的Linux技能。 cat 作用 在终端显示文件内容 cat命令允许创建单个或多个文件&#xff0c;查看文件的内容&#xff0c;连接文件并在终端或文件中重定向输出。 语法 cat [选项] 文件 参数&#xff1a; -n:显示行数&#xf…

Egress-TLS-Origination

目录 文章目录 目录本节实战1、出口网关TLS发起2、通过 egress 网关发起双向 TLS 连接关于我最后 本节实战 实战名称&#x1f6a9; 实战&#xff1a;Egress TLS Origination-2023.11.19(failed)&#x1f6a9; 实战&#xff1a;通过 egress 网关发起双向 TLS 连接-2023.11.19(测…

初级程序员如何进阶

作者简介&#xff1a;大家好&#xff0c;我是smart哥&#xff0c;前中兴通讯、美团架构师&#xff0c;现某互联网公司CTO 联系qq&#xff1a;184480602&#xff0c;加我进群&#xff0c;大家一起学习&#xff0c;一起进步&#xff0c;一起对抗互联网寒冬 疑问的无限递归 我刚入…

GMEL:基于地理上下文嵌入的OD流预测

1 文章信息 文章题为“Learning Geo-Contextual Embeddings for Commuting Flow Prediction”&#xff0c;是一篇发表于The Thirty-Seventh AAAI Conference on Artificial Intelligence (AAAI-20)的一篇论文。该论文主要针对交通中OD流预测任务&#xff0c;从地理上下文信息中…

聊聊近些年 CPU 在微架构、IO 速率上的演进过程

大家好&#xff0c;我是飞哥&#xff01; 在上一篇《深入了解 CPU 的型号、代际架构与微架构》 中我们介绍了我手头的一颗 Intel(R) Core(TM) i5 的型号规则&#xff0c;以及它的物理硬件的 Die 图结构。以及它对应的 Skylake 核的微架构实现。 不少同学开始问我其它型号的 CPU…

2023年【金属非金属矿山安全检查(地下矿山)】考试报名及金属非金属矿山安全检查(地下矿山)最新解析

题库来源&#xff1a;安全生产模拟考试一点通公众号小程序 金属非金属矿山安全检查&#xff08;地下矿山&#xff09;考试报名参考答案及金属非金属矿山安全检查&#xff08;地下矿山&#xff09;考试试题解析是安全生产模拟考试一点通题库老师及金属非金属矿山安全检查&#…

常见树种(贵州省):002杉类

摘要&#xff1a;本专栏树种介绍图片来源于PPBC中国植物图像库&#xff08;下附网址&#xff09;&#xff0c;本文整理仅做交流学习使用&#xff0c;同时便于查找&#xff0c;如有侵权请联系删除。 图片网址&#xff1a;PPBC中国植物图像库——最大的植物分类图片库 一、杉木 …

超详细vue3选项式父子组件传值

一、问题背景 最近遇到了一个情景&#xff1a; 子组件干完事情&#xff0c;需要对父组件的变量进行更新&#xff0c;因为父组件将该变量传递给子组件&#xff0c;但是不会双向绑定&#xff0c;这时候我们就需要传值或者触发回调去解决这个问题 我们将分为两个部分 1.父组件传…

小美的排列构造

美团2024届秋招笔试第一场编程真题 贪心问题&#xff0c;得到所有n全排列中相邻两数的和&#xff0c;这些和差距要尽可能小。 显然如果1和2排一起&#xff0c;或者让n和n-1相邻都是错误的。最好的方式是让相邻两数的和接近&#xff08;n1&#xff09;/2。 比如:n 1 n-1 2...…