多级级联数据的展示-vue递归组件
如果采用普通的for循环方式,没办法确认数据到底有几层,要写几个for循环,所以想到了递归的方法。
那么在vue里然后实现呢?
vue递归组件(组件中使用自己)
父组件中把数据以props形式传给子组件
<template>
<div class="cascader">
<wb-cascader-tree :options="options"></wb-cascader-tree>
</div>
</template>
<script>
import wbCascaderTree from './wb-cascader-tree'
export default {
name: "wb-cascader",
data(){
return {
options: [
{
name: "一级菜单1",
children: [
{ name: "二级菜单1-1" },
{
name: "二级菜单1-2",
children: [
{ name: "三级菜单1-2-1", children: [{ name: "四级菜单1-2-1-1" }] },
],
},
],
},
{ name: "一级菜单2" },
{
name: "一级菜单3",
children: [{ name: "二级菜单3-1" }, { name: "二级菜单3-2" }],
},
],
}
},
components:{
'wb-cascader-tree':wbCascaderTree
}
}
</script>
子组件,'wb-cascader-tree'。循环递归自身
<template>
<div>
<div v-for="item in options">
{{item.name}}
<div v-if="item.children">
<wb-cascader-tree :options="item.children"></wb-cascader-tree>
</div>
</div>
</div>
</template>
<script>
export default {
name: "wb-cascader-tree",
props:['options']
}
</script>
注意: 在组件中使用自己时,必须要保证有name属性,且name=组件名。如果你在你组件里使用了与name相同的标签,那么就是在使用自己。
多级级联数据的展示-vue递归组件的更多相关文章
- vue递归组件的实现
本文链接:https://blog.csdn.net/weixin_43756060/article/details/87786344vue递归实现图片上的多级菜单 父级组件结构 <templa ...
- VUE递归树形目录(vue递归组件)的使用
1.html <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" ...
- vue递归组件 (树形控件 )
首先我们要知道,既然是递归组件,那么一定要有一个结束的条件,否则就会使用组件循环引用,最终出现“max stack size exceeded”的错误,也就是栈溢出.那么,我们可以使用v-if=&qu ...
- vue 递归组件
如果你的项目里面的数据结构是一个树状的数据结构 然后递归组件是一个很好的一个解决你这个数据结构的一个方式 就是组件内部调用自身 tree.vue里面直接tree-node <tree-node& ...
- Vue递归组件实现层层嵌套显示数据
问题来自朋友...记录一下 需求是表格头部后端返回的数据中是不确定的 n维数据,表头存在于 listVo 字段中,如何实现层层显示呢? 温馨提示,以下内容为5张大图,请打开 WIFI 享用... 以下 ...
- Vue.js递归组件实现动态树形菜单
使用Vue递归组件实现动态菜单 现在很多项目的菜单都是动态生成的,之前自己做项目也是遇到这种需求,翻看了官网案例,和网上大神的案例.只有两个感觉,官网的案例太简洁,没有什么注释,看起来不太好理解,大神 ...
- vue开发组件开发中的小技巧
声明:以下随笔由博主自主编写,也有部分引用网友的,引用部分版权归原作者所有,其他博主原创部分禁止转载.复制全部或部分用以重新发布! vue递归组件事件阻止冒泡 其实这里主要还有递归组件的自定义事件不生 ...
- vue动态组件-根据数据展示特定组件
vue中有个内置组件component,利用它可以实现动态组件,在某些业务场景下可以替换路由 假设有以下三个组件: com1.com2.com3 有一个外层路/coms中代码如下 <templa ...
- Vue一个案例引发的递归组件的使用
今天我们继续使用 Vue 的撸我们的实战项目,只有在实战中我们才会领悟更多,光纸上谈兵然并卵,继上篇我们的<Vue一个案例引发的动态组件与全局事件绑定总结> 之后,今天来聊一聊我们如何在项 ...
随机推荐
- Java 中 IO 流分为几种?
按功能来分:输入流(input).输出流(output).按类型来分:字节流和字符流.字节流和字符流的区别是:字节流按 8 位传输以字节为单位输入输出数据,字符流按 16 位传输以字符为单位输入输出数 ...
- java-web中的Filter&Listener
Filter过滤器 当访问服务器资源的时候,过滤器可以将i气你个球拦截下来,完成一些特殊的功能 过滤器的作用: 一般用于完成通用的操作,如验证登陆,统一的编码处理,敏感字符过滤.就是打游戏骂人,会出现 ...
- 学习Squid(一)
第1章 Squid介绍 1.1 缓存服务器介绍 缓存服务器(英文意思cache server),即用来存储(介质为内存及硬盘)用户访问的网页,图片,文件等等信息的专用服务器.这种服务器不仅可以使用户可 ...
- Linux基础学习 | 用户及用户组
Linux 用户及用户组 目录 一.用户 添加用户实例 二.用户组 添加用户组实例 三.用户及用户组文件 四.各命令参数对照 一.用户 Linux系统是一个多用户多任务的分时操作系统.任何 ...
- 5_系统的可控性_Controllability
- 微信小程序——gulp处理文件
懒癌直接贴代码,想写在写因为最近搞了一下小程序,直接使用微信的开发者工具搞感觉有点不习惯,并且看了几篇给小程序瘦身的博客,决定给自己的项目做一套配置文件,使用gulp来支持sass scss文件编译以 ...
- .NET程序设计实验一
实验一 语言基础 一.实验目的 1. 熟悉Visual Stido.NET 实验环境: 2. 掌握控制台程序的编写方法: 3. 掌握C#程序设计语言的语法基础: 4. 掌握控制语句和数组的使用. 二 ...
- Java报错:Error creating bean with name 'testController': Injection of resource dependencies failed
报错如下: org.springframework.beans.factory.BeanCreationException: Error creating bean with name 'testCo ...
- SSM实现个人博客-day02
2.数据库设计 项目源码:SSM实现个人博客 有问题请询问vx:kht808
- victoriaMetrics之byteBuffer
victoriaMetrics之byteBuffer VictoriaMetrics经常会处理数目庞大的指标,在处理的过程中会涉及指标的拷贝,如果在指标拷贝时都进行内存申请的话,其内存消耗和性能损耗都 ...