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>
复制代码

子组件的节点  

posted @   My-Love  阅读(4836)  评论(0编辑  收藏  举报
编辑推荐:
· 几种数据库优化技巧
· 聊一聊坑人的 C# MySql.Data SDK
· 使用 .NET Core 实现一个自定义日志记录器
· [杂谈]如何选择:Session 还是 JWT?
· 硬盘空间消失之谜:Linux 服务器存储排查与优化全过程
阅读排行:
· Java 项目愚蠢的分层及解决办法
· 一个.NET开源、易于使用的屏幕录制工具
· C#中 Task 结合 CancellationTokenSource的妙用
· Superpower:一个基于 C# 的文本解析工具开源项目
· 【经验】几种数据库优化技巧
点击右上角即可分享
微信分享提示