Element UI Tree 树形控件，数据回填存在重大bug，附带解决方式

最新推荐文章于 2024-06-20 16:40:42 发布
最新推荐文章于 2024-06-20 16:40:42 发布
阅读量3.9k 收藏 2
点赞数 2
分类专栏： Element UI 文章标签： vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lg993372246/article/details/108345575
版权

bug复现地址：https://codepen.io/sampsonliu/pen/vYXboZm

问题描述：

异步加载数据，getPositionTreeByPost是请求数据接口，default_checked_keys是回填的节点ID，default_expanded_keys是回填展开的节点
在这里插入图片描述
回填数据
在这里插入图片描述
渲染结果
在这里插入图片描述
默认选中的节点是20141119、3000564524591276，结果渲染出来，三个节点都选中了

解决方案：

组件默认给空值
在这里插入图片描述
回填数据不变
在这里插入图片描述
异步加载数据的时候，再回填，使用setTimeout的目的是等待组件异步加载数据直到渲染完成在这里插入图片描述
渲染结果
在这里插入图片描述

秦时明月之安康
关注
  • 2
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
关于加载表格及模态框数据回填的Bug
qq_44544363的博客
07-08 284
关于加载表格及模态框数据回填的Bug …………………………………………………………………………………………………………… 开发工具与关键技术：Visual Studio 2015 C# 作者：林敏静 撰写时间：2019年7月5日 …………………………………………………………………………………………………………… 我又双叒叕来讲Bug啦，最近一直在做项目的调试，一直出Bug就一直修Bug，虽然有时...
element-ui 实现树的半选中填充数据
小棉的博客
03-15 3451
element-ui 实现树的半选中填充数据 <el-tree :data="treeData" node-key="id" default-expand-all show-checkbox ref="tree" :expand-on-cl
elemenUI树控组件回填数据的bug
qq_49899911的博客
12-20 159
elemenUI树控组件回填数据的bug 位于同一个父节点下的子节点，选了其中一个，结果回填的时候，该父节点下的所有子节点全部被动选中 问题截图： 我是通过node来设置的，无论你得到的树结构数据，还是非树结构数据，只要把相对应的节点遍历后放进去就好了 例子： 1 //请求获得的数据 data= [{ id: 1, label: '一级 1', children: [{ id: 4, labe
15.树形虚拟列表实现（支持10000+以上的数据）el-tree（1万+数据页面卡死）
最新发布
zifengningyu的博客
06-20 762
使用vue-easy-tree来实现树形虚拟列表，注意：vue-easy-tree需要设置高度。支持与element-ui完全相同的主题样式更换，提供与element-ui相同的图标供选用。如果不引入样式文件可以不安装（sass-loader以及node-sass）（自己安装的时候失败了，所以选择不引入样式文件）如果使用element-ui的默认属性代码为。
el-tree组件展示节点过多时造成页面卡顿、奔溃的解决办法
m0_54850825的博客
03-12 7565
解决el-tree组件展示节点过多时造成页面卡顿、奔溃 前几天测试提了个BUG，文件列表展示5w个文件页面会卡顿甚至奔溃。 项目用的是vue+element-ui框架，我是使用el-tree进行渲染文件列表的。 参考网上使用virtual-scroll-list插件与el-tree源码写成一个新组件。virtual-scroll-list可以只渲染页面呈现部分的节点，这样就不会造成卡顿了，源el-tree是直接将5w个节点直接渲染到页面，导致页面奔溃。 这是使用virtual-scroll-list插件与e
Element Ui Tree组件实现增、删、改、查、拖拽节点 的树形结构
qq_45904018的博客
07-07 4783
如： 获取所有权限，匹配改个节点（角色）所包含的权限，修改时默认勾选，List_id 该角色拥有权限的id的集合！2，组件中 :default-checked-keys="List_id" （讲述的可能稍有复杂，代码有注释可以看看！1，其中点击展开/折叠看个人需求；这里就直接展示代码了！（自己引入相关插件）这个是图标不展示问题。
elementui树形组件的自定义增删节点
木头房子的格子铺
01-03 3万+
elementUI树新增和删除的功能 vue项目 elementui树 el-tree新增和删除节点 elementui新增和删除节点树 el-tree新增和删除节点图标 vue和elemenui树
vue + element ui工程，Tree 树形控件展示指定值，比如name
03-09
在Vue.js框架中，Element UI库提供了一套丰富的UI组件，其中包括Tree树形控件。这个控件在数据展示和管理中非常常见，比如组织结构、文件目录等场景。本项目是一个基于Vue和Element UI的工程，专注于演示如何在Tree...
element-ui树形控件后台返回的数据+生成组织树的工具类
01-19
开发项目的时候遇到需要在表单中选择参会人员，根据不同部门下选择不同的人，在element-ui中有树形控件能满足这种情况，后台封装数据记录一下。  封装格式：  返回数据格式：  接收数据的pojo类： 2018年4月12...
element-ui tree树形控件:default-checked-keys 设置空数组 默认还是选中状态问题
01-20
在这个问题中，开发者遇到了一个关于`default-checked-keys`属性的问题，即当尝试将该属性设置为空数组时，树形控件的节点依然保持选中的状态，这与预期的行为不符。 `default-checked-keys`属性是Element UI Tree...
vue.js element-ui tree树形控件改iview的方法
10-18
主要介绍了vue.js element-ui tree树形控件改iview的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
Element-ui树形控件el-tree自定义增删改和局部刷新及懒加载操作
10-14
Element-ui的el-tree组件是Vue.js开发中常用的一个树形控件，它提供了丰富的功能，如懒加载、自定义增删改以及局部刷新等。在本文中，我们将深入探讨如何利用这些特性来实现一个功能完善的树形控件。 首先，让我们...
element ui tree树形控件可编辑，新增及删除
weixin_45952668的博客
12-30 6674
我们可以在element ui 官方文档上看到提供的新增及删除方法，大多数人都想要它的可编辑状态，自己优化了一下，写了关于树形控件tree，新增顶级节点及当前节点可编辑删除操作，以及子节点的新增 效果图如下所示 代码如下： <template> <div> <el-button class="addBtn" type="primary" size="small" @click="openAdd
vue+element UI实现树形表格带复选框实例
xiaoyueyue_2017的博客
03-11 2227
使用的技术为element-ui，在此基础上，为每一行加上复选框 本次所实现的代码。 <template> <div class="app-container"> <div class="role-cont clearfix"> <!-- 全选框 --> <el-checkbox class="check-page-all" v-model="checkPageAll" @change="checkPageAll
vue--vue+ElementUI实现动态树+数据表格+分页
鑫709的博客
05-11 2227
前提在上一篇博客之后，继续来写
【Vue项目实战8】资源树el-tree的input形式【Element UI】==＞ 添加分级图标样式==＞ 选中节点显示操作栏（新建 修改 删除）==＞弹框新增 删除
Sabrina_cc的博客
06-22 1983
上一篇博客我们已经介绍过el-tree样式修改的一种了，这篇博客我们继续整理另一种el-tree样式的优化（1）CSS分层图标和分层样式（以五层为最大）（2）选中节点展示【操作栏】包含：新增子节点，修改当前节点，删除当前节点（3）选中节点 == 修改时回显选中节点和父节点；新增时展示当前节点；（4）新增一级节点（5）父节点使用若依自带的treeselect组件...
Element-ui树形控件el-tree自定义增删改和局部刷新及懒加载
十年树人的博客
11-19 1万+
vue-cli项目树形控件：一级节点为本地节点，默认展开一级节点，增删改后局部刷新数据。同级拖拽。
基于Element-UI的组件改造的树形选择器（树形下拉框）
热门推荐
知行合一，跬步致远
03-18 6万+
前言：由于做项目需要一个树形选择器，项目用的也是element-ui框架，然而它自带的选择器组件没有树形选项，又不想引入其他的框架组件，于是自己利用el-select和el-tree改造了一个，感觉还挺好用的，就封装成了一个组件，如下图： element-ui的el-select组件的选项只能是列表形式： 改造后的树形选择器： 简介：此树形选择器组件是基于elment-ui框架的e...
element-ui table树结构 增删查改+全选 踩坑
qq_32439381的博客
05-28 2317
前提：项目表格是树结构，增删查改不能刷新整个表格，因为官网关于树结构表格的方法比较少，所以踩坑分享下 一、关于全选 坑：树结构里面它只勾选第一层的数据，子数据都是没有勾选的 解决方法：@select-all=“selectAll” 写个方法自己全选....不过这也是有坑的，这种方法只能在一次性拿到tableDatad的情况下使用。我试了异步加载树结构好像没拿到tableData，所以不能进行全选 代码： <el-table ref="table" :data="tableData"
element ui Tree 树形控件
05-29
在 Element UI 中，Tree 树形控件有多种使用方式，包括普通树、可复选树、可拖拽树、异步加载树等等。它提供了丰富的 API 和事件，可以方便地实现展开、折叠、选中、禁用等功能。 下面是 Element UI Tree 树形控件...
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值