vue3的el-tree的default-checked-keys无法勾选的问题解决

范天缘

已于 2024-09-05 10:58:23 修改

阅读量1.1k

点赞数 4

分类专栏： elementui vue3 文章标签： vue.js

于 2024-09-05 10:57:57 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_42821697/article/details/141925444

版权

前言:有些树形控件是需要默认勾选的但是请求后渲染不显示刷新外部的key值也没有用
看了一下文档我们使用自带的方法来解决
在这里插入图片描述

<el-tree
   node-key="id"
   :data="state.parentMenuList"
   :default-checked-keys="state.checkIdList"
   :check-on-click

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

范天缘

关注关注

4
点赞
踩
2

收藏

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

复制链接

分享到 QQ

分享到新浪微博

扫一扫
打赏
打赏
打赏举报

举报

专栏目录

vue3 - element-plus树形控件el-tree快捷全选、反选、清除选择功能，Tree树形控件组件实现点击按钮一键全勾选和一键全取消勾选快捷按钮（详细示例运行源码，一键复制开箱即用！）

高级前端工程师

03-11

5483

vue3，element plus，el-select，树形组件，Tree树形控件，vue3 elementplus如何实现tree树组件一键全选和反选功能，el-select实现全选、取消全选效果，树形下拉选择器组件，element-plus tree树形全选和反选，el-tree实现一键全选、反选功能el-tree 全选，el-tree实现全选/全不选，tree全选全不选,获取所有选中，清空el-tree复选框选中项，el-select下拉框多选实现全选的实现，一键全选多个树形，el-tree树增加全选

vue element-ui tree树形控件中:default-checked-keys的问题

u013361179的博客

08-21

9982

今天在使用element-ui中的tree控件时,我想要默认选中角色拥有权限的复选框时,发现即使改变了:default-checked-keys,也不能改变渲染结果,需要调用this.refs.tree.setCheckedKeys方法来改变选中状态.<el−dialogtitle="提示":visible.sync="setRightsDialogVisible"width="30@close="clearDefaultCheckedKeys"><el−tree:data="rights

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

17 el-tree defaultCheckedKeys配置和树上面选中节点不同步问题

970655147的专栏

10-24

2176

问题来自于, 可以发现的是我的 defaultCheckedKeys 默认配置了两个节点, 然后后面初始化的时候从 sessionStorate 中拿了暂存的选中节点列表, 然后更新到 defaultCheckedKeys 中但是存在的问题是更新之后, el-tree 和 defaultCheckedKeys 的列表是不同步的比如这里, 保存的列表为选中的节点没有 '后端1', 但是渲染之后的节点多了一个 '后端1'

vue3+Element-plus中el-tree树组件实现反选功能

最新发布

bguffci的博客

05-15

152

大致思路（同步树）中，将树组织结构解构为普通数组，将已选的key筛选出来后，再转化为树形式的数组。

element-ui的树状图default-checked-keys默认却勾选了所有的子节点

幼儿园园长

07-01

7373

在开发的过程中，有一个权限模块的需求，是需要更新分配的权限，因此需要在编辑的时候，将之前已有的权限默认先勾选上。页面是这样的，树状图是懒加载的。但是开发完成之后测试的时候，发现了很玄学的问题：每次只要勾选前两个，比如勾选oss下的wb_test3和A，再次点开编辑的时候，就变成了oss下的子节点是全选的了。 bug复现：我打印看了一下默认赋给树状图选中的default-checked-keys的数组，发现没有问题，是两个id，但是为什么其他的都被选中了呢，太玄学了！后来研究了很久，我尝试打印了

vue element-ui ＜el-tree＞ default-checked-keys 会把节点下所有子节点全部勾选的解决方法

weixin_47433173的博客

01-13

832

如果是用id的去做唯一的话，只需要用getCheckedKeys就可以之前我用的是getCheckedNodes，其实也可以用这个，但是这个是返回整个对象数组而不是只有帮的那个的id，所以还需要过滤出id来，再concat到你的id数据，相对来说比较麻烦，而getCheckedKeys就不需要你自己去过滤了 <el-tree ref="treeGameData" v-model="gameCheckList" :props="tree

element-ui tree树形控件:default-checked-keys 设置空数组默认还是选中状态问题

01-20

