點擊側邊欄菜單 添加到頭部導航欄vue-Element

<template>
  <div class="aside">
    <div class="box cl Flex">
      <!-- 側邊欄導航 -->
      <aside class="cl">
        <!--個人信息-->
        <div class='wisdom' v-bind:class="!isCollapse ? 'between' : 'center'">
          <p v-bind:class="isCollapse ? 'center' : 'none'">MES</p>
          <P v-bind:class="!isCollapse ? 'between' : 'center'" v-if="!isCollapse" class='zhihuiguanli'>後臺管理系統</P>
        </div>
        <div
          class="demo-basic--circle Flex"
          v-bind:class="!isCollapse ? 'between' : 'center'"
          style="padding:0.05rem 2%;">
            <div class="block">
              <el-avatar :size="40" :src="circleUrl"></el-avatar>
            </div>
          <div style v-if="!isCollapse">
            <p class="name">{{Person.name}}</p>
            <p>
              <i class="el-fontzhongduanzaixianguanli icon iconfont"></i>
              <span>{{Person.condition}}</span>
            </p>
          </div>
        </div>
        <!--側邊導航-->
        <el-menu
          v-bind:default-active="asideDefaultSelected"
          class="el-menu-vertical-demo navigation"
          background-color="#5BC2AD"
          text-color="#fff"
          active-text-color="#ffd04b"
          @open="handleOpen"
          @close="handleClose"
          :collapse="isCollapse"
          >
          <menu-dom
            :menuData="onemenu"
            :icon="onemenu.icon"
            :default-active='activeIndex'
            :totalKey="index"
            v-for="(onemenu, index) in asideData"
            :key="onemenu.value"
            :to="onemenu.path"
            @addAside="addAside"
          ></menu-dom>
        </el-menu>
      </aside>
      <section class=" w1">
        <!-- 橫向導航 -->
        <header class="cl Flex between">
          <div class="trans" style="">
            <el-radio-group v-model="isCollapse" style="">
              <el-radio-button :label="false" v-show='isCollapse'><i class='el-icon-s-unfold'></i></el-radio-button>
              <el-radio-button :label="true" v-show='!isCollapse'><i class='el-icon-s-fold'></i></el-radio-button>
            </el-radio-group>
          </div>
          <!-- 消息提示 -->
        </header>
        <nav class="Flex ">
          <div class="Flex w1">
            <div class="add addindex">
              <router-link to="home">默認首頁</router-link>
            </div>
            <div class="nowrap w1">
              <div
                class="add wome "
                v-for="(aside, key) in headerData"
                :key="aside.value"
                v-bind:class="headerSelected == aside.title ? 'selected' : ''"
                @click="selectedAsideMenu(aside)"
              >
                {{ aside.title }}
                <i class="el-icon-close" @click="deleteAside(key)"></i>
              </div>
            </div>
          </div>
          <!-- 頁籤操做 -->
        </nav>
        <!-- 中間內容 -->
        <router-view></router-view>
      </section>
    </div>
  </div>
</template>
複製代碼

export default {
    data() {
      return {
        isCollapse: true,
        circleUrl:"https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png",
        activeIndex: "1",
        // 我的信息
        Person:{
          name: '犬夜叉',
          date: '12',
          condition: '在線'
        },
        // 菜單欄默認選中
        asideDefaultSelected: "0-0-1",
        //  添加導航
        asideData: [
          {
            title: "實時監控",
            icon:"el-icon-data-line",
            children: [
              {
                title: '模型版本',
                icon: '',
                children:[
                  {
                    title: '模型版本——1',
                    icon: '',
                    path: '/home'
                  },
                  {
                    title: '模型版本——2',
                    icon: '',
                    path: '/home'
                  },
                ]
              },
              {
                title: "個人試驗系統系統",
                icon: '',
                path: '/home',
              },
            ]
          },
          {
            title: "咱們",
            path: '/home',
          },
        ],
        // 存放空的數組
        headerData: [],
        // 存放選中的數組
        headerSelected: "",
      };
    },
  };
複製代碼

methods: {
      // 點擊側邊欄菜單 添加到頭部
      addAside(data, key) {
        // 判斷添加的是否存在若是不存在添加
        const has = this.headerData.find(item => item.title == data.title);
        if (!has) {
          data.key = key;
          this.headerData.push(data);
        }
        this.headerSelected = data.title;
      },
      // 新增長的數組刪除
      deleteAside(key) {
        this.headerData.splice(key, 1);
      },
      // 點擊頭部菜單 反向選中 側邊欄menu
      selectedAsideMenu(selected) {
        this.asideDefaultSelected = selected.key
      },
      handleOpen(key, keyPath) {
        console.log(key, keyPath);
      },
      handleClose(key, keyPath) {
        console.log(key, keyPath);
      },
      handleSelect(key, keyPath) {
        console.log(key, keyPath);
      },
    },
複製代碼