elementplus组件库el-tree组件设置默认选中项setCheckKeys不生效

于 2024-09-05 20:10:43 发布
阅读量229 收藏
点赞数 3
分类专栏： 常用插件 文章标签： 前端 vue.js elementui
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_35641191/article/details/141938626
版权

其实不是没生效，尝试了半天发现是自己闹了个乌龙，不知你是不是哈哈哈。。。

点击某一项时我就给这一项设置了背景颜色（找到is-current类设置的），setCheckKeys默认设置第一项以后，背景颜色一直没加上，我以为是没生效。

想要设置默认点击的是第一项，也就是当前项（不是选中的项对应的是is-checked类），应该用setCurrentKey这个方法。

什么是当前项？审查元素发现点击某个节点后有is-current类，这个就是当前项。

setCurrentKey方法的参数是具体的一个节点的id。(配合el-tree的属性node-key="id"使用)

setCheckKeys应该是针对前面有复选框的场景，它的参数是节点id构成的数组[]

夏与冰
关注
专栏目录
element el-tree组件的动态加载、新增、更新节点的实现
01-19
最近在根据需求，需要用到树形控件，ele 的封装了树形控件正好拿来用，用的途中遇到一些问题就总结下，哈哈哈 说正事，我需要动态的加载出整个树形结构，刚好就有 符合需求，啦啦啦 用的时候出现问题了，我要如何把后台返回个我的数据加载到表里呢，上菜。。。 <div class=custom-tre
element-ui tree树形控件:default-checked-keys 设置空数组 默认还是选中状态问题
01-20
今天在写个后台管理系统，使用了element-ui的组件库。在做角色权限，通过tree控件展示权限列表的时候，用:default-checked-keys绑定数据，这个属性不能实现双向绑定，只能用于初始化选择状态。如果想双向绑定只能使用组件的方法setCurrentKey来实现。想直接绑定数据来的方便，只能修改源码。在tree的源码 属性中重新定义一个属性，在watch中监听，调用 this.store.setCheckedKeys()。以下是作者修改的代码，第一次写博客分享给大家，不喜勿碰，还望更多大神多多指教。 props: { ..... pCheckedKeys: Array, .
vue3的elementPlus tree 默认高亮并选中第一行
able_me的博客
08-12 292
vue3的elementPlus tree 默认高亮并选中第一行
el-tree中default-checked-keys属性出现减少数据不生效的问题
lc257的博客
10-23 1961
问题描述 比如我开始selectedMenus里的数据是【1，2，3，4，5，6】，在我想要进行修改里面数据的时候： selectedMenus=【1，2，3，5】 只要是原数组的子数组，el-tree的展示都会出问题：即展示的是上一个折叠面板的勾选状态 <el-collapse v-model="activeName" accordion @change="change"> <el-collapse-item v-for="(r,index) in roles" :key
element plus 设置tree默认选中
u010782109的博客
08-29 2338
【代码】element plus 设置tree默认选中。
element-plus el-tree setCheckedKeys触发check-change事件
hafhcfgjb的博客
11-13 2470
el-tree 显示复选框，父子不互相关联，点击父节点需要setCheckedKeys选中第一级子节点，会调用check-change事件，从而导致孙子节点也会被选中，不符合预期。
使用element-ui的el-tree组件setCheckedKeys设置无效的解决办法
热门推荐
CaseyWei
09-29 2万+
例子 1:问题原因： this.$refs.tree.setCheckedKeys(this.defalutArr)，发现使用setCheckedKeys方法无效，换做setChecked方法可以解决 获取数据 解决： if (res.data.code == 200) { //默认选中的树的数据 setTimeout(() =>{ res.data.data.forEach(value => { this.$refs.rootTree.setCheck
el-tree使用setCheckedKeys清空树节点不生效
qq_40896145的博客
10-13 5206
问题描述： 在切换下拉选框的change事件中使用this.$refs.tree.setCheckedKeys([])清空目标树已选择节点，但不生效。 问题解决 // 清空 clearAllNodes: function() { this.$nextTick(function() { this.$refs.tree.setCheckedKeys([]) }) }, 关键：使用this.$nextTick()在清空所选树节点结束之后执行延迟回调 ..
elementplus el-tree树型结构多选，选中全部子节点，父节点也默认选中，但是子节点取消勾选不会影响父节点勾选状态
petrel_921的博客
07-30 855
子节点选中时父节点也会选中，子节点取消选中不影响父节点选中状态，实现选中父节点后，子节点全部选中，反之也会全部取消选中；但是子节点全部取消，父节点也会取消。
vue el-tree 默认展开第一个节点的实现代码
10-15
4. default-expanded-keys属性：为了实现默认展开特定节点，可以通过设置el-tree组件的default-expanded-keys属性来实现。该属性可以绑定一个数组，数组中的元素对应需要展开的节点的id值。 5. 实例化与数据绑定：...
vue2/3 - element组件库el-tree树形控件实现一键全选/一键反选取消/全部收起/全部折叠/上下级父子是否联动功能，vue+element Tree树点击按钮全选和反选，收起折叠树结构
高级前端工程师
03-20 2744
vue2，vue3，elementUI，element plus，Tree树形控件，el-tree，el-tree实现多选、反选，tree组件展开/折叠及全选/分组全选实现，element的树表格和树形控件折叠展开方法，element tree 如何全部展开、全部折叠，elmentui中树结构el-tree 多选功能，element el-tree折叠收缩，el-tree实现一键全选、反选功能，element Tree 树形控件 折叠、展开 全选、清空，树形结构全选、取消全选，展开收起，element中Tr
vue3 Element-Plus封装的el-tree-select的使用
宁波阿成的博客
03-25 2907
vue3 Element-Plus封装的el-tree-select的使用
解决 el-tree setChecked 方法偶尔失效的方法
weixin_59685936的博客
10-20 3296
解决 el-tree setChecked 方法偶尔失效的方法
elementPlus tree 默认高亮并选中第一行
m0_65730686的博客
06-20 622
elementPlus tree 默认高亮并选中第一行
使用element-ui的el-tree组件setCheckedKeys设置无效的解决办法/setCheckedNodes设置不上数据
为写出赏心悦目、容易维护的代码而探索
05-11 7595
使用element-ui的el-tree组件setCheckedKeys设置无效的解决办法/setCheckedNodes设置不上数据。当我们使用el-tree时经常会涉及到回显，有的时候回显失败怎么解决，下面是我常用的两种回显方式。关于el-tree的禁用，你只需要在你想要禁止选择或取消选择的数据里加一个disabled参数。注意：一定要确保树形选择器里的数据先与上方代码获取到。
element-ui 树形控件default-checked-keys设置失效问题
weixin_44784830的博客
11-07 1989
设置了default-checked-keys和一个空数组 遍历完数据后，对应节点并没有渲染勾选 打断点调试显示数组里面是有值的 查阅以后发现是没有设置node-key="id" 设置完以后完美解决，节点成功勾选 ...
使用el-tree问题之清空勾数据不生效
m0_52244931的博客
10-24 1236
她又说：那你清空肯定不行呀，还是要调用这棵树本身的清空方法，因为那个只是默认展示的数据，再次点击，组件缓存了，当然组件选中的子节点也缓存了，所以你还是得调用tree本身的清空方法进行清空。、紧接着点击角色2的权限按钮，给角色2分配修改权限数据（后三行是之前设置的 此刻回显的数据） 但是 当我点击角色2的权限按钮，弹出弹框时，角色1的数据 也渲染到树形结构上了。、此时我更多考虑的是 无非就是 无赋值时未清空上一次的数据 ，所以我接下来在 能初始化 数据的地方都设置了 如下代码。
element里tree的setCurrentKey方法不生效，没有效果？
weixin_46124693的博客
05-16 1万+
要实现的效果，默认高亮选中 <el-tree :data="organOptions" :props="defaultProps" node-key="partyId" :expand-on-click-node="false" :filter-node-method="filterNode" highlight-current="true" ref="tree1" default-expand-all @node-click="handleNo
vue3的el-tree的default-checked-keys无法勾选的问题解决
最新发布
范天缘的博客
09-05 437
前言:有些树形控件是需要默认勾线的 但是请求后渲染不显示 刷新外部的key值也没有用。看了一下文档 我们使用自带的方法来解决。
el-tree组件 清除默认已经选中的
06-07
您可以使用 `clearChecked` 方法来清除 el-tree 组件中默认已经选中的节点。该方法将会清除所有选中的节点和半选中的节点。示例代码如下： ```javascript // 获取 el-tree 组件实例 const tree = this.$refs.tree // 调用 clearChecked 方法清除已选中节点 tree.clearChecked() ``` 需要注意的是，使用该方法后，需要手动更新组件的数据。您可以通过 `setCheckedKeys` 或 `setCheckedNodes` 方法来更新已选中的节点。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值