vue 侧边导航栏递归显示
import axios from "axios";
import tabs1 from "../tab_content/tab1.vue";
import myTree from "./items.vue";
export default {
data() {
return {
theModel: [], };
props: ["tabs"]
}, components: { myTree },
methods: {
tabsvalue(data){
console.log(data)
this.$emit("get-data",data)
}
},
watch: { },
created() { axios
.get("../../../static/nav.json")
// .get("。。。")
.then(
function(response) {
var arr = response.data.dActionList;
var zNodes = [];
var farternode = [];
for (var i in arr) {
if (arr[i].desktop == "0" && arr[i].parentId != null) {
farternode.push(arr[i]);
}
if (arr[i].parentId && arr[i].desktop == "1") {
zNodes.push(arr[i]);
}
}
var childNodes = function getChildNodes(
parentId,
zNodes,
nodes,
child,
parentItem
) {
if (!parentId || !zNodes) return nodes;
var childNode = [];
for (var k in zNodes) {
if (zNodes[k].parentId == parentId) {
if (child) {
childNode.push(zNodes[k]);
} else {
nodes.push(zNodes[k]);
}
childNodes(zNodes[k].id, zNodes, nodes, true, zNodes[k]);
}
}
if (childNode.length > 0 && child) {
parentItem.children = childNode;
}
return nodes;
}; for (var j in farternode) {
farternode[j]["children"] = [];
var nodes = [];
nodes = childNodes(farternode[j].id, zNodes, nodes, false, null);
farternode[j].children = nodes;
}
console.log(farternode);
console.log(nodes);
this.theModel = farternode;
}.bind(this)
)
.catch(function(error) {
console.log(error);
});
console.log(this.$refs.tabsdata) }
};
父组件 的js
<template>
<div id="navto">
<my-tree v-for="menuItem in theModel" :key="menuItem.id" :model="menuItem" @data-tabsvalue="tabsvalue"></my-tree>
</div>
</template>
父组件的节点
import tabs from '../compont/tabs.vue'
export default {
name: 'treeMenu',
props:["model"], data () {
return {
folderIcon: 'folder',
isDynamicFolder: false,
isOpen: false,
}
},
computed: {
isFolder () {
return !!(this.model.children && this.model.children.length)
}
},
watch: {
isDynamicFolder () {
this.isOpen = true
this.folderIcon = 'folder-open'
}
},
methods: {
tabsvalue(data){
this.$emit("data-tabsvalue",data)
},
run(data){ if(!data.children){
this.tabsvalue(data)
console.log(data.text);
console.log(data.url)
}
},
toggle () {
this.isOpen = !this.isOpen
this.folderIcon = this.isOpen ? 'folder-open' : 'folder'
}
}
}
子组件的js
<template>
<li>
<span @click="toggle">
<i :class="['icon', (isFolder || isDynamicFolder) ? folderIcon : 'file-text']"></i>
<span class="mousestyle">{{ model.text}}</span>
</span>
<!-- <transition name="mybox" > -->
<ul v-if="isOpen">
<span v-for="item in model.children" :key="item.id" @click.stop="run(item)">
<tree-menu :model="item" @data-tabsvalue="tabsvalue">
</tree-menu>
</span>
</ul>
<!-- </transition> -->
</li>
</template>
子组件的节点
vue 侧边导航栏递归显示的更多相关文章
- 记一次Vue跨导航栏问题解决方案
简述 这篇文章是我项目中,遇到的一个issue,我将解决过程和方法记录下来. 本篇文章基于Vue.js进行的前端页面构建,由于仅涉及前端,将不做数据来源及其他部分的叙述.使用的CSS框架是 Boots ...
- 【源码分享】jquery+css实现侧边导航栏
jquery+css实现侧边导航栏 最近做项目的时候,突然想用一个侧边导航栏,网上找了几个插件,有的太丑而且不太符合我的预期.与其修改别人的代码,不如自己来写一个了.废话不多说先上图,感兴趣的请继续看 ...
- [置顶]
bootstrap自定义样式-bootstrap侧边导航栏的实现
前言 bootstrap自带的响应式导航栏是向下滑动的,有时满足不了个性化的需求,需要做一个类似于android drawerLayout 侧滑的菜单,这就是我要实现的bootstrap自定义侧滑菜单 ...
- 【机器学习实践】Jupyter Notebook安装 侧边导航栏功能 操作及其他常用扩展功能介绍
安装过程: 1. 首先我们引入jupyter_contrib_nbextension这个第三方库. 2. 在Anaconda Promot中输入命令: pip install jupyter_con ...
- Android 新兴的UI模式——侧边导航栏【转】
侧边导航栏也就是大家熟知的SliddingMenu,英文也叫Fly-In App Menu.Side Navigation等.当然谷歌现在已经推出类似这个效果的组件--Navigation Drawe ...
- 【代码笔记】iOS-在导航栏中显示等待对话框
一,效果图. 二,代码. ViewController.m #import "ViewController.h" @interface ViewController () @end ...
- dedecms左侧导航栏不显示问题
dedecms左侧导航栏不显示问题 在做织梦项目时,经常会碰到后台左侧导航栏不显示的问题,如下所示: 这主要是由于文件权限不足造成的.有两种方法 第一种:把 /data 文件夹全部改成 777 权 ...
- uwp - 上滑隐藏导航栏下滑显示
原文:uwp - 上滑隐藏导航栏下滑显示 好久没写博客了,因为忙着工作.昨天周末填坑需要做一个上滑列表数据时隐藏导航栏下滑时显示的效果,下面分享一下我的做法,希望能给你带来帮助. 思路是通过判断滚动条 ...
- 超详细Vue实现导航栏绑定内容锚点+滚动动画+vue-router(hash模式可用)
超详细Vue实现导航栏绑定内容锚点+滚动动画+vue-router(hash模式可用) 转载自:https://www.jianshu.com/p/2ad8c8b5bf75 亲测有效~ <tem ...
随机推荐
- JavaWeb 如何在web.xml中配置多个servlet
15:34:42 <servlet> <description></description> <display-name>ListMusicServle ...
- C++之操作Excel(抄录https://www.cnblogs.com/For-her/p/3499782.html)
MFC操作Excel 下面的操作基于Excel2003 一.初始化操作 1.导入类库 点击查看->建立类向导-> Add Class...\From a type Library...-& ...
- Windows下编译live555源码
Windos下编译live555源码 环境 Win7 64位 + VS2012 步骤 1)源码下载并解压 在官网上下载最新live555源码,并对其进行解压. 2)VS下建立工程项目 新建Win32项 ...
- Django学习笔记之Queryset的高效使用
对象关系映射 (ORM) 使得与SQL数据库交互更为简单,不过也被认为效率不高,比原始的SQL要慢. 要有效的使用ORM,意味着需要多少要明白它是如何查询数据库的.本文我将重点介绍如何有效使用 Dja ...
- 20145307第一周JAVA实验报告
20145307 <Java程序设计>第一次实验实验报告 北京电子科技学院(BESTI)实验报告 课程:Java程序设计 班级:1453 指导教师:娄嘉鹏 实验日期:2016.04.08 ...
- 20145329 《Java程序设计》第三周学习总结
教材学习内容总结 java并非完整的面向对象程序语言 定义 1:class:定义类 2.char:类型声明变量 3.new:新建对象 4.名称 X:参考 5.=:可用于指定参考至新建变量 6.构造函数 ...
- 重新想,重新看——CSS3变形,过渡与动画④
最后,我们来探讨一下CSS3的动画属性. 之前提到过,实际上过渡也算作动画的一种.但过渡作为动画的缺陷在于,只能使元素属性从一个值“过渡”至另一个值,但如果想要使元素的属性值根据需要在时间轴上不断变化 ...
- Ubuntu 16.04 + Nvidia 显卡驱动 + Cuda 8.0 (问题总结 + 解决方案)【转】
本文转载自:https://blog.csdn.net/Zafir_410/article/details/73188228 前言 前面好一阵子忙于写论文和改论文,好久没有做新实验了,最近又回到做实验 ...
- 分析Ubuntu18.04启动后的各种任务
jello@jello:~$ ps -A PID TTY TIME CMD 1 ? 00:00:02 systemd 由idle进程(进程号为0的进程,那 ...
- maven问题:如何启动maven项目
maven是项目构建工具,用于解决jar间的依赖,启动maven项目的命令:tomcat:run 步骤如下: 1.在pom.xml文件中配置插件,此处配置的是tomcat8 2.右击项目名,找到Run ...