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

最新推荐文章于 2024-05-20 14:41:32 发布

1 2 3 一起追梦

最新推荐文章于 2024-05-20 14:41:32 发布

阅读量1k

点赞数 2

分类专栏：笔记 html/js 文章标签： ui vue.js elementui

本文链接：https://blog.csdn.net/qq_41720578/article/details/125450905

版权

笔记同时被 2 个专栏收录

63 篇文章 0 订阅

订阅专栏

html/js

4 篇文章 0 订阅

订阅专栏

主要使用了用递归。

<%--
  Created by IntelliJ IDEA.
  User: DELL
  Date: 2022/6/20
  Time: 20:02
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
  <title>Title</title>
   <link rel="stylesheet" type="text/css" href="/qy151_16/js/index.css">
     <link rel="stylesheet" type="text/css" href="/qy151_16/css/stuInfo.css">
    <script type="text/javascript" src="/qy151_16/js/vue.js"></script>
    <script type="text/javascript" src="/qy151_16/js/index.js"></script>
    <script type="text/javascript" src="/qy151_16/js/axios.min.js"></script>
    <script type="text/javascript" src="/qy151_16/js/qs.min.js"></script>
    <link href="/qy151_16/favicon.ico" rel="shortcut icon">
</head>
<body>
  <div id="app">
      <el-tree
          :data="data"
          node-key="id"
          @node-click="handleNodeClick"></el-tree>
      <el-breadcrumb separator-class="el-icon-arrow-right">
          <template v-for="item in breadList">
            <el-breadcrumb-item @click.native="toPage(item,index)">{{item.label}}</el-breadcrumb-item>
          </template>
      </el-breadcrumb>
  </div>

  <script>

		var app = new Vue({
      el:'#app',
      data:{
      	breadList: [],
      	data: [{
          id: 1,
          level:1,
          label: '一级 1',
          associate:1,
          children: [{
            id: 4,
            level:2,
            label: '二级 1-1',
            associate:1,
            children: [{
              id: 9,
              level:3,
              label: '三级 1-1-1',
              associate:4
            }, {
              id: 10,
              level:3,
              label: '三级 1-1-2',
              associate:4
            }]
          }]
        }, {
          id: 2,
          level:1,
          label: '一级 2',
          associate:2,
          children: [{
            id: 5,
            level:2,
            label: '二级 2-1',
            associate:2,
            children: []
          }, {
            id: 6,
            level:2,
            label: '二级 2-2',
            associate:2,
            children: []
          }]
        }, {
          id: 3,
          label: '一级 3',
          level:1,
          associate:3,
          children: [{
            id: 7,
            level:2,
            label: '二级 3-1',
            associate:3,
            children: []
          }, {
            id: 8,
            level:2,
            label: '二级 3-2',
            associate:3,
            children: [{
             id: 11,
              level:3,
              label: '三级 3-2-1',
              associate:8,
              children: []
            }, {
              id: 12,
              level:3,
              label: '三级 3-2-2',
              associate:8,
              children: []
            }, {
              id: 13,
              level:3,
              label: '三级 3-2-3',
              associate:8,
              children: []
            }]
          }]
        }],
      },
      methods:{
      	handleNodeClick(data){

          this.addBread(data);
        },
          //添加面包屑导航逻辑
       addBread(data){
            if(data.level === 1){
              this.breadList=[data];
            }else {

              //判断是否是同级菜单 并记录下
              let isBrother = false;
              let brother = -1;

              //记录是否存在该子菜单
              let isExist = false;

              //判断数组中是否存在该子菜单 存在则结束函数
              this.breadList.forEach(function (item, index) {

                //说明存在数组中存在同级菜单
                if(item.associate === data.associate && item.id !== data.id && item.level !== 1){
                  isBrother = true;
                  brother = index;
                }
                //说明存在数组中存在该菜单
                if(item.id === data.id){
                  isExist = true;
                  return;
                }
              })
              //存在该菜单就直接结束该函数防止重复添加
              if(isExist){
                return;
              }

            //如果是同级节点则替换掉 并删除其子节点
              if(isBrother){

                this.breadList.splice(brother,1,data);
                this.breadList.splice(brother+1,this.breadList.length)
                return;
              }

              //如果是字节点则添加到breadList数组
              this.getChild(this.breadList[0],data)

            }
          },
          getChild(parent,data){

            //当节点为null 结束函数
            if(parent === null) {
              return ;
            }

            //说明该节点是其子节点
            if(parent.id === data.associate){
              this.breadList.push(data)
              return ;
            }
            //继续往其子节点找
             parent.children.forEach(function (item, index) {
              app.getChild(item,data);
            })
      },
        //面包屑跳转
      toPage(item,index){
        	this.targetPage = item.url;
        	this.breadList.splice(index+1,this.breadList.length)
      },

      }
    })
  </script>
</body>
</html>