elementUI Tree 树形控件单选实现

简介: 【6月更文挑战第3天】Element UI 的树形控件(el-tree)默认不支持单选,但可以通过监听节点点击事件并手动更新选中状态实现。以下是一个简单的示例,展示如何创建单选树:```html&

在Element UI中,树形控件(el-tree)本身不支持单选功能。但是,你可以通过监听节点点击事件并手动更新选中状态来实现单选树。

以下是一个简单的例子,展示了如何实现单选功能:

展示效果

代码实现

html相关:

<el-tree :data="flatArr" check-strictly accordion show-checkbox node-key="id" :props="defaultProps"
            @check="handleNodeClick" ref="tree">
 </el-tree>

js方法:

handleNodeClick(data, node, self) {
      // 如果已经选中了一个节点,则取消选择
      if (this.currentNodeKey?.name && this.$refs.tree) {
        this.$refs.tree.setCheckedKeys([]);
         // 更新当前选中节点的 key
        this.$refs.tree.setCheckedNodes([data]);
      }
      // 更新当前选中节点的 key
      this.currentNodeKey = data;
    },

义了一个currentNodeKey来存储当前选中节点的 key。每次点击节点时,我们首先检查是否已经有一个节点被选中,如果是,则通过this.$refs.tree.setCurrentKey(null)取消选中它。然后,我们更新currentNodeKey为新选中的节点 key。

请注意,这里的node.key假设你的每个节点数据中都有一个唯一的key属性。你需要根据实际的节点数据结构相应地调整这个属性名。

elementui Tree树形控件其他详细数据

参数 说明 类型 可选值 默认值
data 展示数据 array — —
empty-text 内容为空的时候展示的文本 String — —
node-key 每个树节点用来作为唯一标识的属性,整棵树应该是唯一的 String — —
props 配置选项,具体看下表 object — —
render-after-expand 是否在第一次展开某个树节点后才渲染其子节点 boolean — true
load 加载子树数据的方法,仅当 lazy 属性为true 时生效 function(node, resolve) — —
render-content 树节点的内容区的渲染 Function Function(h, { node, data, store } —
highlight-current 是否高亮当前选中节点,默认值是 false。 boolean — false
default-expand-all 是否默认展开所有节点 boolean — false
expand-on-click-node 是否在点击节点的时候展开或者收缩节点, 默认值为 true,如果为 false,则只有点箭头图标的时候才会展开或者收缩节点。 boolean — true
check-on-click-node 是否在点击节点的时候选中节点,默认值为 false,即只有在点击复选框时才会选中节点。 boolean — false
auto-expand-parent 展开子节点的时候是否自动展开父节点 boolean — true
default-expanded-keys 默认展开的节点的 key 的数组 array — —
show-checkbox 节点是否可被选择 boolean — false
check-strictly 在显示复选框的情况下,是否严格的遵循父子不互相关联的做法,默认为 false boolean — false
default-checked-keys 默认勾选的节点的 key 的数组 array — —
current-node-key 当前选中的节点 string, number — —
filter-node-method 对树节点进行筛选时执行的方法,返回 true 表示这个节点可以显示,返回 false 则表示这个节点会被隐藏 Function(value, data, node) — —
accordion 是否每次只打开一个同级树节点展开 boolean — false
indent 相邻级节点间的水平缩进,单位为像素 number — 16
icon-class 自定义树节点的图标 string - -
lazy 是否懒加载子节点,需与 load 方法结合使用 boolean — false
draggable 是否开启拖拽节点功能 boolean — false
allow-drag 判断节点能否被拖拽 Function(node) — —
allow-drop 拖拽时判定目标节点能否被放置。type 参数有三种情况:‘prev’、‘inner’ 和 ‘next’,分别表示放置在目标节点前、插入至目标节点和放置在目标节点后 Function(draggingNode, dropNode, type) — —

您好,我是肥晨。

欢迎关注我获取前端学习资源,日常分享技术变革,生存法则;行业内幕,洞察先机。

目录
相关文章
|
边缘计算 编译器 数据中心
X86架构与Arm架构的主要区别分析
X86架构与Arm架构的主要区别分析
2392 0
|
测试技术
12 Mac 下MQTT免费测试工具MQTTBox
12 Mac 下MQTT免费测试工具MQTTBox
1213 0
|
缓存 JavaScript 前端开发
鸿蒙5开发宝藏案例分享---Web开发优化案例分享
本文深入解读鸿蒙官方文档中的 `ArkWeb` 性能优化技巧,从预启动进程到预渲染,涵盖预下载、预连接、预取POST等八大优化策略。通过代码示例详解如何提升Web页面加载速度,助你打造流畅的HarmonyOS应用体验。内容实用,按需选用,让H5页面快到飞起!
|
存储 前端开发 Java
Element el-upload 文件上传/图片上传/拖拽上传/附带参数/附带请求头部详解
文目录 1. 前言 2. 基本用法 2.1 前端部分 2.2 后端部分 2.3 获取后端返回信息 3. 外观功能介绍 3.1 拖拽上传 3.2 显示图片 3.3 设置文件列表样式 3.4 显示提示信息 4. 事件功能介绍 4.1 限制上传文件数量 4.2 限制上传文件类型和大小 4.3 移除文件处理 4.4 手动上传 5. 附带参数 6. 附带请求头部 7. 小结
8717 0
|
前端开发 JavaScript
饿了么UI中el-tree中的树节点选中高亮的两种常用方式(highlight-current属性)
饿了么UI中el-tree中的树节点选中高亮的两种常用方式(highlight-current属性)
1654 0
|
移动开发 JavaScript HTML5
el-input限制输入整数等分析
本文介绍了在Vue中限制el-input只能输入整数的几种方式,包括设置type为number,使用inputmode属性,自定义指令,计算属性,使用onafterpaste和onkeyup事件以及使用el-input-number的precision属性。每种方式都有其优缺点,可以根据实际需求选择合适的方式。比较建议用自定义指令的方式来实现。
4103 0
el-input限制输入整数等分析
|
资源调度 JavaScript API
Vue-treeselect:为Vue应用程序提供强大选择器的指南
Vue-treeselect:为Vue应用程序提供强大选择器的指南
3084 0
Element UI 树形控件Tree 【详解】el-tree 展开指定节点,判断是否存在指定节点
Element UI 树形控件Tree 【详解】el-tree 展开指定节点,判断是否存在指定节点
3226 0
|
安全 网络协议 算法
RTP、RTCP、RTSP 概念
<p style="line-height: 28px; margin-top: 0px; margin-bottom: 10px; padding-top: 0px; padding-bottom: 0px; color: rgb(51, 51, 51); font-family: 'Hiragino Sans GB W3', 'Hiragino Sans GB', Arial, Helve
8726 0
|
缓存 运维 Linux
保姆级python项目离线部署服务器教程只需这一篇就够了(建议收藏)
这篇文章提供了详尽的Python项目在离线Linux(CentOS)服务器上的部署教程。作者首先介绍了环境背景,强调了无网络环境和使用有网络的CentOS虚拟机准备安装包的重要性。教程分为两部分:外网环境搭建和内网离线安装。在外网环境中,包括下载Python 3.9.0安装包、传输至服务器、安装依赖包,并使用pip3下载项目所需依赖。内网安装则涉及依赖包的复制和Python环境的同样步骤。最后,作者分享了运行项目的命令,并总结了离线安装的整个流程,提醒读者注意可能出现的问题。
保姆级python项目离线部署服务器教程只需这一篇就够了(建议收藏)