今天在写个后台管理系统，使用了element-ui的组件库。在做角色权限，通过tree控件展示权限列表的时候，用:default-checked-keys绑定数据，这个属性不能实现双向绑定，只能用于初始化选择状态。如果想双向绑定只能使用组件的方法setCurrentKey来实现。想直接绑定数据来的方便，只能修改源码。在tree的源码属性中重新定义一个属性，在watch中监听，调用 this.store.setCheckedKeys()。以下是作者修改的代码，第一次写博客分享给大家，不喜勿碰，还望更多大神多多指教。 props: { ..... pCheckedKeys: Array, .

el-tree中default-checked-keys属性变化不生效

热门推荐

monparadis的博客

02-25

1万+

前言：使用element-ui中tree组件时，天真的以为只要动态修改default-checked-keys这个属性值得变化，默认勾选的值也会随之变化，实际发现并不是这样的我们先看看官网上对default-checked-keys的定义：（看完依旧觉得没问题）于是我就去探寻了一下原因是啥：原因是：tree.vue中使用watch监听default-checked-keys值得变化，调用了以下方法在tree-store.js中又使用了此方法终于知道原因了，发现只有监听到def

解决element ui中的el-tree组件default-checked-keys默认勾选节点问题

qq_53876295的博客

03-28

3177

解决element ui中的el-tree组件default-checked-keys默认勾选节点问题

【element el-tree】default-checked-keys会把节点下的所有子节点都选中

baidu_28647571的博客

09-29

7698

el-tree 介绍 element-ui 的树形控件，基本用法： <el-tree :data="data" node-key="id" :default-expanded-keys="all" :default-checked-keys="checkedId" :props="defaultProps" show-checkbox> </...

el-tree通过default-checked-keys动态默认选中某节点

weixin_67898309的博客

04-11

2285

el-tree树节点默认选中

【JavaScript源代码】element的el-tree多选树(复选框)父子节点关联不关联.docx

12-28

2. `default-checked-keys`：初始化时预设的选中节点ID数组。 3. `check-strictly`：设置为`true`以实现父子节点的独立选择。 4. `props`：用于指定数据对象映射到节点的属性，如`children`表示子节点数组，`label`...

element-plus el-tree页面两个el-tree 使用default-checked-keys 第二个tree选不上 vue3

04-30

在 Vue3 中使用 Element Plus 的 `el-tree` 组件时，如果遇到第二个树节点无法通过 `default-checked-keys` 正常选中的问题，通常是因为以下几个原因： 1. **数据绑定不一致**：`default-checked-keys` 属性需要与 ...

如何解决element ui中的el-tree组件default-checked-keys默认勾选所有节点问题

a7442358的专栏

07-25

4837

如何解决element ui中的el-tree组件default-checked-keys默认勾选所有节点问题

vue3中使用el-tree的setCheckedKeys方法勾选失效回显问题

Abao的博客

09-21

1328

el-tree勾选问题

el-tree中default-checked-keys属性出现减少数据不生效的问题

lc257的博客

10-23

2121

问题描述比如我开始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

vue中el-tree默认选中节点问题

StevenChen的博客

03-26

1429

里面有了参数，但是这个树不会实时渲染，要等到下一次的dom节点渲染时才会显示出来，把上面那个代码改成下面这个样子，加一个实时刷新的函数。这时会发现一个问题，就是树没有打勾，这是因为虽然。

element-ui tree树形控件中default-checked-keys失效的问题

ricoshallow的博客

05-31

3181

在用树形控件el-tree勾选默认节点时会用到default-checked-keys属性，但是注意一定要同时加上 node-key="id"才能生效！  <el-tree :data="rightList" :props="rightListProps" @node-click="handleNodeClick" show-checkbox default-expand-all node-key="id" :

element-ui 树形控件default-checked-keys设置失效问题

weixin_44784830的博客

11-07

2149

设置了default-checked-keys和一个空数组遍历完数据后，对应节点并没有渲染勾选打断点调试显示数组里面是有值的查阅以后发现是没有设置node-key="id" 设置完以后完美解决，节点成功勾选 ...

el-tree 默认选中 vue3

01-11

### Vue3 中 `el-tree` 组件默认选中项的配置在 Vue3 的项目里，为了实现 `el-tree` 组件中的某些项被默认选中，可以通过设置组件属性以及利用其事件来完成这一需求。对于 `el-tree` 而言，默认选中有赖于两个主要方面：一是提供给定的数据源时指定哪些节点应该处于选中状态；二是通过编程方式调用相应的方法使特定节点获得焦点或高亮显示。 #### 设置默认选中的数据准备当初始化树形控件的时候，除了常规传递的数据外，还需要额外定义一个字段用于标记该条目是否应被初始状态下选定。通常情况下，这涉及到向每一条记录增加一个布尔类型的标志位，比如 `checked` 或者其他自定义的名字[^1]。 ```javascript const treeData = [ { id: 1, label: "Level one 1", checked: true, // 表明此节点应当默认选中 children: [ { id: 4, label: "Level two 1-1", checked: false, }, ], }, ]; ``` #### 使用 `default-checked-keys` 属性 Element Plus 提供了一个名为 `default-checked-keys` 的 prop 来支持开发者轻松设定那些节点应在加载完成后立即呈现为已勾选的状态。这个属性接受的是由节点 ID 构成的一个数组形式输入值[^2]。 ```html <template> <el-tree :data="treeData" show-checkbox node-key="id" :default-checked-keys="[1]" /> </template> <script setup lang="ts"> import { ref } from 'vue'; const treeData = ref([ /* ... */ ]); </script> ``` #### 动态控制选中状态如果希望更灵活地处理选中逻辑，则可以在 JavaScript 中操作实例方法来进行动态调整。例如，在页面初次渲染之后立刻执行一段脚本去触发某个节点的选择动作： ```typescript nextTick(() => { const instance = getCurrentInstance(); (instance?.proxy?.$refs.tree as any).setCheckedKeys([/* 想要选中的ID列表 */]); }); ``` 需要注意的是，以上代码片段假设你已经在模板内为 `<el-tree>` 添加了 `ref="tree"` 这样的引用以便后续访问其实例对象[^3]。