Element-Plus 中 ElTree 默认选中视图不更新选中状态问题

最新推荐文章于 2024-05-21 23:21:19 发布
最新推荐文章于 2024-05-21 23:21:19 发布
阅读量736 收藏
点赞数 1
文章标签： 前端 javascript elementui typescript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44326492/article/details/132894969
版权

问题描述：

  • 使用:default-checked-keys="[……]"定义好默认选中节点后，首次页面加载时视图默认选中，但是在路由切换返回或者组件更新重新加载的情况时默认选中视图不生效
  • 首次加载页面，默认选中，视图中勾选
    路由跳转后，返回该组件显示的路由时默认选中赋值，但是视图上没有更新为选中状态

解决办法：

  • 不使用:default-checked-keys="[……]"而是在onMounted 周期时通过使用setCheckedNodes 或setCheckedKeys方法来实现手动选中效果，而且后者这种方式能够触发check-change事件。
Jimsare
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
element-ui tree树形控件:default-checked-keys 设置空数组 默认还是选中状态问题
01-20
今天在写个后台管理系统，使用了element-ui的组件库。在做角色权限，通过tree控件展示权限列表的时候，用:default-checked-keys绑定数据，这个属性不能实现双向绑定，只能用于初始化选择状态。如果想双向绑定只能...
Element-ui el-tree新增和删除节点后如何刷新tree的实例
10-14
主要介绍了Element-ui el-tree新增和删除节点后如何刷新tree的实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
element-ui拿到可选择的树结构id,以及default-checked-keys更新错误，父级别禁用
piaocanY的博客
08-17 948
最近项目中再做一个 选择为树组件的需求，页面内容大概为这样 可折叠，可选择，在点击详情回显的时候，根据后台返回的数据（id），来勾选用户选择的信息 html代码 <div class="checkboxClass"> <el-tree :check-strictly="true" :data="allWorkList" :default-checked-keys="checkIds" @check='getname' show-chec
vue中el-tree默认选中节点问题
cjh16606260986的博客
03-26 697
里面有了参数，但是这个树不会实时渲染，要等到下一次的dom节点渲染时才会显示出来，把上面那个代码改成下面这个样子，加一个实时刷新的函数。这时会发现一个问题，就是树没有打勾，这是因为虽然。
Vue+elementUI el-tree默认选中节点不生效问题
朝花夕拾的博客
07-07 1214
current-node-key="1" 值为id。
elementui tree组件修改节点数据无法更新视图的问题
WillRing的博客
12-21 6248
关于elementui tree组件修改节点数据无法更新视图 1.问题概述 在做项目的过程中用到elementui中的树组件，需求要做一个点击节点后显示选中的效果，如下图： 选中后显示图标，后端给的数据是没有是否选中的字段的，所以拿到数据后我先用递归给每一个节点添加selected属性默认值为false，在点击节点时进行判断 然后更改selected的值，选中图标用v-if根据selected显隐。 但是之后发现 点击节点后即便selected属性改变，选中图标并没有跟着更新。 2.问题分析 最初以为是组
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 plus 部分组件组件数据更新，页面没有更新
qq_43371595的博客
03-18 956
最近用到了Tabs 标签页 <el-tabs ref="tabs" v-model="data.activeName" type="card" class="demo-tabs" @tab-click="checkTab" > <el-tab-pane v-for="item in statusList" :key="item.value" :name="item.value"> &lt
详解element-ui中el-select的默认选择项问题
10-16
主要介绍了详解element-ui中el-select的默认选择项问题，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
使用element-ui的el-menu导航选中后刷新页面保持当前选中状态
10-16
主要介绍了使用element-ui的el-menu导航选中后刷新页面保持当前选中状态，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下
关于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...
vue element-ui tree树形控件中:default-checked-keys的问题
u013361179的博客
08-21 9596
今天在使用element-ui中的tree控件时,我想要默认选中角色拥有权限的复选框时,发现即使改变了:default-checked-keys,也不能改变渲染结果,需要调用this.refs.tree.setCheckedKeys方法来改变选中状态.<el−dialogtitle="提示":visible.sync="setRightsDialogVisible"width="30@close="clearDefaultCheckedKeys"><el−tree:data="rights
element tree动态设置默认选项与反选,反选无效问题
qq_36539696的博客
12-31 1155
场景如图,数据结构是树形,页面组件分别是用面板和tree实现,一级是面板,二级是树,所以在数据绑定的时候,有点麻烦.感谢产品设计的好图(=^ ^=) 面板绑定数据比较好操作,正是因为这里,导致了tree的数据处理起来比较麻烦,话不多说,上解决代码 <el-collapse v-model="selectAn"> <template v-if="allGroupList && allGroupList.le.
Element-plus el-tree 触发check-change多次事件
weixin_59015876的博客
01-11 1176
再者，就是直接选择复选框的话，复选框假如是全选的状态的话，点击树节点的父节点的话，会改变子节点所有的选择，则会触发节点数数量+1（父节点）的check-change次数。简单来说，就是当你触发了子节点的复选框，如果复选框为全选的状态，因为你的一次触发，导致变为半选的状态，导致会在触发一次父节点的复选框check-change。反之，假如树节点的复选框是没有选择的状态，由于选择了子节点后，变成了半选的状态，又会触发一次check-change。通过以上的官网的解释我们可以发现二者的不同。
17 el-tree defaultCheckedKeys配置 和 树上面选中节点不同步问题
970655147的专栏
10-24 1945
问题来自于, 可以发现的是 我的 defaultCheckedKeys 默认配置了两个节点, 然后 后面初始化的时候 从 sessionStorate 中拿了暂存的选中节点列表, 然后 更新到 defaultCheckedKeys 中但是 存在的问题是更新之后, el-tree 和 defaultCheckedKeys 的列表是不同步的比如这里, 保存的列表为 选中的节点 没有 '后端1', 但是 渲染之后的节点 多了一个 '后端1'
el-tree check-change出现的问题以及解决方案
u014788505的博客
11-17 2471
check-change会导致数据更新时自动触发事件 比如里面有条件语句就会导致数据异常 替代方案： 使用node-click与check一起使用，分别由两个参数（数据与选中）
element ui tree 树形控件 数据重新赋值 默认选中
qq_25219151的博客
09-25 3996
element ui tree 树形控件 数据重新赋值 默认选中 需求：当对树形控件的数据进行重新赋值时，当前勾选及展开的状态需要保留。 <template> <div> <el-tree ref="tree" :data="data" show-checkbox node-key="id" :default-expanded-keys
vue3+element-plus权限控制实现(el-tree父子级不关联情况处理)
Bruce__taotao的博客
09-14 1623
在开发后台管理系统的时候，用户的权限控制是一个常见的需求。这里需要探讨下按钮的级别的权限控制，以及实现中使用element-plus tree 组件的使用细节。后台管理系统常见的权限控制需求，这里讲button实现交互细节处理，取消选中子级menu/button，父级不关联取消；选中/取消父级catalog/menu，子级全部选中/取消；选中/取消部分子级menu/button，父级关联半选中状态（indeterminate=true）；
vue源码之mustache模板引擎1
最新发布
qweasl_的博客
05-21 166
模板引擎的一个有点：它是将数据转为视图的最优雅的方法。相信vue的玩家首先想到的是。而还没学vue的朋友，就只能进行dom操作了。通过数组的join方法。以及es6推出的模板字符串。
element-plus el-tree 默认选中第一个
07-28
根据引用\[1\]中的描述，对于element-plus中的el-tree组件，默认选中第一个节点可以通过设置default-checked-keys属性来实现。你可以将default-checked-keys属性绑定到一个数组，数组中的元素是你想要默认选中的节点的key值。例如，你可以将default-checked-keys设置为\[this.arr\[0\].key\]来默认选中第一个节点。 另外，根据引用\[2\]中的代码示例，你可以通过设置props属性来指定el-tree组件的数据结构。在defaultProps对象中，你可以设置children属性和label属性来指定子节点和标签的字段名。 综上所述，你可以尝试在el-tree组件上设置default-checked-keys属性为\[this.arr\[0\].key\]来默认选中第一个节点，并使用props属性来指定数据结构。希望这能帮到你。 #### 引用[.reference_title] - *1* [VUE element-ui 组件 el-tree 默认选中渲染问题](https://blog.csdn.net/qq_44774831/article/details/119698975)[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^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item] - *2* *3* [element-plus el-tree使用](https://blog.csdn.net/m0_53266704/article/details/125557151)[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^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值