• 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>

    子组件的节点  

  • 相关阅读:
    软工实践寒假作业(2/2)
    Java 内存溢出分析
    个人作业——软件工程实践总结&个人技术博客
    个人作业——软件测评
    结对第二次作业——某次疫情统计可视化的实现
    结对第一次作业-疫情统计可视化(原型设计)
    软工实践寒假作业(2/2)
    软工实践寒假作业(1/2)
    个人作业——软件工程实践总结&个人技术博客
    配合springboot的快速运维脚本
  • 原文地址:https://www.cnblogs.com/duke-peng/p/8550321.html
Copyright © 2020-2023  润新知