Element之树形控件tree踩坑记录(一):default-checked-keys清空数组之后还是会全部默认选中

最新推荐文章于 2024-08-12 15:10:04 发布
最新推荐文章于 2024-08-12 15:10:04 发布
阅读量7.3k 收藏 10
点赞数 7
分类专栏： 我对vue有初心
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43379916/article/details/109625264
版权
本文记录了在使用Element UI Tree组件时遇到的问题：即使将`default-checked-keys`设置为空数组，切换时依然会默认选中所有项。原因在于组件并不实时响应数据变化。解决方法是通过调用`setCheckedKeys`方法并传入空数组来清空选中项，同时确保在DOM更新后再执行该操作，可以利用Vue的`$nextTick`来实现。
摘要由CSDN通过智能技术生成
前言插图

在这里插入图片描述
在这里插入图片描述

最上面显示的是:default-checked-keys的选中数组
101 代表用户管理
102 代表商品管理

根据上面的图可以看到，我的数组清空了，但是切换时还是会默认选中。
产生原因：
这里并不是数据双向绑定的，也就是说我的视图并不会随着数据的更新而更新，而element的tree组件是采用赋值的方式进行改变是否勾选。
解决方法：
组件中帮我们提供的setcheckedkeys()这个方法来清空勾选项(setcheckedkeys)
在这里插入图片描述
调用this.$refs.tree.setCheckedkeys([])此方法然后传入一个空的数组就清空tree的选中

setCheckedkeys是tree的组件方法，想要this.$refs能调用到需要ref去注册tree

