vue递归组件使用,vue递归组件 n级联动
这篇文章主要为大家详细介绍了某视频剪辑软件递归组件实现elementUI多级菜单，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了某视频剪辑软件递归组件实现elementUI多级菜单的具体代码，供大家参考，具体内容如下
先看效果：
一、子组件
模板
div class=myDiv
！-这里的利斯托尔用于接收父组件传递进来的菜单列表-
模板v-for=(item，i) in listAll
！-有儿童就显示儿童的下拉型菜单，有小箭头-
El-子菜单：index= item。 index :key= I v-if= item。孩子。长度！=0
模板槽=标题
img :src=item.img alt=
span{{item.title}}/span
/模板
！-再次调用自身组件，传入子集，进行循环递归调用-
Menu :listAll=item.child/Menu
/El-子菜单
！-没有孩子，就显示单个目录，没有小箭头-
El-menu-item:index= item . index v-else:key= I @ click= handle select(item。路径，项目。标题，项目。索引)
span slot= title img:src= item。img alt= { { item。title } }/span
/El-菜单项
/模板
/div
/模板
脚本
导出默认值{
名称：菜单，
组件：{},
道具：[listAll]，
data() {
返回{
realList: this.listAll，
}
},
方法：{
//设置路由跳转
手柄选择(路径，名称，自我索引){
这个10.99 $ router . push(
{
路径："/"路径，
查询：{
姓名，
指数：自我指数
}
}
)
},
},
}
/脚本
二、菜单数据准备
菜单中包含索引，图片，名称，跳转路径，这里我给出一部分数据，路由直接用数字了，你们最好定义为组件的英文名称，这样方便维护。
导出函数menuJson() {
定义变量数据=[{
标题： 元数据管理，
img:./././static/img/manager.png ，
索引："1",
孩子：[
{
标题: 元数据信息描述管理， path: main/02/005 ， img :./././static/img/manager.png ， index: 1-2 ， child: []
},
{
标题: 元数据分组定义管理， path: main/02/007 ， img :./././static/img/manager.png ， index: 1-3 ， child: []
},
{
标题: 元数据信息管理， path: main/02 ， img :./././static/img/manager.png ， index: 1-1 ， child: [
{ 标题: 采集元数据， path: main/02/001 ， index: 1-1-1 ， img :./././static/img/blood.png ， child: [] }，
{ 标题: 元模型， path: main/02/004 ， index: 1-2-1 ， img :./././static/img/blood.png ， child: [] }，
]
},
{
标题: 元数据统计分析管理， path: main/01 ， index: 1-4 ， img :./././static/img/manager.png ， child: [
{ 标题: 元数据变更管理， path: main/01/001 ， index: 1-4-1 ， img :./././static/img/blood.png ， child: [] }，
{ 标题: 数据地图， path: main/01/002 ， index: 1-4-2 ， img :./././static/img/blood.png ， child: [] }，
{
标题: 元数据分析， path: main/01/003 ， index: 1-4-3 ， img :./././static/img/yuanfenxi.png ， child: [
{ 标题: 血缘分析， path: main/01/003/0001 ， index: 1-4-3-1 ， img :./././static/img/blood.png ， child: [] }，
{ 标题: 属性差异分析， path: main/01/003/0003 ， index: 1-4-3-2 ， img :./././static/img/chayi.png ， child: [] }，
{ 标题: 影响分析， path: main/01/003/0004 ， index: 1-4-3-3 ， img :./././static/img/impact.png ， child: [] }，
]
},
]
},
]
},
{
标题： 规则管理，
img:./././static/img/manager.png ，
索引："2",
孩子：[
{ 标题: 数据接口定义管理，索引: 2-1 ,路径： main/03/001 ， img :./././static/img/source.png ， child: [] }，
{ 标题: 数据转换规则管理，索引: 2-2 ,路径： main/03/004 ， img :./././static/img/modify.png ， child: [] }，
]
}
]
返回数据
}
三、父组件调用
模板
div class=内容菜单
div class= menu _ com :style= { height:scroll height px }
el-col :span=24
El-menu:default-active= active index class= El-menu-vertical-demo :default-openeds= default index background-color= # 003289 text-color= # fff active-text-color= # ffd 04 b
//调用子组件
菜单：listAll= listAll /菜单
/el-menu
/el-col
/div
/div
/模板
脚本
从导入菜单。/菜单
从导入{ menuJson }././assets/common/http //调用射流研究…文件中的菜单数据
导出默认值{
名称："菜单",
mixins: [mixin]，
组件：{ Menu }，
data() {
返回{
scrollHeight: 400，
列表：[],
活动索引："-1 "，
默认索引：[]
}
},
已创建(){
//设置点击菜单的索引，可以使得刷新后菜单仍保持原来查看的页面
this.activeIndex=String(this .$ route。查询。指数)；
this.listAll=menuJson() //通过调用函数梅努森，获取菜单
},
观察：{
$路线（至，自){
this.activeIndex=this .$ route。查询。指数；
}
},
}
/脚本
样式范围语言=少
@ color:# 003289；菜单{
背景：@颜色；
部门{
宽度：100%;
padding-top:20px；
//身高：100%;
颜色：# ffffff
溢出-y:滚动；
溢出-x:隐藏；
:-网络工具包-滚动条{
显示：无；
}
h1 {
字体大小：20px
文本对齐：居中；
填充：15px 0 25px 0
}
}
}。埃尔菜单演示{
位置：绝对；
身高：58px！重要；
左：25%;
top:0%；
}
/风格
补充（面包屑的展示）：
有菜单，肯定需要面包屑的展示，例如
这里我用的方法是，根据当前页面名称，从树形菜单数据中查找它的所有父级来实现面包屑导航栏的展示。
html:
el面包屑分隔符-class=el-icon-arrow-right
el-breadcrumb-item v-for=(item，index)in list menu :key= index { { item } }/El-bread crumb-item
/el-breadcrumb
方法：
方法：{
//获取树形数据的某个元素的所有父节点
getTreePath(tree，func，path) {
如果(!树)返回[]
对于(树的常量数据){
//这里按照你的需求来存放最后返回的内容吧
//这里的标题是我的菜单数据里面的名称字段，你可以改成你的
path.push(data.title)
if (func(data))返回路径
if (data.child) {
//获取到子数据，递归调用
const查找子代=this。gettreePath(数据。子、函数、路径)
if (findChildren.length)返回寻找孩子
}
path.pop()
}
return []
},
//获取面包屑
getNavList() {
var name=this .$route.query.r_n //先获取当前路由名称
var tree=menuJson() //获取菜单数据，menuJson这个函数上面用了，返回的事菜单数据
this.path=[] //path用于存放所有父级，调用前需要清空
//data=data.title===name查找数据中的标题是否和当前路由名称相等
this.getTreePath(tree，data=data.title===name，this.path)
this.listMenu=this.path //找到之后赋值给面包屑路由数组
console.log(this.listMenu)
}
}
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。