Vue递归组件实现层层嵌套显示数据

最新推荐文章于 2024-10-29 15:07:37 发布
转载 最新推荐文章于 2024-10-29 15:07:37 发布 · 1.2k 阅读 · 1 ·
CC 4.0 BY-SA版权
原文链接：http://www.cnblogs.com/jun-qi/p/11451813.html
文章标签：

#javascript #后端 #ViewUI

本文介绍了一种处理不确定维度的表格头部数据的展示方法，通过定义并递归组件实现实时更新和显示，避免了硬编码循环带来的局限性。

问题来自朋友...记录一下

需求是表格头部后端返回的数据中是不确定的 n维数据,表头存在于 listVo 字段中,如何实现层层显示呢?

温馨提示,以下内容为5张大图,请打开 WIFI 享用...

以下为效果图:

 

 以下为数据结构:

 

 

解决方法一:最笨的方法,有几层就循环几层,你们愿意用就用啊,我要讲新方法 ^-^

 

 优秀的解决方法二:定义一个组件,递归它 = =.

 

 使用位置:

 

 是不是很奇特,喜欢就留言吧 ^-^

 

转载于:https://www.cnblogs.com/jun-qi/p/11451813.html

Vue 实战：优雅实现无限层级评论区，支持“显示全部”分页递归加载
m0_69779872的博客
08-29 359
在现代 Web 应用中，评论功能是用户互动的核心。如何实现一个支持无限层级回复、点击“显示全部”按需分页加载的评论区，是前端开发的常见挑战。本文将使用 Vue 3（选项式 API 便于理解）和递归组件，手把手教你构建一个结构清晰、性能良好、用户体验优雅的评论系统，彻底解决数据嵌套、分页加载和状态管理的难题。
vue+elementUI组件递归实现可折叠动态渲染多级侧边栏导航
是日前端
04-17 4285
早就实现了功能，但是发现点击的时候，选中的菜单项背景色会变白，周五时候仔细观察了一下，发现并不是调整样式的问题，而是选项没有被选中，于是好好研究了一下组件递归这块，总结记录一下心路历程 一、概念 递归：递归其实说白了，就是自己调用自己，样子就像是套娃一个套一个的，小时候玩过一个游戏汉诺塔就是利用的递归原理： 函数递归：函数利用函数名还调用自己 组件递归：所以组件递归利用的是vue组件中的name属性来实现的 二、需求 实现可折叠动态渲染多级侧边栏导航 三、分析 1、观察到侧边栏导航是一级一级的，第二.
vue 多级嵌套示范
05-03
NULL 博文链接：https://lanyan-lan.iteye.com/blog/2428319
vuejs学习--递归组件(树型表格分享)
weixin_30800987的博客
11-17 467
前言 　　学习vue有一段时间了，最近使用vue做了一套后台管理系统，其中使用最多就是递归组件，也因为自己对官方文档的不熟悉使得自己踩了不少坑，今天写出来和大家一起分享。 递归组件 　　组件在它的模板内可以递归地调用自己，只有当它有name选项时才可以。在官网这句话就是关键定义组件是一定要有name属性。按照这个思路我们开动吧。 　　实现最终效果图： 　　　　 　　模拟数据...
vue.js多层嵌套列表渲染
银鞍照白马的博客
12-25 6089
简单利用vue实现多层嵌套列表渲染效果图如下 效果图如下 html部分 <ul> <template v-for="(item, index) in wjList"> <li class="voteList-li" v-for="newItem in item" v-on:click="addClassFun(index)">
vue3使用递归组件渲染层级结构
weixin_42234899的博客
07-25 880
vue3使用递归组件渲染层级结构
vue 循环不确定层数_编写更好的VueJS v-for循环的6种技巧
weixin_39812533的博客
01-14 1111
在VueJS中，v-for 循环是每个项目都会使用的东西，它允许您在模板代码中编写for循环。在最基本的用法中，它们的用法如下 {{ product.name }} 但是，在本文中，我将介绍六种方法来使你的 v-for 代码更加精确，可预测和强大。1.始终在v-for循环中使用key首先，我们将讨论大多数Vue开发人员已经知道的常见最佳做法——在 v-for 循环中使用 :key。通过...
UniApp中递归组件实现树形结构渲染
示例中定义了一个名为`recursive`的自定义组件，这个组件的关键在于它可以在自己的模板内部引用自己，这正是Vue递归组件的本质特征。为了防止无限递归导致栈溢出，必须设置明确的终止条件——通常就是检查当前节点...
vue权限控制-- 路由鉴权，菜单动态渲染，自定义指令渲染按钮，递归处理数据
weixin_43993776的博客
05-17 1366
main.js中的路由守卫if(!// console.log("不需要登录")next()}else{// console.log("需要登录");next();store.state.permissionList) { // 登录过了，没有权限列表， 请求获取权限列表next({})})}else{console.log("登录过， 已经有权限列表了")if(to.path!next();}else{})
vue 能一层层展开的表格
09-26
Vue.js 可以通过数据绑定和组件化的能力轻松地实现表格的层层展开。通常，我们会使用 Vue 的父子组件或者递归组件来构建这种动态表格。下面是一个简单的例子： 1. **父子组件**：可以创建一个基础表格组件，包含行...
vue中递归组件实现多级列表
浮生离梦的博客
01-01 2545
一、递归组件的概念 递归组件： 递归组件简单来说在组件内使用组件本身。这个在vue的项目开发中也是比较常见的。对于一些多级的数据嵌套，如果对于每一层数据都进行for循环嵌套，那会非常繁琐，也很不方便。而如果使用递归组件，就可以一次性解决，嵌套层级简单，可以实现多级列表。 二、递归组件的实现 父组件的data数据 name: 'Home' data () { return { ...
【vue】13.深入理解递归组件
最新发布
m0_59873661的博客
10-29 1720
递归组件是指在一个组件的模板中直接或间接地调用自身。这种组件常用于构建具有层级结构的数据，如树形控件、菜单、评论系统等。递归组件的关键在于它有一个终止条件，以防止无限循环调用。递归组件是Vue.js强大功能之一，它为处理层级和嵌套数据提供了优雅的解决方案。通过理解和掌握递归组件的应用，我们可以构建出更加复杂和灵活的界面。在实际项目中，合理使用递归组件不仅可以提升开发效率，还能让代码更加简洁和易于维护。
vue左侧菜单，树形图递归实现
热门推荐
baidu_38305286的博客
04-26 1万+
最近在做一个后台管理系统，左侧菜单需求是这样的，可以多层，数据由后台传递。先说说遇到的坑，由于是子父组件，当时传递使用的是子父组件的传递，但是这时候只能获取到第一层的数据，第二层往后获取不到数据，踩了一下午坑以后才知道，子组件使用了递归组件，这时候他已经不能往父组件传递了，子传父，只能逐层传递这时候已经隔层了，所以我使用了非子父组件传递，两个页面都引入bus.js，这里不懂的请百度。bus.jsi...
html如何实现多级列表,【Vue】vue递归组件实现多级列表
weixin_39640773的博客
06-11 750
【Vue】vue递归组件实现多级列表信息的分类展示列表这次我们主要是实现一个信息的分类展示列表存在二级/三级的分类，如下如所示：看到这个很多人会想到这个实现起来很简单啊，来个嵌套循环不就完事了。对，你说的没错，事实就是这样简单。那么就先来看看这么简单的列表怎么实现的，然后这个方案的劣势在哪里。首先看看我们的数据格式list: [{name: "经济",children: [{name: "如家"}...
vue html模板递归,vue使用递归组件实现多级列表
weixin_35964164的博客
06-20 1235
一、背景需求在页面上渲染一个多级列表的时候，数据往往也具有多个层级例如：数组的每个元素都是一个对象，对象中的value可能是一个数组{"ret": true,"data": {"sightName": "大连圣亚海洋世界(AAAA景区)","bannerImg": "","categoryList": [{"title": "成人票","children": [{"title": "成人三馆联票"...
Vue组件自我调用，实现递归展示
HELLO WORD
11-17 2186
更多文章可关注我的个人博客：https://seven777777.github.io/myblog/ 相信大家开发过程中都曾遇到过以下这种类型的数据： dataList:[ { name:'名称1', children:[ { name:'名称1-1' children:[ { name:.
vue使用递归组件实现多级列表
飞翔༒之翼
08-03 543
一、背景需求 在页面上渲染一个多级列表的时候，数据往往也具有多个层级 例如：数组的每个元素都是一个对象，对象中的value可能是一个数组 { "ret": true, "data": { "sightName": "大连圣亚海洋世界(AAAA景区)", "bannerImg": "", "categoryList": [{ "title": "成人票", "children": [{ "title": "成人三馆联票",
vue实现树形标题（组件自递归）
qq_45428582的博客
07-28 255
被问道了，当时只是简单设计了一下，type等都没加上，重新实现了一下。 效果 // 数据结构 nodes: [ { label: 'title 1', content: 'hello world', children: [ {
用Vue.js递归组件构建一个可折叠的树形菜单
weixin_30381317的博客
12-24 791
在Vue.js中一个递归组件调用的是其本身，如： Vue.component('recursive-component', { template: `<!--Invoking myself!--> <recursive-component></recursive-component>` });...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值