element ui 树形控件tree实现单选功能

最新推荐文章于 2025-04-20 11:14:10 发布

前端李小白

最新推荐文章于 2025-04-20 11:14:10 发布

阅读量3.6k

点赞数 3

分类专栏： element ui 文章标签： elemnet tree单选

本文链接：https://blog.youkuaiyun.com/qq_42268364/article/details/109745445

版权

本文详细介绍了如何利用 Element UI 的 Tree 组件，通过 `setCheckedNodes` 方法实现树形控件的单选功能，帮助开发者解决在项目中遇到的单选需求。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<el-tree
            ref="tree"
            class="tree"
            :props="treeProps"
            :node-key="'id'"
            :empty-text="' '"
            :data

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

前端李小白

关注关注

3
点赞
踩
8

收藏

觉得还不错? 一键收藏
4
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

element ui tree 控件单选的实现

a1353726517的博客

01-17

1216

element ui 使用起来很好用，但是有一些功能不全面，例如tree控件，有很多时候，可能我们只需要单选，并不需要多选，这个时候就只能自己实现。 vue代码 <el-tree :data="tableData" node-key="product_ID" s...

elment-ui tree单选实现

01-03

elment-ui 里面的树形控件，默认是多选的，如果你仔细看过各个属性和方法就可以实现单选。 check-strictly 关闭父子关联 node-key 设置唯一标识 show-checkbox 允许节点可选 ref=“tree” 添加方法 @check=“treeChange” check方法： treeChange(now, tree) { this.$nextTick(() => { this.$refs.tree.setCheckedKeys([now.id], true); }); } 获取选中的节点key

4 条评论您还未登录，请先登录后发表或查看评论

elementUI Tree 树形控件单选实现

肥晨开发的学习之路

03-21

3031

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

ElementUI Tree实现单选

最新发布

qq_43987527的博客

04-20

193

el-tree实现单选代码如下主要就是绑定key 跟check-change方法。

element Tree 实现单选

weixin_41009649的博客

07-16

1377

