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

最新推荐文章于 2024-08-12 22:52:42 发布
最新推荐文章于 2024-08-12 22:52:42 发布
阅读量1.2k 收藏 1
点赞数
CC 4.0 BY-SA版权
文章标签： javascript 后端 ViewUI
原文链接：http://www.cnblogs.com/jun-qi/p/11451813.html
本文介绍了一种处理不确定维度的表格头部数据的展示方法，通过定义并递归组件实现实时更新和显示，避免了硬编码循环带来的局限性。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

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

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

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

以下为效果图:

 

 以下为数据结构:

 

 

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

 

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

 

 使用位置:

 

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

 

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

vue+elementUI组件递归实现可折叠动态渲染多级侧边栏导航
是日前端
04-17 4256
早就实现了功能，但是发现点击的时候，选中的菜单项背景色会变白，周五时候仔细观察了一下，发现并不是调整样式的问题，而是选项没有被选中，于是好好研究了一下组件递归这块，总结记录一下心路历程 一、概念 递归：递归其实说白了，就是自己调用自己，样子就像是套娃一个套一个的，小时候玩过一个游戏汉诺塔就是利用的递归原理： 函数递归：函数利用函数名还调用自己 组件递归：所以组件递归利用的是vue组件中的name属性来实现的 二、需求 实现可折叠动态渲染多级侧边栏导航 三、分析 1、观察到侧边栏导航是一级一级的，第二.
vue权限控制-- 路由鉴权，菜单动态渲染，自定义指令渲染按钮，递归处理数据
weixin_43993776的博客
05-17 1314
main.js中的路由守卫if(!// console.log("不需要登录")next()}else{// console.log("需要登录");next();store.state.permissionList) { // 登录过了，没有权限列表， 请求获取权限列表next({})})}else{console.log("登录过， 已经有权限列表了")if(to.path!next();}else{})
vue 多级嵌套示范
05-03
NULL 博文链接：https://lanyan-lan.iteye.com/blog/2428319
vuejs学习--递归组件(树型表格分享)
weixin_30800987的博客
11-17 450
前言 　　学习vue有一段时间了，最近使用vue做了一套后台管理系统，其中使用最多就是递归组件，也因为自己对官方文档的不熟悉使得自己踩了不少坑，今天写出来和大家一起分享。 递归组件 　　组件在它的模板内可以递归地调用自己，只有当它有name选项时才可以。在官网这句话就是关键定义组件是一定要有name属性。按照这个思路我们开动吧。 　　实现最终效果图： 　　　　 　　模拟数据...
vue.js多层嵌套列表渲染
银鞍照白马的博客
12-25 6077
简单利用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 795
vue3使用递归组件渲染层级结构
Vue 组件实现嵌套、递归显示的例子
qq_30049249的博客
08-12 221
https://andi.cn/page/621658.html
vue 能一层层展开的表格
最新发布
09-26
Vue.js 可以通过数据绑定和组件化的能力轻松地实现表格的层层展开。通常，我们会使用 Vue 的父子组件或者递归组件来构建这种动态表格。下面是一个简单的例子： 1. **父子组件**：可以创建一个基础表格组件，包含行...
使用vue实现的树形结构组件BasicTree
zhiy9ong的博客
01-11 3709
tree组件的经验总结     最近项目中有了树形结构的功能需求，要求能够将分类信息使用树形结构展示、新增节点、删除节点、选择节点等功能，项目中使用了iview框架作为视图层框架，iview本身也提供了树形结构示例，但是其ui风格并不符合设计稿需求，没办法一开始的想法是请求外援，网上找到了jquery的著名插件ztree插件，其功能非常强大完全符合项目的功能性需求，但是由于项目是基于vue技术构...
vue jsx 封装Table 表格+Tree 树形控件
老司机的后备箱
09-29 1688
通过表格展示树的层级，可通过对树的勾选对每一个界面的dom元素进行控制，控制程度可精确到组件/标签整理了一套《前端大厂面试宝典》，包含了HTML、CSS、JavaScript、HTTP、TCP协议、浏览器、VUE、React、数据结构和算法，一共201道面试题，并对每个问题作出了回答和解析。有需要的小伙伴，可以点击文末卡片领取这份文档，无偿分享部分文档展示：文章篇幅有限，后面的内容就不一一展示了有需要的小伙伴，可以点下方卡片免费领取。
vue实现el-table下采用递归实现自行添加子级，包括排序、编辑、删除
liqic的博客
02-29 1212
el-table中，给元素添加子级（加排序、编辑、删除功能）
Vue2 + Element UI 封装 Table 递归多层级列表头动态
FitnessSnail的博客
05-30 1136
【代码】Vue2 + Element UI 封装 Table 递归多层级列表头动态。
VUE递归树形实现多级列表
qq_42177117的博客
09-08 2773
VUE递归树形实现多级列表 什么是递归? 简单来说就是在组件中内使用组件本身。 为什么要用递归？ 如果出现很多下拉菜单，同级，分级数据，层级混杂，可以使用v-for的嵌套循环不就完事了。对，没毛病这样的话也可以做，但是如果数据又多加了【很多】级分类呢；使用v-for也能实现，但是代码可能会比较杂或混乱！也不适合后期的维护，这个时候呢，我们就可以使用我们所说道的【递归组件 】了，使用递归组件，无论你的数据怎么增加我们都不用改动我们的代码。 先看效果： 1、创建两个文件 父组件tree.vue 子组件tr
vue递归以及示例
weixin_53954018的博客
12-09 1735
递归是一种在函数中调用自身的编程技巧。通过递归，函数可以将一个问题分解为更小的子问题，并且在达到基本情况（终止条件）时停止递归。递归在解决某些问题时非常有用，特别是那些可以被分解为相同类型的子问题的情况。2.例如递归级联去掉空的children。传入相对应的属性以及数据源。3.例如级联禁用某一层级。
Vue中组件的递归
程先生的博客
03-07 223
　　先来说下需求，就是一个表单，会有树形结构一样，会有子表单，表单显示什么内容是后台通过接口数据来确定的；这个时候就和树形结构一样，肯定会有子组件的递归；这次是自己第一次写递归，遇到了三个问题记录下； 1、第一个问题就是，循环表单；看下图 然后这里的数据返回的是这样的： 说明下数据字段的含义：name属性算是表头，然后里面的valueType代表的是各种不同输入框；比方说上面的7代表的是普...
Vue组件自我调用，实现递归展示
HELLO WORD
11-17 2145
更多文章可关注我的个人博客：https://seven777777.github.io/myblog/ 相信大家开发过程中都曾遇到过以下这种类型的数据： dataList:[ { name:'名称1', children:[ { name:'名称1-1' children:[ { name:.
Vue项目详情页 - 使用递归组件实现详情页列表
王依米
11-27 6036
此时list已经显示出来 如何使用递归组件实现详情页列表 父组件Detail.vue里的父组件 这时分类就会显示出来 然后布局样式 一级列表项已经显示出来了,然后如何显示二级列表项呢 这里的二级关系.自己调用他自己的这个组件 但是没有层级关系 这时是三级列表 但是头部景点并没有完全盖住下方的字体 这是list.vue ...
vue 循环 递归组件_vue使用递归组件实现多级列表
weixin_29053577的博客
12-23 1570
一、背景需求在页面上渲染一个多级列表的时候，数据往往也具有多个层级例如：数组的每个元素都是一个对象，对象中的value可能是一个数组{"ret": true,"data": {"sightName": "大连圣亚海洋世界(AAAA景区)","bannerImg": "","categoryList": [{"title": "成人票","children": [{"title": "成人三馆联票"...
vue el-table实现递归嵌套
Missxu1895的博客
07-20 2414
vue el-table 递归组件
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值