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

最新推荐文章于 2022-11-17 10:42:38 发布
最新推荐文章于 2022-11-17 10:42:38 发布
阅读量1.1k 收藏 1
点赞数
文章标签： javascript 后端 ViewUI
原文链接：http://www.cnblogs.com/jun-qi/p/11451813.html
版权

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

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

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

以下为效果图:

 

 以下为数据结构:

 

 

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

 

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

 

 使用位置:

 

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

 

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

weixin_30576827
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue 循环不确定层数_编写更好的VueJS v-for循环的6种技巧
weixin_39812533的博客
01-14 991
在VueJS中，v-for 循环是每个项目都会使用的东西，它允许您在模板代码中编写for循环。在最基本的用法中，它们的用法如下 {{ product.name }} 但是，在本文中，我将介绍六种方法来使你的 v-for 代码更加精确，可预测和强大。1.始终在v-for循环中使用key首先，我们将讨论大多数Vue开发人员已经知道的常见最佳做法——在 v-for 循环中使用 :key。通过...
vue+element表格实现多层数据的嵌套
YYYY77777的博客
05-16 2359
本来想着让后端在list里面多返回一个id,就不用这么麻烦要循环嵌套，后端说没有id,让前端直接循环，不用多说直接上代码。后台接口返回的数据是嵌套多了一层，直接上图，后台返回的数据结构。
解锁新技能：vue如何渲染嵌套数据递归展示
票票的博客
07-16 1270
数据结构如下： data: { return { lists: [{ name: '1', children: [{ name: '11', children: [{ name: '111', children: [{ name: '1111' }] }] }] }, { name: '2', children: [{ name: '22', }, { name: '22
vue递归深拷贝
wang_zhiwei0728的博客
11-17 297
vue递归深拷贝。
vue 实现组件递归（嵌套自身）
HHH917的博客
11-05 5687
vue 实现组件递归 主要使用到了 组件中的name, 当我们设置了组件的name，组件递归调用自身使用的组件名为name； 例子 // 递归组件 demo.vue <template> <div> <div v-for="(item, index) in treeData" :key="index"> <p>{{ item.title }}</p> <div class="children" v-if="
VUE 3层嵌套数据展示
happygirlnan的专栏
09-03 3353
因设计要求这种样式，最后一层横着显示，着实把我难到了。本来想从网上找现成的插件，可是都没有这种样式的。Canvas要计算，我这种懒人想出以下这种方式，但是只做出了3层。如有大神能不吝赐教,我感激不尽。 效果： 代码：时间紧张，代码写的比较粗糙。 &lt;template&gt; &lt;div style="position:relative;width:100%;height...
antdesign vue 2.0 递归菜单_Vue 和递归组件
weixin_39788451的博客
11-25 1000
有人说递归很难理解，也有人不这么认为。递归函数简单的定义是：一个自调用函数，这意味着它将在执行的某个时刻调用自己。从理论上讲，递归是一种需要两个属性的行为：结束点：停止递归的情况一组规则：负责将所有的操作减少到结束点咱们无法决定哪一个更重要。如果没有结束点，递归将成为一个无限循环，但是如果一组规则就不能实现期望的行为，所以两者都存在才能使它正常工作。递归和 Vue 组件在 Vue 中，递归非常有用...
Vue2递归组件实现树形菜单
11-26
今天看了老长时间递归组件，官方给的教程太简便了，根本看不出到底怎么用。于是自己查网摸索了一下，这儿只把核心思想写出来。 效果如下图，点击后打开二级菜单，再点击后打开三级。 //js //引子 //思想：当v-if=...
Vue递归组件+Vuex开发树形组件Tree--递归组件的简单实现
10-17
</script><style scoped> .tree-menu { // 自定义样式 } 在这个简单的递归组件`TreeMenu.vue`中，我们接收两个属性：`label`用于显示节点的名称，`nodes`是一个数组，包含了当前节点的所有子节点。在模板中，我们...
vue递归组件实战之简单树形控件实例代码
10-16
在Vue.js中，递归组件是一种能够自我调用的组件，常用于构建复杂的数据结构，如树形控件。在本实例中，我们将探讨如何利用Vue递归组件创建一个简单的树形控件。 1. **递归组件的概念** 递归组件是Vue组件的一种...
vue 循环 递归组件_Vue.js组件应用与嵌套数据递归组件案例
weixin_31299543的博客
12-23 378
本篇文章主要讲的是嵌套数据递归展示的应用，因为它属于组件应用，so，标题就这样写了，也顺带讲讲组件的通用应用。vue的组件运用得好，可替代任何模板插件，甚至做得更好。其它如模板、数据绑定就不说了，上官网看个几分钟就会了。但是对于组件应用以及组件的高级应用(递归)，会让很多人理解起来比较费劲，也讲讲比较容易入坑的地方。众所周知，vue的初始化是这样的(附常用初始属性名)：var vue = new ...
vue 循环 递归组件_Vue一个案例引发的递归组件的使用
weixin_30864831的博客
12-23 215
今天我们继续使用 Vue 的撸我们的实战项目，只有在实战中我们才会领悟更多，光纸上谈兵然并卵，继上篇我们的《Vue一个案例引发的动态组件与全局事件绑定总结》 之后，今天来聊一聊我们如何在项目中使用递归组件。信息的分类展示列表这次我们主要是实现一个信息的分类展示列表存在二级/三级的分类，如下如所示：看到这个很多人会想到这个实现起来很简单啊，来个嵌套循环不就完事了。对，你说的没错，事实就是这样简单。那...
vue 递归函数 筛选出所有子集id
m0_60370017的博客
11-05 1117
let ids = [] let data = [ { title: '一级', id: 1, children: [ { id: 3, title: '二级', children: [ {id: 7, title: '三级'}, {id: 8, tit.
vue 多级展开列表与递归组件的使用（超简单）
大大大大冬瓜
07-25 2930
今天我们继续使用 Vue 的撸我们的实战项目，只有在实战中我们才会领悟更多，光纸上谈兵然并卵，继上篇我们的《Vue一个案例引发的动态组件与全局事件绑定总结》 之后，今天来聊一聊我们如何在项目中使用递归组件。 信息的分类展示列表 这次我们主要是实现一个信息的分类展示列表存在二级/三级的分类，如下如所示： 看到这个很多人会想到这个实现起来很简单啊，来个嵌套循环不就完事了。 对，你说的没错，事实就是这...
vue list 递归显示树形结构
qq_36567996的博客
11-26 1030
vue list 递归显示树形结构 tree 方法递归返回parentId下的所有子 tree (parentId) { const tree = [] this.navigation.forEach(item => { if (item.parent === parentId) { tree.push({ ...item,...
Web前端_Vue框架_在一行内实现嵌套Json数据的分行展示
人生几何的博客
04-18 2725
刚刚开始从安卓转到Web前端，开始学习一些和前端框架相关的知识，下面是在嵌套的Json数据中分开单行显示。 得到的Json数据： "data": { "user_list": [ { "id": 199, "real_name": "龙文杰", "auth_list": [ {
vue 项目实战 递归
lzfengquan的博客
09-06 5981
1 递归函数必须接受参数。（比如我要递归谁？） 2 在递归函数的定义初始，应该有一个判断条件，当参数满足这个条件的时候，函数停止执行，并返回值。（指定退出条件，否则就会死循环） 3 每次递归函数执行自己的时候，都需要把当前参数做某种修改，然后传入下一次递归。（每次循环在调用自己一次并传参） 4当参数被累积修改到符合初始判断条件了，递归就停止了。（最后满足条件就退出） 简单的说递归函数就是在函数体内调用n次本函数。 看一下项目的要求怎么实现 项目要求 左侧树结构为“一级组织机构 到 三级设备”树，列表初始化显
vue自定义递归组件实现展开收起
最新发布
06-10
Vue的递归组件可以用于渲染树形结构，可以通过自定义递归组件来实现树形结构的展开和收起。 以下是一个简单的实现示例： 组件代码： ``` (item)">{{ item.expanded ? '-' : '+' }} <span class="text">{{ ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值