element Tree 单选 html <el-tree :data="treeData" ref="tree" @check-change="orgCheckChange" show-checkbox :check-strictly="true" node-key="id"> </el-tree> 数据 treeData: [ { id: 1, label: '品牌一',

element ui tree实现单选

Feast_aw的博客

07-06

1197

<el-tree :data="treeData" :check-strictly="true" :default-expanded-keys="parentEditArr" :default-checked-keys="editArr" ref="tree" current-node-key node-key="id" sh...

element-ui树形控件后台返回的数据+生成组织树的工具类

01-19

开发项目的时候遇到需要在表单中选择参会人员，根据不同部门下选择不同的人，在element-ui中有树形控件能满足这种情况，后台封装数据记录一下。封装格式：返回数据格式：接收数据的pojo类： 2018年4月12...

基于Element的组件改造的树形选择器(树形下拉框)

10-15

在本文中，我们将深入探讨如何基于Element UI框架进行组件改造，特别是创建一个树形选择器（树形下拉框）。Element UI 是一个流行的 Vue.js UI 框架，提供了许多开箱即用的组件，如 el-select 和 el-tree。然而，在...

基于element-ui封装可搜索的懒加载tree组件的实现

10-15

- 利用Element-UI中的el-select组件的远程搜索功能实现。 - 用户输入搜索词后，组件会向服务器发送请求，搜索匹配的节点数据。 2. **数据插入Tree**： - 搜索后返回的数据按照特定格式组织，包括节点的label、id...

ElementUI el-tree实现单选功能

d305199的博客

07-08

2813

ElementUI el-tree实现单选功能

elementui tree树形控件 单选问题

热门推荐

lianzhang861的博客

06-14

1万+

1.单选功能 elementui中的树形可以设置checkbox，但是不能设置radio的单选功能但官方提供了自动勾选方法：想实现单选只需要给node增加点击事件，并控制setCheckedKeys即可 <el-tree :data="treeData" show-checkbox node-key="offerSvcCode" ref="tree" che...

ElementUI Tree结构如何实现单选以及实现原理

weixin_56410839的博客

06-18

2339

但是这次触发的节点的ID 为 9 的，这次的9已经不再是勾选状态，所以无法进入if 判断，从而直接输出了 “当前节点 ID ：9”check-strictly是为了关闭父子之间相互关联，若不关闭，那么当我们勾选子组件的时候，父组件也会自动被勾选上去，从而变成了多选，这明显是不符合需求的。在开发中，我们经常会遇到 Tree 树形控件要求单选的这个需求，但是element ui 提供的Tree默认是多选的，要想实现单选，我们就要另外操作一波。它需要传递三个参数，我们只需要传递前面两个参数即可。

element tree 单选

鱼儿的博客

03-17

1725

3444 template部分： <el-tree v-if="dialogFormVisible" ref="tree" node-key="id" :data="deptsList" default-expand-all ...

elementui tree结构数据设置单选模式

lotte

03-30

1694

先来看下tree官方api介绍eleme/tree ¶Attributes 参数说明类型可选值默认值 data 展示数据 array — — empty-text 内容为空的时候展示的文本 String — — node-key 每个树节点用来作为唯一标识的属性，整棵树应该是唯一的 String — — props 配置选项，具体看下表 object — ...

elementUI el-tree 单选

晨曦的博客

02-22

672

【代码】elementUI el-tree 单选。

Element UI-实现树形控件单选

itmacy的博客

05-19

4815

Element UI-实现树形控件单选

把element ui改成单选一个其他禁止选择Tree 树形控件

05-31

您可以通过修改 Element UI Tree 组件的节点模板来实现单选和禁止选择其他节点的功能。首先，您需要在 tree 组件上设置 `show-checkbox` 属性为 `true`，以显示节点前的复选框。接下来，在节点模板中添加一个单选框，将其绑定到节点的 `selected` 属性上，以实现单选功能。最后，在节点的渲染函数中，判断节点是否为指定节点，如果不是则禁止选择。以下是一个示例代码： ```html <template> <el-tree :data="data" show-checkbox :node-key="nodeKey" :props="defaultProps" :render-content="renderContent" @check-change="handleCheckChange" ></el-tree> </template> <script> export default { data() { return { data: [ { id: 1, label: 'Node 1', selected: false, children: [ { id: 2, label: 'Node 1-1', selected: false, forbidden: true }, { id: 3, label: 'Node 1-2', selected: false, forbidden: false } ] }, { id: 4, label: 'Node 2', selected: false, children: [ { id: 5, label: 'Node 2-1', selected: false, forbidden: false }, { id: 6, label: 'Node 2-2', selected: false, forbidden: false } ] } ], nodeKey: 'id', defaultProps: { children: 'children', label: 'label' } } }, methods: { renderContent(h, { node, data }) { if (data.forbidden) { // 禁止选择 return <span>{ data.label }</span> } else { // 单选框 return ( <span> <el-checkbox v-model={ data.selected }></el-checkbox> { data.label } </span> ) } }, handleCheckChange(data, checked) { if (checked) { // 取消其他节点的选择状态 this.data.forEach(item => { if (item.id !== data.id) { item.selected = false } if (item.children) { item.children.forEach(child => { if (child.id !== data.id) { child.selected = false } }) } }) } } } } </script> ``` 在上面的示例代码中，我们为节点添加了一个 `selected` 属性，用于存储节点是否被选中的状态。同时，我们还为其中一个节点设置了 `forbidden` 属性，用于指定该节点是否禁止选择。在节点的渲染函数中，如果节点被禁止选择，则只显示节点的文本内容；否则，显示一个单选框和节点的文本内容，将单选框的值绑定到节点的 `selected` 属性上。在 `check-change` 事件的处理函数中，我们判断节点是否被选中，如果被选中，则取消其他节点的选择状态。注意，为了实现单选功能，我们需要确保在任何时候只有一个节点被选中。