vue2动态改变default-checked-keys

最新推荐文章于 2025-03-05 21:36:52 发布

qq_70032585

最新推荐文章于 2025-03-05 21:36:52 发布

阅读量673

点赞数

文章标签： vue.js javascript elementui

本文链接：https://blog.youkuaiyun.com/qq_70032585/article/details/134919970

版权

文章讲述了在Vue项目中使用el-tree组件时，如何修改`default-checked-keys`但页面未响应的问题，涉及到`ref`的使用和`setCheckedKeys`方法的调用，以及解决步骤。

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

修改了default-checked-keys，但是页面没有发生变化

第一步：给el-tree添加ref="areaTrees"

 <el-tree ref="areaTrees" :data="treeData" show-checkbox node-key="deviceId" :default-checked-keys='checked'
              :props="defaultProps" @check="checkChange">
            </el-tree>

第二步：

  this.$nextTick(() => {
          this.$refs.areaTrees.setCheckedKeys(this.checked);
        })

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

qq_70032585

关注关注

0
点赞
踩
2

收藏

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

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

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

范天缘的博客

09-05

1132

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

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

幼儿园园长

07-01

7362

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

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

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

01-20

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

ElementUI el-tree default-checked-keys动态改变

Avery233的博客

06-15

2799

通过调用setCheckedKeys方法来改变elementUI el-tree选中状态

Element Plus中的树组件的具体用法（持续更新！）

热门推荐

monparadis的博客

02-25

1万+

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

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

u013361179的博客

08-21

9958

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

default-checked-keys动态改变

04-28

因此，要动态改变当前选中的节点，我们需要对default-checked-keys数组进行修改，并通知组件重新渲染。在Vue中，我们可以通过以下几种方式来修改default-checked-keys数组： 1. 直接修改：可以使用数组的push、...

el-tree default-checked-keys不生效

09-12

2. 检查watch监听default-checked-keys值变化的方法，确保在处理defaultCheckedKeys数组变化时，正确地添加或移除选中状态。 3. 如果你使用的是异步加载树形数据，需要确保在数据加载完成后再设置default-checked-...

antd中Checkbox的defaultChecked动态改变

juju4的博客

03-15

1857

antd中Checkbox的defaultChecked动态改变最近有一个需求，就是defaultChecked的初始数据从接口拿，不同的会话里初始数据不同，且可以通过方法修改当前checked是否为true，找了很多方法想通过js控制checked，但都不行。最后发现，可以直接加key，因为Checkbox只在最开始获取defaultChecked，后面如果修改defaultChecked，Checkbox无法检测到改变，但加上key了后，就可以了. <Checkbox onChange={(

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

weixin_47433173的博客

01-13

814

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

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

DarkHorseK的博客

10-14

1万+

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

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

qq_53876295的博客

03-28

3089

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

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

baidu_28647571的博客

09-29

7685

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

default-checked-keys 问题

laoyaoshilaoyao的博客

04-09

1103

<el-tree :data="data" show-checkbox accordion node-key="code" ref="lookTree" :default-checked-keys="defaultCheckedkeys" :props="defaultProps"> </el-tree> this.$nextTick(() => { this.$refs.lookTree.setCheckedKey.

React 表格内自定义组件不进行实时更新，采用更新key方式实时更新组件，以及直接变更开关 defaultChecked 为 checked 状态实现表格组件更新

韩旭的博客

10-18

1571

文章目录一、使用useState变更表格数据，表格内的开关组件并不会更新组件？二、使用组件唯一 key 实现每刷新一次表格，key值都会变更，从而实现组件更新的功能。三、变更 defaultChecked 为 checked 实现自定义组件的监听更新。一、使用useState变更表格数据，表格内的开关组件并不会更新组件？首先我们可以看一下代码，我在这边是采用的 defaultChecked ，也就是组件初次的默认值进行数据变更但是不免得会有一个问题就是，表格内的组件只在第一次加载时是对的，当我变更

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

970655147的专栏

10-24

2166

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

vue-element Tree树形控件填坑路

w13707470416的博客

04-03

1085

通过tree树形控件的default-checked-keys属性来设置默认选中的节点 html.vue <el-form-item label="角色权限："> <el-tree :data="data2" show-checkbox node-key="id" @check="hand...