• Element UI + tree组件 + 面包屑 实现导航

     主要使用了用递归。

    1. <%--
    2.   Created by IntelliJ IDEA.
    3.   User: DELL
    4.   Date: 2022/6/20
    5.   Time: 20:02
    6.   To change this template use File | Settings | File Templates.
    7. --%>
    8. <%@ page contentType="text/html;charset=UTF-8" language="java" %>
    9. <html>
    10. <head>
    11.   <title>Title</title>
    12.    <link rel="stylesheet" type="text/css" href="/qy151_16/js/index.css">
    13.      <link rel="stylesheet" type="text/css" href="/qy151_16/css/stuInfo.css">
    14.     <script type="text/javascript" src="/qy151_16/js/vue.js"></script>
    15.     <script type="text/javascript" src="/qy151_16/js/index.js"></script>
    16.     <script type="text/javascript" src="/qy151_16/js/axios.min.js"></script>
    17.     <script type="text/javascript" src="/qy151_16/js/qs.min.js"></script>
    18.     <link href="/qy151_16/favicon.ico" rel="shortcut icon">
    19. </head>
    20. <body>
    21.   <div id="app">
    22.       <el-tree
    23.           :data="data"
    24.           node-key="id"
    25.           @node-click="handleNodeClick"></el-tree>
    26.       <el-breadcrumb separator-class="el-icon-arrow-right">
    27.           <template v-for="item in breadList">
    28.             <el-breadcrumb-item @click.native="toPage(item,index)">{{item.label}}</el-breadcrumb-item>
    29.           </template>
    30.       </el-breadcrumb>
    31.   </div>
    32.  
    33.   <script>
    34.  
    35. 		var app = new Vue({
    36.       el:'#app',
    37.       data:{
    38.       	breadList: [],
    39.       	data: [{
    40.           id: 1,
    41.           level:1,
    42.           label: '一级 1',
    43.           associate:1,
    44.           children: [{
    45.             id: 4,
    46.             level:2,
    47.             label: '二级 1-1',
    48.             associate:1,
    49.             children: [{
    50.               id: 9,
    51.               level:3,
    52.               label: '三级 1-1-1',
    53.               associate:4
    54.             }, {
    55.               id: 10,
    56.               level:3,
    57.               label: '三级 1-1-2',
    58.               associate:4
    59.             }]
    60.           }]
    61.         }, {
    62.           id: 2,
    63.           level:1,
    64.           label: '一级 2',
    65.           associate:2,
    66.           children: [{
    67.             id: 5,
    68.             level:2,
    69.             label: '二级 2-1',
    70.             associate:2,
    71.             children: []
    72.           }, {
    73.             id: 6,
    74.             level:2,
    75.             label: '二级 2-2',
    76.             associate:2,
    77.             children: []
    78.           }]
    79.         }, {
    80.           id: 3,
    81.           label: '一级 3',
    82.           level:1,
    83.           associate:3,
    84.           children: [{
    85.             id: 7,
    86.             level:2,
    87.             label: '二级 3-1',
    88.             associate:3,
    89.             children: []
    90.           }, {
    91.             id: 8,
    92.             level:2,
    93.             label: '二级 3-2',
    94.             associate:3,
    95.             children: [{
    96.              id: 11,
    97.               level:3,
    98.               label: '三级 3-2-1',
    99.               associate:8,
    100.               children: []
    101.             }, {
    102.               id: 12,
    103.               level:3,
    104.               label: '三级 3-2-2',
    105.               associate:8,
    106.               children: []
    107.             }, {
    108.               id: 13,
    109.               level:3,
    110.               label: '三级 3-2-3',
    111.               associate:8,
    112.               children: []
    113.             }]
    114.           }]
    115.         }],
    116.       },
    117.       methods:{
    118.       	handleNodeClick(data){
    119.  
    120.           this.addBread(data);
    121.         },
    122.           //添加面包屑导航逻辑
    123.        addBread(data){
    124.             if(data.level === 1){
    125.               this.breadList=[data];
    126.             }else {
    127.  
    128.               //判断是否是同级菜单 并记录下
    129.               let isBrother = false;
    130.               let brother = -1;
    131.  
    132.               //记录是否存在该子菜单
    133.               let isExist = false;
    134.  
    135.               //判断数组中是否存在该子菜单 存在则结束函数
    136.               this.breadList.forEach(function (item, index) {
    137.  
    138.                 //说明存在数组中存在同级菜单
    139.                 if(item.associate === data.associate && item.id !== data.id && item.level !== 1){
    140.                   isBrother = true;
    141.                   brother = index;
    142.                 }
    143.                 //说明存在数组中存在该菜单
    144.                 if(item.id === data.id){
    145.                   isExist = true;
    146.                   return;
    147.                 }
    148.               })
    149.               //存在该菜单就直接结束该函数防止重复添加
    150.               if(isExist){
    151.                 return;
    152.               }
    153.  
    154.             //如果是同级节点则替换掉 并删除其子节点
    155.               if(isBrother){
    156.  
    157.                 this.breadList.splice(brother,1,data);
    158.                 this.breadList.splice(brother+1,this.breadList.length)
    159.                 return;
    160.               }
    161.  
    162.               //如果是字节点则添加到breadList数组
    163.               this.getChild(this.breadList[0],data)
    164.  
    165.             }
    166.           },
    167.           getChild(parent,data){
    168.  
    169.             //当节点为null 结束函数
    170.             if(parent === null) {
    171.               return ;
    172.             }
    173.  
    174.             //说明该节点是其子节点
    175.             if(parent.id === data.associate){
    176.               this.breadList.push(data)
    177.               return ;
    178.             }
    179.             //继续往其子节点找
    180.              parent.children.forEach(function (item, index) {
    181.               app.getChild(item,data);
    182.             })
    183.       },
    184.         //面包屑跳转
    185.       toPage(item,index){
    186.         	this.targetPage = item.url;
    187.         	this.breadList.splice(index+1,this.breadList.length)
    188.       },
    189.  
    190.       }
    191.     })
    192.   </script>
    193. </body>
    194. </html>

  • 相关阅读:
    大数据运维实战第七课 通过 Ambari工具自动化构建 Hadoop 大数据平台和外围应用（上）
    Ubuntu 20.04 DNS解析原理, 解决resolv.conf被覆盖问题
    Java中的Maven是什么?
    力扣-461.汉明距离
    postswigger 靶场(CSRF)攻略-- 1.没有防御措施的 CSRF 漏洞
    3. 使用tcpdump抓取rdma数据包
    基于SSM的健达企业项目管理系统的设计与实现-计算机毕业设计
    设计模式(十四)----结构型模式之组合模式
    【前端】Vue基础+本地应用
    Linux系统编程系列之线程的信号处理
  • 原文地址：https://blog.csdn.net/qq_41720578/article/details/125450905