vue 使用递归动态渲染后端返回数据 实现多层列表

最新推荐文章于 2024-07-25 09:37:37 发布
最新推荐文章于 2024-07-25 09:37:37 发布
阅读量641 收藏 8
点赞数 2
文章标签： vue.js 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_48247775/article/details/129206975
版权

我们在写项目时 会遇到要将后台返回数据展示成树形结构 

但数据返回是这样的 

并不能使用 平常使用的v-for 渲染

这个时候我们可以使用 递归  简单来说就是在组件中内使用组件本身

父组件

 创建子组件

在子组件内使用组件本身 

大功告成

 

一个|开发
关注
vue列表渲染
hubertbb3的博客
09-01 320
Vue中的列表渲染 vue中可以使用v-for的方式实现对列表或者多个数据的渲染。如： <ul> <li v-for="item in items"> {{ item.message }} </li> </ul> <ul> <li v-for="(item,index) in items" :key="item.id"> {{ item.message }} </li> </ul&gt
vue使用递归组件实现多级列表
飞翔༒之翼
08-03 460
一、背景需求 在页面上渲染一个多级列表的时候，数据往往也具有多个层级 例如：数组的每个元素都是一个对象，对象中的value可能是一个数组 { "ret": true, "data": { "sightName": "大连圣亚海洋世界(AAAA景区)", "bannerImg": "", "categoryList": [{ "title": "成人票", "children": [{ "title": "成人三馆联票",
vue中递归组件实现多级列表
浮生离梦的博客
01-01 2397
一、递归组件的概念 递归组件： 递归组件简单来说在组件内使用组件本身。这个在vue的项目开发中也是比较常见的。对于一些多级的数据嵌套，如果对于每一层数据都进行for循环嵌套，那会非常繁琐，也很不方便。而如果使用递归组件，就可以一次性解决，嵌套层级简单，可以实现多级列表。 二、递归组件的实现 父组件的data数据 name: 'Home' data () { return { ...
vue3使用递归组件渲染层级结构
最新发布
weixin_42234899的博客
07-25 608
vue3使用递归组件渲染层级结构
vue组件递归(vue 通过 组件递归 实现多级菜单渲染)
远来客的博客
09-17 5057
如果菜单嵌套层数是已知的可以通过 v-for 循环出要渲染的菜单，但是如果我们不知道我们要循环多少层子菜单，那么这个时候 v-for 就不能解决问题了 要实现动态的渲染我们拿到的不知道有几层的菜单数据，有两种解决方案： 操作 dom 去一层一层 添加子菜单（vue 不推荐操作 dom，所以不推荐此方案） 将我们的菜单封装到组件中，通过递归组件实现菜单渲染 先贴一个 demo 图 demo地址：https://download.csdn.net/download/qq_25992675/1285387.
Vue将后台返回的数据导出为Excel表格
weixin_49256675的博客
03-30 4689
Vue将后台返回数据导出Excel表格Vue将后台返回数据导出Excel表格第一步：下载安装第二步：main.js中引入第三步：添加按钮触发导出第四步：处理后台返回的数据（重点，请耐心看完）第五步：验证导出Excel结果 Vue将后台返回数据导出Excel表格 话不多说，先上效果： 第一步：下载安装 npm install vue-json-excel 第二步：main.js中引入 import JsonExcel from 'vue-json-excel' Vue.component('downlo
vue递归组件实现渲染无限级子菜单
qq_44162778的博客
03-04 1272
最开始我的思路就是去写js的递归，琢磨了半天数据是出来了，我不晓得怎么去渲染，噗嗤，说来也尴尬，好在危难之际看见了一位大佬详细解说，一顿操作，哗哗就出来了。 终究还是我太菜。。。。 vue递归组件还是很nice的 首先，常规操作请求后台接口拿到数据（或者定义一个假数据的数组） 这是我数据结构： 父级数组里面有一个变量，这个变量里面的数据就是子组件，同理，这个子组件也有一个相同的变量是子子组件哈。。。。。。 父组件：主要代码（莫忘记components这个子组件哈） 子组件：（子组件全部代码看下图哈） 我
vue3实现不同数据结构渲染不同的UI页面功能
03-06
1.实现难点、重点： （1）数据类型的种类多：decimal、int32、int64、text、bool、enum、struct、array （2）struct结构体非常复杂，考虑的情况多，比如结构体中...（3）UI实现结构体的页面样式麻烦，使用多重递归组件
详解VUE Element-UI多级菜单动态渲染的组件
10-17
本文将详解介绍如何在使用Vue.js和Element-UI框架下实现多级菜单的动态渲染。 ### 多级菜单的概念 多级菜单是一种常见的用户界面组件，用于在导航栏或侧边栏中展示分级目录。它使得用户可以快速定位到所需的内容或...
Vue 多层组件嵌套二种实现方式(测试实例)
08-29
在上面的示例代码中，我们定义了一个 `Itemlist2` 组件，该组件使用递归的方式来渲染一个列表。我们在模板中使用 `v-for` 指令来渲染一个列表，并将每个项作为一个 `Item` 组件的 props 传递给它。这样，我们就可以...
vue 多层对象数据更新 视图不渲染问题
small_fox_dtt的博客
05-11 855
刚开始直接使用（根据下标来修改找到相对应位置修改数据；数据虽然修改成功了；但视图未修改） setRowPath(){ this.list1[this.editIndex].eventLocation=this.temp.eventLocation; this.list1[this.editIndex].referencePath=this.temp.referencePath; this.list1[this.editIndex].radius=this.
vue从后台获取数据生成动态菜单列表
热门推荐
wusq的博客
09-03 1万+
vue前后端分离从后台获取menuList生成动态路由 将目录作为子目录添加到首页下面，可以显示出来，但是第二次点击同一个菜单时，会出现 地址叠加的情况，导致页面不能显示。而且先点击到别的页面也会出现这种情况 解决办法：在获取动态列表的时候，数据里面有url和source，不要去获取source，内层外层循环都获取url，然后在router/index 里面，path改为跟获取的url一样的...
详解——Vue3递归函数功能
TianXuab的博客
08-09 1439
在 Vue 3 中，递归函数是一种在组件中调用自身的技术。递归函数在解决树状数据结构、无限级分类、嵌套组件等情况下非常有用。总之，递归函数在 Vue 3 中通过组件的递归调用来实现，这使得展示嵌套数据结构变得非常简单。这个示例提供了一个基本的框架，你可以根据需求进行适当的修改和扩展。的 Vue 组件，用于展示树状结构的数据项和递归地展示子项。组件来展示树状结构的数据。
vue 渲染树型数据（含树型数据转化为一维数组的方法，包括每个节点的深度和深度列表）
朝阳39的博客
03-13 863
vue 渲染树型数据（含树型数据转化为一维数组的方法，包括每个节点的深度和深度列表）
vue+element表格实现多层数据的嵌套
一个前端的自述
06-23 1万+
今天用element的表格渲染了商城的购物车列表，element的表格之前也用到过，它吧所有的东西都封装好了， 只需要往里面传数据就可以了，通过prop来拿到相对应的字段，非常方便，但是天不尽人愿呐，后台接口返回的数据 是嵌套多了一层，直接上图，后台返回的数据结构 data下面是店铺的名字和id，orderItemList是店铺下面的商品，店铺要显示，商品更要显示，(难受) 这nm嵌套两层，表格拿不出来啊，于是各种想思路，什么里边再套一个表 格，这样会出现空表头，也从网上找了很多方法，都是差.
Vue2实现无限级递归组件渲染
ThinkLess404的专栏
03-22 1362
但后期项目实施去设计时需要同时操作多个组件的的显示切换，就想着做一些常用的布局组件如Tab布局组件（可以切换多个tab页进行布局），分支布局组件（根据配置的条件显示不同的内容），可以把那些子组件放到这个布局组件中渲染，当然布局组件也可以进行嵌套。网上搜索Vue的递归组件渲染示例，通常都是官方示例类似的树组件渲染，其递归渲染的也是其组件本身。但本人的需求是递归渲染一类组件。比如：一个画布下有文本组件，Tab布局组件，Tab布局组件中又包含了分支布局组件，分支组件中又嵌套了Tab布局组件，文本组件等。
vue2 - 递归组件解决后管平台多级菜单的渲染
m0_74417967的博客
07-05 167
来源：硅谷甄选第40讲。
Vue---列表渲染
gaoqiandr的博客
05-12 2234
本文主要介绍Vue中的列表渲染的基本用法
实现Vue无限级权限树组件的递归方法和功能解析
资源摘要信息:"该ZIP压缩包内包含一个名为‘vue自定义无限级权限树组件’的Vue.js项目，该项目实现了无限级权限树的可视化组件，具有勾选节点和同步更新子节点的功能。" 知识点详细说明： 1. 递归组件和无限层级...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值