最低0.47元/天 解锁文章
开发路上的AZhe
关注
专栏目录
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清除已选中的
热门推荐
qq_38950979的博客
03-31 1万+
清除 element el-tree已选中的选项，光是清除default-checked-keys值是没用的 element的el-tree 组件是采用赋值的方式改变是否勾选的，所以你应该使用组件中提供的 this.$refs.tree.setCheckedKeys([]); 我这里用到的是： this.$nextTick(()=>{ ...
【elementui】记录el-tree默认选中某节点并高亮显示
最新发布
bbt953的博客
08-12 403
记录el-tree默认选中某节点并高亮显示
default-checked-keys 父节点选中子节点全选 解决方式
空·之·音
03-24 1780
解决方式一：check-strictly check-strictly默认为 false,严格的遵循父子不互相关联的做法，设置为true子节点就不会被全部选中 缺点：失去父子关联，没有半选状态，如果需要半选状态请用方式二 <el-tree :data="data" show-checkbox default-expand-all node-key="id" check-strictly="true" ref="tree" highlight-current :props
解决element ui中的el-tree组件default-checked-keys默认勾选节点问题
qq_53876295的博客
03-28 2205
解决element ui中的el-tree组件default-checked-keys默认勾选节点问题
【element el-tree】default-checked-keys会把节点下的所有子节点都选中
baidu_28647571的博客
09-29 7538
el-tree 介绍 element-ui 的树形控件，基本用法： <el-tree :data="data" node-key="id" :default-expanded-keys="all" :default-checked-keys="checkedId" :props="defaultProps" show-checkbox> </...
element-ui的树状图default-checked-keys默认却勾选了所有的子节点
幼儿园园长
07-01 7216
在开发的过程中，有一个权限模块的需求，是需要更新分配的权限，因此需要在编辑的时候，将之前已有的权限默认先勾选上。 页面是这样的，树状图是懒加载的。 但是开发完成之后测试的时候，发现了很玄学的问题： 每次只要勾选前两个，比如勾选oss下的wb_test3和A，再次点开编辑的时候，就变成了oss下的子节点是全选的了。 bug复现： 我打印看了一下默认赋给树状图选中的default-checked-keys的数组，发现没有问题，是两个id，但是为什么其他的都被选中了呢，太玄学了！ 后来研究了很久，我尝试打印了
vue element-ui ＜el-tree＞ default-checked-keys 会把节点下所有子节点全部勾选的解决方法
weixin_47433173的博客
01-13 728
如果是用id的去做唯一的话，只需要用getCheckedKeys就可以 之前我用的是getCheckedNodes，其实也可以用这个，但是这个是返回整个对象数组而不是只有帮的那个的id，所以还需要过滤出id来，再concat到你的id数据，相对来说比较麻烦，而getCheckedKeys就不需要你自己去过滤了 <el-tree ref="treeGameData" v-model="gameCheckList" :props="tree
vue element-ui tree树形控件中:default-checked-keys的问题
u013361179的博客
08-21 9759
今天在使用element-ui中的tree控件时,我想要默认选中角色拥有权限的复选框时,发现即使改变了:default-checked-keys,也不能改变渲染结果,需要调用this.refs.tree.setCheckedKeys方法来改变选中状态.<el−dialogtitle="提示":visible.sync="setRightsDialogVisible"width="30@close="clearDefaultCheckedKeys"><el−tree:data="rights
如何解决element ui中的el-tree组件default-checked-keys默认勾选所有节点问题
a7442358的专栏
07-25 4584
如何解决element ui中的el-tree组件default-checked-keys默认勾选所有节点问题
详解vue-element Tree树形控件填坑路
10-17
因为`default-checked-keys`需要的是一个扁平的数组，如果数据的格式不正确，可能就会导致无法正确渲染选中的节点。因此，在实际的业务中，获取数据后一定要进行正确的格式转换，确保数据能够被`default-checked-...
vue2/3 - element组件库el-tree树形控件实现一键全选/一键反选取消/全部收起/全部折叠/上下级父子是否联动功能，vue+element Tree树点击按钮全选和反选，收起折叠树结构
高级前端工程师
03-20 2722
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
vue element el-tree default-checked-keys 清空选中数组不管用；还是存在选中的
weixin_42650105的博客
03-13 2396
1.前端使用el-tree中checkbox全选和反选的功能实现时,setCheckedKeys置为空数组时,还存在选中的数据没有进行清空. this.$refs.tree.setCheckedKeys([]) 还是不行 2.换成setChecked setChecked怎么使用的呢具体可以看官网解释 this.treeData.forEach(item=>{ this.$refs.tree.setChecked(item,false,true) }) ...
vue element-ui tree树形控件中默认选中和回显问题
qq_44552416的博客
04-18 8843
问题： 我们使用树形控件在编辑时候有时候，会遇到回显数据是上一条回显给的数据。这个问题是由于我们的树形控件没有重新渲染导致的。比较笨的方法是每次编辑的时候重新加载一遍树形控件然后再进行回显选中的数据。不过这样会导致页面多次渲染影响加载速度和性能。 解决办法： 1，通过 this.$refs.tree组件上自定义ref名.setCheckedKeys(this.defaultList) <el-tree ref="tree" :data="dataList" show-checkbox
el-tree:this.$refs.tree.setCheckedKeys([])后仍有节点被选中
silver577的博客
02-22 1156
加上遍历节点，使checked为空。
vue-element Tree树形控件填坑路
w13707470416的博客
04-03 1051
通过tree树形控件的default-checked-keys属性来设置默认选中的节点 html.vue &lt;el-form-item label="角色权限："&gt; &lt;el-tree :data="data2" show-checkbox node-key="id" @check="hand...
Element遇到的坑：el-tree 默认选择几个节点，却全选中了
weixin_38091374的博客
05-07 7853
测试丢了个bug给我，他在一个树的节点造了一千多个子节点，结果本应该选中几个子节点的，却全选中了子节点。 下面的单位存在一千多个节点，选择了前面的4个子节点，提交后，再次打开。需要默认勾选中的4个节点，通过 default-checked-keys属性设置选中其中的节点，却全选了 我的代码是 使用懒加载lazy的方式加载二级节点 解决方式loadNodeRange函数 ...
element ui 的树形控件默认选择和展开
Hhh84847886的博客
01-02 750
要记得给树形控件一个唯一的ref值。初始化时添加下面的操作。
vue3+ts+element-plus 树形控件默认选中
06-02
你可以使用element-plus中的tree组件的default-checked-keys属性来设置树形控件的默认选中项。这个属性接收一个数组，数组中的每个元素都是树形控件中一个节点的key值。例如： ```html <template> <el-tree :data="treeData" :default-checked-keys="defaultCheckedKeys" :props="defaultProps" show-checkbox ></el-tree> </template> <script> import { defineComponent } from 'vue'; export default defineComponent({ data() { return { treeData: [ { id: 1, label: '节点1', children: [ { id: 11, label: '节点1-1', }, { id: 12, label: '节点1-2', }, ], }, { id: 2, label: '节点2', }, ], defaultCheckedKeys: ['11', '12'], // 设置节点1-1和节点1-2默认选中 defaultProps: { children: 'children', label: 'label', value: 'id', }, }; }, }); </script> ``` 在上面的例子中，我们将default-checked-keys属性设置为['11', '12']，表示节点1-1和节点1-2默认选中。注意，我们还需要将show-checkbox属性设置为true，以便显示复选框。另外，我们也可以通过props属性来设置树形控件的节点属性，例如label、value等。
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

开发路上的AZhe

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

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

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

打赏作者

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

抵扣说明：

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

余额充值