vue 侧边导航栏递归显示
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 | 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>
子组件的节点
· 几种数据库优化技巧
· 聊一聊坑人的 C# MySql.Data SDK
· 使用 .NET Core 实现一个自定义日志记录器
· [杂谈]如何选择:Session 还是 JWT?
· 硬盘空间消失之谜:Linux 服务器存储排查与优化全过程
· Java 项目愚蠢的分层及解决办法
· 一个.NET开源、易于使用的屏幕录制工具
· C#中 Task 结合 CancellationTokenSource的妙用
· Superpower:一个基于 C# 的文本解析工具开源项目
· 【经验】几种数据库优化技巧