解决el-tree渲染不出后端数据的问题

已于 2024-03-08 11:09:44 修改
阅读量2.1k 收藏 7
点赞数 2
分类专栏： Vue 一些踩坑笔记 文章标签： vue.js 前端 javascript 经验分享 elementui 笔记 学习
于 2022-10-31 14:57:09 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Vivien_CC/article/details/127615593
版权

今天踩了el-tree的坑！！！花了好多时间找不到原因，最后终于解决了！！！！

（鸣谢原文大佬：http://t.csdn.cn/0DxMg）

首先看一下接口返回的数据结构形式，要展示的名字的字段是不是label，不是的话要在代码里设置这个，注意，props前面一定要加绑定标识符！！！！然后下面的配置，就写你要展示的字段名，默认是label。

我想让后端返回的categoryName字段取代label，所以就这么写。

 

写上defaultProps来对应之后，问题解决！！！！

小白探索世界欧耶！~
关注
专栏目录
el-tree后续需求之解决（更新节点数据、默认选中节点）
Bonjourjw的博客
11-30 1万+
一 背景        el-tree的数据来源，通过后台获取，之前考虑由于刷新数据造成页面闪动的问题，处理方法为不实时刷新el-tree的数据（只考虑到了添加）。         添加一个treeNode时，成功后，调用后台的getTree重新获取最新数据newData，遍历找到新增的目标对象，将其获取作为当前选中节点的子Node。这样没有刷新整棵树，保证页面不会晃动。 二 引发问题：...
Element的el-tree控件后台数据结构的生成以及方法的抽取
11-21
最近用到了el-tree控件，主要是数据的格式，按照官网的数据格式来就可以显示节点的树形结构了。 代码参考很多 这里给出一个比较好的链接：https://www.jb51.net/article/181990.htm 代码说明在注释里写的很详细...
解决Element 树形菜单Tree组件能拿到数据，但是组件不渲染问题
ddx2019的博客
07-27 7010
一、问题描述 我左侧的树形菜单和弹框中的格式一样，组件也是一样的，左侧的树形菜单能渲染出来，但是弹窗中的树形菜单并未渲染。 代码如下： <template> <comn-tree :treeList="treeList" @handleNodeClick="handleNodeClick" @handleRightClick="handleRightClick" @handleNodeEx
解决el-select无论如何都没办法显示数据问题
最新发布
m0_74545388的博客
07-15 580
设置css，结果可以显示了，如果小伙伴们el-select无法回显数据，可以试一下这个方法，看看是不是莫名其妙隐藏了，但愿这个方法能对你们有效。
elementUI el-table tree获取数据后不渲染的问题
FLEX_TT的博客
07-19 1940
@expand-change绑定一个从接口获取子级的方法。 row.splitChildren=res.data.data this.tableData=JSON.parse(JSON.stringify(this.tableData)) 深拷贝
【初次使用vue3 、element plus 渲染el-select 出现渲染不成功的问题】
m0_56553975的博客
01-12 893
初次使用vue3 v-for 渲染的时候不生效
el-select选择了、输入框没有渲染数据、数据回显不上去
热门推荐
云
09-18 2万+
【代码】el-select选择了、输入框没有渲染数据、数据回显不上去。
element:tree:default-expand-all属性无法动态渲染
xiaojie的博客
10-18 1336
element:tree:default-expand-all属性无法动态渲染
el-tree-select:基于el-select和el-tree改造的树形选择器（下拉框）组件
05-10
5. **API接口**：为了实现与后端数据的交互，el-tree-select可能提供了获取选中值、设置选中值等API接口，方便开发者在业务逻辑中使用。 6. **事件处理**：组件通常会触发一些事件，如节点选中、节点展开、节点加载...
element el-tree组件的动态加载、新增、更新节点的实现
10-15
在动态加载节点数据时，使用了组件内提供的 api typeList 来异步获取数据，并通过 resolve 方法将数据传回 el-tree 组件，从而更新树形控件的显示。 新增节点是指在树形控件中添加一个新的节点。通常，我们会添加一...
Vue拿到后端返回的List，渲染出element-tree树结构
01-08
element-tree 增加节点的方法 如果在模板中定于了 的数据源如下： 那么在当前Vue组件实例中定义并初始化数据源 export default { name: 'Tree', data(){ return{ nodeData: [ { id:999, labelName:root, ...
使用Vscode写了前端是用来el-tree来做树形控件但是页面不显示数据
qq_39965077的博客
05-26 498
使用Vscode写了前端不显示树形控件
element Plus el-tree-select load 懒加载时数据不回显问题
byking818的博客
04-12 2339
element Plus el-tree-select 懒加载 视图不更新
使用el-tree-transfer不显示label的坑
Moria
04-25 3752
先贴一下GIT链接1：先贴一下GIT链接2：案例上有两处错误需要修改3：还有个巨坑就是不显示label的问题4：最终效果 1：先贴一下GIT链接 el-tree-transfer 2：案例上有两处错误需要修改 3：还有个巨坑就是不显示label的问题 4：最终效果 ...
mvc 路由增加文件夹名_vue路由及组件
weixin_39724004的博客
11-23 308
继续搞Vuejs的前端，在之前我已经在Windows系统上配置好了一个初始的vue-cli页面，目前我需要做的工作，就是开始写代码，学习增删页面，加入输入框按钮什么的。另外希望能尽快学会如何通过API取数据，感觉上，能学会这些东西，就能达到一项技术2/8原则里边那个8了。为了实现这个目的，我上网看了一系列的博客教程，照着抄了很多代码，最后都没办法用。我怀疑原因可能是大家用的版本不一样，感觉上Vue...
解决el-tree 点击修改弹窗回显数据时 对应节点没有渲染勾选
weixin_49393290的博客
11-16 1054
首先看官方文档，这个选中的节点。 是使用default-checked-keys这个方法 然后我写点假数据进去看看default-checked-keys这个方法奏不奏效 什么是假数据？ 填一些这些数据 然后您看选中的时候选择到的机构就是您刚刚输入的这两个假数据 说明default-checked-keys这个方法是正确的 所以现在您这么写 然后在data中声明 然后在js方法里 就可以了 ...
vue3.0项目中，成功获取后端数据，却发现渲染失败，页面还是没数据？
coder184的博客
02-11 1682
因为响应性不存在的情况下，HTML不会检测任何变量&常量的变化，即使它真的变化了，但不会进行检测，仍然使用最开始的值，所以渲染失败，页面没有数据。注：el-tree是element-plus的树形组件，无须过多关注，利用其它组件完成视图部分即可，建议后续再深入。很明显，ref更简洁，同时reactive，对响应性的维持，更加苛刻，需要借助push等函数。解决的办法：赋予响应性即可，使用ref()或者reactive()。渲染失败的原因，是你声明的东西，不具备响应性，或者响应性丢失。
el-tree动态设置是否全部展开属性，值已经改变，但是没有展开或折叠
m0_50981596的博客
04-29 999
el-tree动态设置是否全部展开属性，值已经改变，但是没有展开
el-tree vue 获取后端数据
05-18
要使用 el-tree 和 Vue 获取后端数据，您需要做以下几个步骤： 1. 在 Vue 中定义一个 data 属性，用于存储从后端获取的数据。 2. 在 el-tree 组件中，将 data 属性设置为上一步中定义的 data 属性。 3. 在 Vue 的...
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值