el-tree树回显删除某项，再次点开树形组件无变化，实际数据已改变

最新推荐文章于 2024-03-19 17:15:23 发布
原创 最新推荐文章于 2024-03-19 17:15:23 发布 · 1.3k 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vue.js #elementui #前端

文章讨论了在使用ElementUI的el-tree组件时，删除节点后重新加载时发现被删除项未消失的问题。原因是初始化时应通过getData方法而非check方法处理默认已选选项。正确的做法是在打开弹窗时获取当前数据，避免依赖于default-checked-keys属性。

el-tree树回显删除某项，再次点开树形组件无变化，实际数据已改变

页面有添加和删除已选选项的按钮，点击删除一个选项，再点添加，打开树形弹窗，发现弹窗被删除的选项还在
原因： 发现是添加的时候，调的方法是，el-tree树形组件里check方法，这是错误的
初始化会根据default-checked-keys属性，默认已选项，直接勾选对应值，而不是通过check方法
解决： 初始化打开弹窗时，需要调 获取data的方法

vue3 - element-plus树形控件el-tree快捷全选、反选、清除选择功能，Tree树形控件组件实现点击按钮一键全勾选和一键全取消勾选快捷按钮（详细示例运行源码，一键复制开箱即用！）
高级前端工程师
03-11 5946
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树增加全选
vue2 - 详细介绍element UI中在el-select嵌套el-tree树形控件实现下拉选择树型结构数据的效果实例（组件封装）
前端充电宝
03-03 1671
element UI中在el-select嵌套el-tree树形控件实现下拉选择树型结构数据的效果实例
element tree不刷新视图_循序渐进VUE+Element 前端应用开发(26）--- 各种界面组件的使用（2） - 伍华聪...
weixin_39633054的博客
11-05 452
在我们使用Vue+Element开发前端的时候，往往涉及到很多界面组件的使用，其中很多直接采用Element官方的案例即可，有些则是在这个基础上封装更好利用、更少代码的组件；另外有些则是直接采用第三方开发好的组件，目的就是实现所需功能外，尽量简化界面使用代码。本篇随笔介绍在我的项目中经常用到的各种界面组件和它的界面效果，以便在实际开发中进行相应的参考，提高开发效率。 ...
vue数据更新UI不刷新显示的解决办法
11-19
vue比较常见的坑就是数据（后台返回）更新了，但是UI界面并没有更新，常见于以下情况： 一、数据为数组时 1.通过数组索引修改数组元素例如： 此时UI数据并不会刷新 2.修改数组长度时： 解决方案： 如果data为JSON数组则如下： 第一个参数为要更新数据的数组，第二个参数为要更新的数组中具体的元素下标，第三个参数为新数据 备注: 数组原型上的方法vue可直接检测到变化：push(),pop(),shift(),unshift(),splice(),sort() 二、数据为对象时: Vue 不能检测对象属性的添加或删除：你可以这样添加一个属性 如果要添加多个属性可以 补充知识：v
element的el-tree树结构-添加或删除子节点后(也就是数据刷新后)-保持节点状态不发生改变
m0_67063319的博客
08-09 3852
利用node-expand和node-collapse监听树展开和关闭的状态; 把展开的节点id push给defaultExpandKeys,保持展开状态; 再次点击此节点时-再从defaultExpandKeys数组内对应的id(节点)扔出去;
element-ui组件el-tree添加按钮管用，删除按钮，数据会变，但是页面不更新
qq_39738977的博客
04-22 2374
element-ui组件el-tree添加按钮管用，删除按钮，数据会变，但是页面不更新 可能是element-ui 的版本太低了 我用的element-ui 2.4.6 后来发现2.4.11的是管用的 所有更新element-ui版本 cnpm i element-ui@2.13.1 ...
【el-tree】在弹窗中使用树，打开弹窗默认设置选中节点，关闭后再次打开别的弹窗，之前展开的节点依旧展开的问题
hyq_07_27的博客
07-12 1350
解决方案是，在弹窗中增加v-if。
el-tree-transfer树形穿梭框回显左右节点重复问题
sdad2154的博客
12-24 2313
有的说是node-key 其实怎么说呢 配置了好久发现这个根本就是存在的bug。数据进行回显的时候 左右的节点会重复 网上介绍这个问题的特别少。我也不知道为啥很少介绍这个bug的存在的。项目开发过程中遇到个问题。
使用elementui中的Tree 树形控件做权限管理 el-tree 数据回显问题
jasmine0178的博客
09-18 6464
最终呈现的效果 点击权限管理跳转到相对应的权限页面 对应权限页展示 <template> <div id="app" v-cloak> <el-tree :data="rootData" ref="rootTree" show-checkbox ...
基于element ui 二次封装的el-tree组件，支持懒加载数据，多选和单选，以tag方式回显输入框中，支持删除tag
01-24
树形下拉选择组件，下拉框展示树形结构，提供选择某节点功能 基于element ui 二次封装的el-tree组件，支持懒加载数据，多选和单选，以tag方式回显输入框中，支持删除tag，提供调用组件示例代码
【vue】解决el-tree或el-table中树形列表懒加载数据改变后不能实时刷新问题以及使用
前端代码小白的日常博客
06-25 8328
首先从map中取出刚刚架子啊过子级节点的数据，再用this.$set清空对应父节点的数据，实现视图实时刷新，再通过取出的数据重新加载父节点。//封装一个增删改刷新table数据的方法,组件懒加载数据的节点，data return的maps，及被操作节点的父节点。在使用el-table表格懒加载子级数据，懒加载仅会在第一次展开时加载，后续会使用第一次缓存的数据，而不会重新加载。传入的三个参数分别是：组件懒加载数据的节点，存储的maps数据，被操作节点的。// 保存本次的展开或折叠状态，用于下次判断。
element-plus 组件el-tree 绑定的响应式数据 组件不更新！
最新发布
努力飞起的菜鸟
03-19 1216
最近用了几次 el-tree树组件 发现即使通过ref或者reactive 绑定数据，数据更新后el-tree 组件未渲染更新？最后还是v-if 手动强制重构；eg: default-expand-all 响应式展开与收起 动作。挖个坑：具体影响后面慢慢看 先继续搬砖。
Vue+element中Tree树形控件数据失效~
weixin_33744854的博客
05-21 5569
1.完成效果 2.要求 后台大哥说，数据量太大，没办法一次性把全部的数据给我，先给我第一级的数据，子项则在点击的时候进行请求； 3.开写~~~~~~ 初始数据（对象数组）： 组件调用： &lt;template&gt; &lt;el-tree :data="chulilist" :props="defaultProps" :render-content="renderContent"...
easyui 删除etree 文件夹节点下最后一个文件，文件夹图标不变
shinewer的博客
10-31 519
在使用easyui的可编辑树etree时，删除文件夹中最后一个文件或文件夹，该文件夹图标会默认变成文件图标，有时候我们并不想要这种效果，而是希望文件夹图标保持不变。         这就需要修改jquery.etree.js中的代码。在浏览器中，通过F12，我们可以看到删除之后与删除之前元素的变化，主要是class的变化，想要达到我们想要的效果，只需修改对应的class值即可。修改jquery.
Tree树形控件--删除分级菜单中的某一个、删除后的树形结构仍然是对应目录下的展开效果、二次删除确认、删除成功提示
日常笔记 | 干货分享 | 毕设源码 | 毕设指导 | 答辩指导
03-03 370
Tree树形控件--删除分级菜单中的某一个、删除后的树形结构仍然是对应目录下的展开效果、二次删除确认、删除成功提示
使用el-tree问题之清空勾数据不生效
m0_52244931的博客
10-24 1684
她又说：那你清空肯定不行呀，还是要调用这棵树本身的清空方法，因为那个只是默认展示的数据，再次点击，组件缓存了，当然组件选中的子节点也缓存了，所以你还是得调用tree本身的清空方法进行清空。、紧接着点击角色2的权限按钮，给角色2分配修改权限数据（后三行是之前设置的 此刻回显的数据） 但是 当我点击角色2的权限按钮，弹出弹框时，角色1的数据 也渲染到树形结构上了。、此时我更多考虑的是 无非就是 无赋值时未清空上一次的数据 ，所以我接下来在 能初始化 数据的地方都设置了 如下代码。
elementui tree组件修改节点数据无法更新视图的问题
WillRing的博客
12-21 7766
关于elementui tree组件修改节点数据无法更新视图 1.问题概述 在做项目的过程中用到elementui中的树组件，需求要做一个点击节点后显示选中的效果，如下图： 选中后显示图标，后端给的数据是没有是否选中的字段的，所以拿到数据后我先用递归给每一个节点添加selected属性默认值为false，在点击节点时进行判断 然后更改selected的值，选中图标用v-if根据selected显隐。 但是之后发现 点击节点后即便selected属性改变，选中图标并没有跟着更新。 2.问题分析 最初以为是组
element-ui 表格 修改后, 表格里面的数据不实时更新问题
github_37759996的博客
05-14 4386
element-ui 表格 修改后 表格里面的数据后 页面不实时更新问题 完美解 想要达到的效果：点击"更多"后，"更多"隐藏，删除和补仓显示；（有时间可全部看完，没时间直接看做法6/7） 尝试用的方法：自己用 this.show、在百度上找的方法 set 都没能成功 提示：最下面有代码demo 页面初始化： 目标效果 做法1： 给"更多"绑定一个 v-show=‘show’ 把 this.show 设置为true ，点击"更多"按钮后 在点击事件里面把this.show 设置为false； 结果1： 未成
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
el-tree数据回显
08-31
首先，你需要将你的数据以树形结构的形式传递给 `el-tree` 组件的 `data` 属性。例如，你可以将一个数组作为根节点的子节点传递给 `data` 属性。 以下是一个简单的示例代码： ```html <el-tree :data="tree...
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值