解决el-tree 点击修改弹窗回显数据时 对应节点没有渲染勾选

最新推荐文章于 2024-03-28 17:07:53 发布
最新推荐文章于 2024-03-28 17:07:53 发布
阅读量1k 收藏 2
点赞数
文章标签： elementui
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_49393290/article/details/121357773
版权

首先看官方文档，这个选中的节点。

是使用default-checked-keys这个方法

然后我写点假数据进去看看default-checked-keys这个方法奏不奏效

什么是假数据？

填一些这些数据

 

 

然后您看选中的时候选择到的机构就是您刚刚输入的这两个假数据

 说明default-checked-keys这个方法是正确的

所以现在您这么写

 然后在data中声明

 然后在js方法里

 

就可以了

北乎下周
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
基于element ui 二次封装的el-tree组件，支持懒加载数据，多选和单选，以tag方式回显输入框中，支持删除tag
01-24
树形下拉选择组件，下拉框展示树形结构，提供选择某节点功能 基于element ui 二次封装的el-tree组件，支持懒加载数据，多选和单选，以tag方式回显输入框中，支持删除tag，提供调用组件示例代码
el-tree中setChecked(id, true, false) 回显问题
03-21
el-tree中setChecked(id, true, false) 回显问题
解决element ui中的el-tree组件default-checked-keys默认勾选节点问题
最新发布
qq_53876295的博客
03-28 1235
解决element ui中的el-tree组件default-checked-keys默认勾选节点问题
解决element ui select下拉框不回显数据问题的解决
10-17
主要介绍了解决element ui select下拉框不回显数据问题的解决，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
uni-app 富文本编辑 回显富文本和修改富文本！
11-21
uni-app 富文本编辑 回显富文本和修改富文本！uni-app 富文本编辑 回显富文本和修改富文本！uni-app 富文本编辑 回显富文本和修改富文本！uni-app 富文本编辑 回显富文本和修改富文本！uni-app 富文本编辑 回显富文本和修改富文本！uni-app 富文本编辑 回显富文本和修改富文本！uni-app 富文本编辑 回显富文本和修改富文本！uni-app 富文本编辑 回显富文本和修改富文本！uni-app 富文本编辑 回显富文本和修改富文本！uni-app 富文本编辑 回显富文本和修改富文本！uni-app 富文本编辑 回显富文本和修改富文本！uni-app 富文本编辑 回显富文本和修改富文本！uni-app 富文本编辑 回显富文本和修改富文本！uni-app 富文本编辑 回显富文本和修改富文本！uni-app 富文本编辑 回显富文本和修改富文本！uni-app 富文本编辑 回显富文本和修改富文本！uni-app 富文本编辑 回显富文本和修改富文本！uni-app 富文本编辑 回显富文本和修改富文本！uni-app 富文本编辑 回显富文本和修改富文本！
解决el-tree渲染不出后端数据的问题
Vivien_CC的博客
10-31 1951
今天踩了el-tree的坑！花了好多时间找不到原因，最后终于解决了！我想让后端返回的categoryName字段取代label，所以就这么写。形式，要展示的名字的字段是不是label，不是的话要在代码里设置这个，写上defaultProps来对应之后，问题解决！首先看一下接口返回的。
element:tree:default-expand-all属性无法动态渲染
xiaojie的博客
10-18 1240
element:tree:default-expand-all属性无法动态渲染
解决Element 树形菜单Tree组件能拿到数据，但是组件不渲染问题
ddx2019的博客
07-27 6640
一、问题描述 我左侧的树形菜单和弹框中的格式一样，组件也是一样的，左侧的树形菜单能渲染出来，但是弹窗中的树形菜单并未渲染。 代码如下： <template> <comn-tree :treeList="treeList" @handleNodeClick="handleNodeClick" @handleRightClick="handleRightClick" @handleNodeEx
vue+iviewUI树形结构tree多选，编辑时重新勾选选中的数据，不渲染页面
wang_59881的博客
08-19 1856
vue+iviewUI树形结构tree多选，编辑时重新勾选选中的数据，不渲染页面
el-tree数据回显问题解决方案
热门推荐
lzg603117228的博客
06-04 1万+
场景描述 项目中用到了elementUI的tree组件，角色跟菜单是一对多关联的。编辑一个角色时，可以选择多个菜单。修改角色的菜单功能需要进行回显，从后台获取数据在相对应的el-tree节点上打勾。 关键点说明 此解决方案不能适应所有情况。 使用此方案的前提：*将el-tree的属性 check-strictly 设置为 false（默认就是false）。目的是使父子节点相互关联。如果设置为true，此方案不适用。 思路 提交数据到后台时，需要使用tree的getHalfCheckedKeys和getChe
17 el-tree defaultCheckedKeys配置 和 树上面选中节点不同步问题
970655147的专栏
10-24 1961
问题来自于, 可以发现的是 我的 defaultCheckedKeys 默认配置了两个节点, 然后 后面初始化的时候 从 sessionStorate 中拿了暂存的选中节点列表, 然后 更新到 defaultCheckedKeys 中但是 存在的问题是更新之后, el-tree 和 defaultCheckedKeys 的列表是不同步的比如这里, 保存的列表为 选中的节点 没有 '后端1', 但是 渲染之后的节点 多了一个 '后端1'
Element-ui el-tree新增和删除节点后如何刷新tree的实例
01-21
补充知识：element-ui组件el-tree添加按钮管用，删除按钮，数据会变，但是页面不更新 可能是element-ui 的版本太低了 我用的element-ui 2.4.6 后来发现2.4.11的是管用的 所有更新element-ui版本 cnpm i eleme
【vue】解决el-tree或el-table中树形列表懒加载数据改变后不能实时刷新问题以及使用
前端代码小白的日常博客
06-25 5866
首先从map中取出刚刚架子啊过子级节点的数据，再用this.$set清空对应父节点的数据，实现视图实时刷新，再通过取出的数据重新加载父节点。//封装一个增删改刷新table数据的方法,组件懒加载数据的节点，data return的maps，及被操作节点的父节点。在使用el-table表格懒加载子级数据，懒加载仅会在第一次展开时加载，后续会使用第一次缓存的数据，而不会重新加载。传入的三个参数分别是：组件懒加载数据的节点，存储的maps数据，被操作节点的。// 保存本次的展开或折叠状态，用于下次判断。
element-ui 表格树编辑后重新获取数据不刷新解决方法
weixin_38992765的博客
02-05 1741
问题 element-ui改变数据后重新getData() 改变tableData的值 但是表格并没出现数据响应改变，需要刷新才显示 解决方法 添加key字段 key为getData获取数据后需要改变的值 <el-table ref="singleTable" :data="tableData" style="width: 100%" v-loading="loading" :key="key" element-loa
elementui tree组件修改节点数据无法更新视图的问题
WillRing的博客
12-21 6418
关于elementui tree组件修改节点数据无法更新视图 1.问题概述 在做项目的过程中用到elementui中的树组件，需求要做一个点击节点后显示选中的效果，如下图： 选中后显示图标，后端给的数据是没有是否选中的字段的，所以拿到数据后我先用递归给每一个节点添加selected属性默认值为false，在点击节点时进行判断 然后更改selected的值，选中图标用v-if根据selected显隐。 但是之后发现 点击节点后即便selected属性改变，选中图标并没有跟着更新。 2.问题分析 最初以为是组
vue使用el-table实现懒加载树. 解决新增、删除、修改之后树节点不刷新问题
ShA_QimA的博客
06-01 3933
所以我们将菜单(table)加载改为懒加载. 改需求结合ElementUi组件很容易实现, 可以去查看文档. 大体思路就是 初始化打开页面时只显示第一级菜单, 用户点击展开菜单之后往后端发送请求,然后加载出一级子菜单. 后台只用有一个根据菜单id查询他子菜单的接口就可以
解决el-tree子节点过多导致渲染缓慢问题
m0_52765288的博客
09-04 8464
el-tree子节点过多导致渲染缓慢问题
Vue ElementUI el-tree 默认初始化时，未展开的子节点不渲染
前端技术
04-09 3153
官网 API 中这个参数默认是 true，改为 false 后，初始化时未展开的子节点也会渲染。 当为 true 时，只勾选父节点，未渲染的子节点是接收不到check 事件的，从而导致功能错误。
elementUI 如何动态的给 el-tree 添加子节点数据 children
10-10 1万+
有这样一个数据结构的 tree。element的 tree 懒加载是从根上就开始懒加载，但我需要实现的是已经存在一个层级的 tree 结构，只是在末端点击的时候，载入末端以下的列表。
el-tree懒加载数据回显
08-25
在el-tree懒加载模式下，想要实现数据回显，需要注意几个方面。首先，需要在组件刚渲染的时候，就构造想要的树节点，可以通过设置default-expanded-keys属性来表示默认展开节点的key数组。这样el-tree-select会按照这个keys数组自动调用loadNode方法，获取数据并渲染树节点。 其次，需要在代码中处理数据回显的逻辑。可以通过在change事件中获取已勾选的节点，并将其对应的key保存到一个数组中，最后将这个数组传给后端。例如，在hChangeTree方法中，可以通过this.$refs.tree.getCheckedNodes()获取已勾选的节点，然后循环遍历这些节点，将它们的entityId保存到一个数组中，最后使用vuex的commit方法将这个数组保存起来。这样就实现了数据的回显功能。 总之，要实现el-tree懒加载数据的回显，需要在组件渲染时构建想要的树节点，并在代码中处理数据回显的逻辑。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* [Element Plus的el-tree-select组件，懒加载 + 数据回显](https://blog.csdn.net/qq_38118138/article/details/126659253)[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^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 33.333333333333336%"] - *2* [详解如何实现Element树形控件Tree在懒加载模式下的动态更新](https://download.csdn.net/download/weixin_38609571/12943439)[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^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 33.333333333333336%"] - *3* [el-tree懒加载回显数据](https://blog.csdn.net/qq_30351747/article/details/123640964)[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^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 33.333333333333336%"] [ .reference_list ]

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值