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)

您好,我是肥晨。

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

目录
相关文章
Threejs实现模拟管道液体流动
Threejs实现模拟管道液体流动
4077 0
Threejs实现模拟管道液体流动
|
前端开发 JavaScript
饿了么UI中el-tree中的树节点选中高亮的两种常用方式(highlight-current属性)
饿了么UI中el-tree中的树节点选中高亮的两种常用方式(highlight-current属性)
1509 0
|
存储 前端开发 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. 小结
8491 0
|
前端开发 JavaScript 开发者
利用 el-select 和 el-tree 实现树形结构多选框联动功能
本文详细介绍了如何使用ElementUI中的el-select下拉选择器和el-tree树形控件来实现多功能联动选择器,包括多选、删除、搜索、清空选项等功能。通过树形控件展示复杂的层级结构,用户可以通过下拉选择树形节点,实时搜索节点,且支持批量选择和删除功能。文中提供了完整的HTML、JavaScript和CSS代码实现,帮助开发者快速集成此功能。
6503 0
利用 el-select 和 el-tree 实现树形结构多选框联动功能
|
存储
el-tree 动态指定默认选中节点
el-tree 动态指定默认选中节点
1516 6
Element UI 树形控件Tree 【详解】el-tree 展开指定节点,判断是否存在指定节点
Element UI 树形控件Tree 【详解】el-tree 展开指定节点,判断是否存在指定节点
3072 0
|
移动开发 前端开发
vue3 Element-Plus封装的el-tree-select的使用
vue3 Element-Plus封装的el-tree-select的使用
3487 0
vue3 Element-Plus封装的el-tree-select的使用
|
前端开发 JavaScript
【定制需求】el-tree 树形控件实现:每级可单独选择,选择父级不选中子集,子集全部选中不自动选中父级,手写按钮可支持子集全选,以及取消子集全选,el-tree 树形控件取消父子级联动选择
【定制需求】el-tree 树形控件实现:每级可单独选择,选择父级不选中子集,子集全部选中不自动选中父级,手写按钮可支持子集全选,以及取消子集全选,el-tree 树形控件取消父子级联动选择
1706 0
|
API
uniapp使用u-search以及相关api
uniapp使用u-search以及相关api
1343 1
|
前端开发
vue2_markdown的内容目录生成
vue2_markdown的内容目录生成
534 0