ElementUI tree取消选中，Element UI 树取消选中

最新推荐文章于 2024-04-17 16:07:00 发布
最新推荐文章于 2024-04-17 16:07:00 发布
阅读量1.4w 收藏 4
点赞数 1
分类专栏： 前端|Front-End 文章标签： vue.js javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44012027/article/details/107184165
版权

如何给Element 中的树型控件取消选中呢？我们不妨换一个思路来理解，即设置所勾选的节点数组为空，换句话来说就说让它什么也不选，这便达到取消选中的目的。

我们先来看看官方文档所提供的方法：

在这里插入图片描述
这样一来思路就比较明显了，解决方法如下

 this.$refs.tree.setCheckedKeys([])

要留意一个细节问题 此处要一致

在这里插入图片描述
学习与分享，每天进步一点点！

Edison-XX
关注
  • 1
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 2
    评论
专栏目录
element-ui tree树形结构全选、取消全选，展开收起
qq_37148353的博客
01-17 1010
控制树形结构全选、取消全选，展开收起。
el-tree点击节点高亮，再次点击取消高亮
ssssummer的博客
07-03 1943
【代码】el-tree点击节点高亮，再次点击取消高亮。
vue3：树的默认勾选和全选、取消全选
最新发布
weixin_47194802的博客
04-17 1228
实现的功能，上面有个选择框，当选中全部时，下方树被全选。
vue3 el-tree中设置和取消选中树节点高亮
qq_29184685的博客
11-02 4248
el-tree，高亮，取消高亮
el-tree子节点取消选中，父节点选中效果不变
Zorephp的博客
08-20 7162
Element UI el-tree子级取消选中，父级选中效果不变
elementui-树形控件-实现同一棵树下，相同id的节点勾选时一起勾选，取消一起取消
ating_ing的博客
01-09 488
elementui-树形控件-实现同一棵树下，相同id的节点勾选时一起勾选，取消一起取消
Vue+element-UI实现树形表格（全选、取消功能）
m0_46318298的博客
12-16 1589
Vue+element-UI实现树形表格（全选、取消功能）
el-tree设置、取消选中状态（高亮）
weixin_42792507的博客
07-12 1万+
在一个项目中, 有一个需求: 点击一个表格的每一行, 动态设置树节点的选中状态 设置节点的选中状态可以直接使用setCurrentKey方法, 根据node-key设置 this.$refs.tree.setCurrentKey(2); 如果要取消选中状态,只需要设置成null就可以 this.$refs.tree.setCurrentKey(null); 在做取消选中状态时, 原本是使用原生js来移除选中状态的class, 然后报错: Uncaught TypeError: Cannot read p
Element-ui el-tree新增和删除节点后如何刷新tree的实例
10-14
主要介绍了Element-ui el-tree新增和删除节点后如何刷新tree的实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
element-ui tree结构实现增删改自定义功能代码
10-14
在本文中，我们将深入探讨如何使用Element-UI的Tree组件实现增删改的自定义功能。Element-UI是一个基于Vue.js的开源UI组件库，它提供了丰富的组件供开发者使用，其中包括Tree组件，用于展示层级关系的数据。在描述的...
Vue+Element UI 树形控件整合下拉功能菜单（tree + dropdown +input）
01-19
使用Vue + Element UI，构建出最基本的树如下图所示： 现在我们就要在这个基础上进行改造，使页面更加符合我们的交互场景。 下拉菜单 将下拉菜单嵌到树节点中，使操作更加简便、紧凑。 效果演示 效果如图： 图示1...
ElementUI Tree 树形控件的使用并给节点添加图标
11-21
 因为项目需要用Vue做一个管理系统，其中有一个公司部门的管理页面有用到ElementUI 的树形控件，但是结构中没有使用chexkBox选项框，针对这个功能碰到的一些问题做一下总结 一，数据渲染 1）在标签中绑定data属性 ...
element-ui tree树形控件:default-checked-keys 设置空数组 默认还是选中状态问题
01-20
今天在写个后台管理系统，使用了element-ui的组件库。在做角色权限，通过tree控件展示权限列表的时候，用:default-checked-keys绑定数据，这个属性不能实现双向绑定，只能用于初始化选择状态。如果想双向绑定只能...
element tree ui 全选_Element-ui中tree树形控件全选与取消全选的功能实现
weixin_42490307的博客
02-23 1683
还有一种就是直接给tree返回来的数据加个全选的数据就可以了data里面的listTree:[] //菜单全选tree数据htmlv-model="dialogForm.sectionUserPoList"class="ztree"accordion:data="listTree"show-checkboxref="tree"node-key="sectionCode":default-expan...
elementUI，实现el-select + el-tree组合成下拉树。
weixin_38395200的博客
05-20 4945
elementUI 官网API elementUI 中有Select 选择器，效果是这样的。 Tree 树形控件的效果是这样的。 我们在实际开发中需要用到下拉树，elementUI 是没有这个组件的，我们就要自己去写了。下面是我开发中用到的，记录一下el-select + el-tree组合，直接贴代码。 <el-select v-model="baseTableName" class="select-unitName select-option-father" popper-class="se
Element-UI中Select选择器讲解（el-select详解）
热门推荐
辰兮要努力
11-22 9万+
本篇整理了el-select相关组件的基础用法，也正是这个组件，让我更加喜欢vue，更加喜欢element-ui，欢迎阅读学习，分享获取新知，大家一起进步。
elementui的单选选中之后可以取消的方法
m0_59638694的博客
09-01 3094
elementui单选选中之后可以取消
element-ui 中el-select 嵌套 tree树形控件 实例
轻风细雨_林木木
09-07 3977
参考：https://www.jianshu.com/p/52c540cdb586 <el-select class="form-input" v-model="checkedName" filterable> <el-option style="height: auto;" // 备注：这里设置auto解决option没有自动撑高问题 :value="checked"> <el-tree
element el-table表格树状图全选/取消 子节点无法选中问题
weixin_45428021的博客
09-27 2746
<el-table ref="multipleTable" :data="tableData1" row-key="fieldPath" border @select="select" @select-all="selectAll" :tree-props="{children: 'children'}"> </e.
elementui tree 默认选中
08-23
elementUI的tree组件可以通过设置`default-checked-keys`属性来实现默认选中节点。在你提供的引用中，给出了一个实现默认选中第一级的第一个节点的代码示例。可以将`default-checked-keys`属性设置为一个数组，数组中包含要默认选中的节点的key值。在这个示例中，`defaultTree`是要默认选中的节点的key值。 可以将`default-checked-keys`属性绑定到一个变量，在初始化时给这个变量赋值为要默认选中的节点的key值。例如，可以设置`default-checked-keys`为`defaultTree`，这样就能实现默认选中第一级的第一个节点了。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *3* [elementui tree组件动态获取数据和默认选中，实现默认选中第一级的第一个（单选）](https://blog.csdn.net/qq_45030898/article/details/124356759)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"] - *2* [element UI给树形控件一个默认选中的值](https://blog.csdn.net/weixin_52054631/article/details/121161183)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Edison-XX

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值