elementui树状菜单tree_vue.js+element-ui做出菜单树形结构
这次给大家带来vue.js+element-ui做出菜单树形结构,vue.js+element-ui做出菜单树形结构的注意事项有哪些,下面就是实战案例,一起来看一下。
由于业务需要,要求实现树形菜单,且菜单数据由后台返回,在网上找了几篇文章,看下来总算有了解决办法。
场景:根据业务要求,需要实现活动的树形菜单,菜单数据由后台返回,最后的效果图如下:
后台返回的数据格式是这个样子的:data=[{
pID:'1',//父ID
name:'目录一',
menuID:'m1',//本身ID
isContent:false//判断是否是目录
},
{
pID:'1',
name:'目录二',
menuID:'m2',
isContent:false
},
{
pID:'m1',
name:'目录一--菜单一',
menuID:'m11',
isContent:true
},
{
pID:'m1',
name:'目录一--目录一',
menuID:'m12',
isContent:false
},
{
pID:'m12',
name:'目录一--目录一--菜单一',
menuID:'m121',
isContent:true
},
{
pID:'m2',
name:'目录二--菜单一',
menuID:'m21',
isContent:true
},
{
pID:'m2',
name:'目录二--菜单二',
menuID:'m22',
isContent:true
},
]
这是一串具有父子关系的数据,首先就是要把这一大串数据转化成树形结构:tree(){
let data=[{
pID:'1',//父ID
name:'目录一',
menuID:'m1',//本身ID
isContent:false//判断是否是目录
},
{
pID:'1',
name:'目录二',
menuID:'m2',
isContent:false
},
{
pID:'m1',
name:'目录一--菜单一',
menuID:'m11',
isContent:true
},
{
pID:'m1',
name:'目录一--目录一',
menuID:'m12',
isContent:false
},
{
pID:'m12',
name:'目录一--目录一--菜单一',
menuID:'m121',
isContent:true
},
{
pID:'m2',
name:'目录二--菜单一',
menuID:'m21',
isContent:true
},
{
pID:'m2',
name:'目录二--菜单二',
menuID:'m22',
isContent:true
},
]
let tree = []
for(let i=0;i
if(data[i].pID == '1'){
let obj = data[i]
obj.list = []
tree.push(obj)
data.splice(i,1)
i--
}
}
menuList(tree)
console.log(tree)
function menuList(arr){
if(data.length !=0){
for(let i=0; i
for(let j=0;j
if(data[j].pID == arr[i].menuID){
let obj = data[j]
obj.list = []
arr[i].list.push(obj)
data.splice(j,1)
j--
}
}
menuList(arr[i].list)
}
}
}
}
运行完后返回的结构就是这个样子:[{"pID":"1","name":"目录一","menuID":"m1","isContent":false,"list":[{"pID":"m1","name":"目录一--菜单一","menuID":"m11","isContent":true,"list":[]},{"pID":"m1","name":"目录一--目录一","menuID":"m12","isContent":false,"list":[{"pID":"m12","name":"目录一--目录一--菜单一","menuID":"m121","isContent":true,"list":[]}]}]},{"pID":"1","name":"目录二","menuID":"m2","isContent":false,"list":[{"pID":"m2","name":"目录二--菜单一","menuID":"m21","isContent":true,"list":[]},{"pID":"m2","name":"目录二--菜单二","menuID":"m22","isContent":true,"list":[]}]}]
接下来就要展示了,项目中用的element-ui的导航菜单组件,为了实现这样的树形结构,将每一级的菜单单独作为一个组件,通过判断isContent的值来递归。我直接把代码贴出来
theme="dark"
:default-active="openMenuID"
:default-openeds="openMenuArr"
class="el-menu"
@select="handleSelect">
{{item.name}}
{{item.name}}
tree-menu组件的代码:
{{menu.name}}
{{menu.name}}
相信看了本文案例你已经掌握了方法,更多精彩请关注php中文网其它相关文章!
推荐阅读:
elementui树状菜单tree_vue.js+element-ui做出菜单树形结构相关推荐
- java组装树状结构数据集合_JAVA构建List集合为树形结构
package com.zving.tree; import java.util.ArrayList; import java.util.List; /** * 树形结构实体类 * @author c ...
- 关于vue.js element ui 表单验证 this.$refs[formName].validate()的问题
方法使用前需了解: 来自"和"小编的小提示: 首先打印一下this.$refs[formName],检查是否拿到了正确的需要验证的form. 其次在拿到了正确的form后,检查 ...
- 使用element UI导航菜单默认展开选中子菜单
vue项目中使用的element UI导航菜单:官网例子 导航菜单默认展开主要涉及的关键属性: default-active与default-openeds的主要区别: default-active可 ...
- [js] 根据元素ID遍历树形结构,查找到所有父元素ID
[js] 根据元素ID遍历树形结构,查找到所有父元素ID var list = [{ "orgId": 1, "orgName": "校长办公室1&q ...
- elementui树状菜单tree_Vue+Element UI 树形控件整合下拉功能菜单(tree + dropdown +input)...
这篇博客主要介绍树形控件的两个小小的功能: 下拉菜单 输入过滤框 以CSS样式为主,也会涉及到Vue组件和element组件的使用. 对于没有层级的数据,我们可以使用表格或卡片来展示.要展示或建立层级 ...
- elementui树状菜单tree_Java + Element-UI 实现简单的树形菜单
一.简单入门级树形菜单实现(纯后台逻辑) 1.简介 (1)开发环境 IDEA + JDK1.8 + mysql 1.8 SpringBoot 2.2.6 + mybatis-plus 此处仅后台开发( ...
- Vue+JS+Element UI实战(电商项目1)
目录 1.电商业务概述 2.电商后台管理系统的功能 3.项目初始化步骤 4.后台项目的环境安装配置 4.1. API V1 接口说明 4.2. 支持的请求方法 4.3. 通用返回状态说明 5.测试后 ...
- element ui 菜单封装_vue+element UI实现多级导航菜单
1.前言 在某次日常开发中,项目要求页面的导航菜单需要动态加载,即菜单不能在页面上写死,菜单上的数据由后端开发从数据库中获取返回给前端使用,前端拿到数据后再通过解析数据最终将菜单渲染出来.由于菜单有可 ...
- elementui :on-remove怎么用_Vue + Vuex + Element UI实现动态全局主题颜色
点击右上方红色按钮关注"web秀",让你真正秀起来 前言 经常用Element UI的小伙伴,应该知道,Element UI官方文档,可以自由更换主题.那么,我们怎么把这个功能用到 ...
最新文章
- 创建可微物理引擎Nimble,开源SOTA人体骨骼模型,斯坦福腿疾博士生用AI「助跑」人生...
- 给自己出的iOS面试题
- AutoScan-收集监视及办理器械
- Java语言基础学习笔记——基础语法
- JAVA多线程,真的能提高效率吗
- Apache旗下顶级开源盛会 HBasecon Asia 2018将于8月在京举行
- linux 后台运行nohup与
- 广域网访问局域网路由器设置_交换机路由器如何连接 交换机路由器连接方法【详解】...
- 利用爬虫获取网上医院药品价格信息 (下)
- 2.微型计算机系统的基本结构及计算机各个部件的功能
- TCP模块如何处理数据包
- 计算机基础知识五笔,教你简单快速学习五笔打字
- Unbuntu卸载anaconda(最新最全亲测)
- OpenCV视频篇——码流 / 码率 / 比特率 / 帧速率 / 分辨率
- VOT Toolkit工具配置和使用--Python版本
- C语言 | 数组升序排列(冒泡排序法)
- xp sp3关闭PAE(物理内存扩展)
- 【推荐】一款适合开发者的桌面整理工具,让你的屏幕干净整洁!
- Linux 内核源码中likely()和unlikely()
- 梦幻仙缘剧情java_梦幻仙缘ios下载-梦幻仙缘苹果版1.0 ios变态版-东坡下载
热门文章
- spring声明式事务管理方式( 基于tx和aop名字空间的xml配置+@Transactional注解)
- SQL语句:建表语句、插入语句、查询语句、增加列、删除列、查询语句like、修改语句
- 在windows 2003系统安装oracle11G出现的问题
- 网页设计中HTML常范的五个错误
- 计算机组成原理中ID是什么,计算机组成原理.doc
- web编程 模块1 html,PYcore python programming笔记C20 Web编程
- Android为网络请求自定义加载动画
- Nginx windows安装部署
- cpc卡内计费信息异常包括_今日头条信息流广告投放效果好吗?信息流广告计费方式怎么收费?...
- 数据结构与算法实战-C++实现