【常见】点击侧边栏导航 顶部标签内小圆点高亮

准备: activeIndex变量名字符串 ， activeArray变量名 数组

思路一.: 首先拿到侧边导航点击事件函数和每一项的下标 触发函数后向 数组activeArray内push点击侧边栏导航获取到的索引 , 就是把点击后的索引添加到数组内, 然后在把 activeArray 数组内末尾项赋值给 activeIndex 变量， 然后template :class:{active: 条件},这里的条件是 当activeArray内的每一项 于 activeIndex 相等时就执行成功。

上面思路完成后还有BUG就是 重复值也添加到数组内

思路二.判断点击侧边导航后的得到下标 不存在数组内执行

上面只打理了 点击的下标不存在，那么存在呢

思路三.存在就 使用find将数组内和下标相等的索引返回，并赋值this.activeIndex
 

我感觉对于后面条件判断自己还是有点懵，飞机搞多了 脑子哎！ 切记哈切记

<template>    
<div>
 <el-menu  
  :default-active="activeIndex"          
    @select="handleSelect">
  <el-menu>

 <!-- 小圆点 -->
 <span  :class="{ active: activeIndex == activeArray[index] }"></span>
</div>
</template>   

  data () { 
    return {
     activeIndex: null,
      activeArray: ['1'],
  } }

methods{

    handleSelect (index) {
     if (!this.activeArray.some(item => item == index)) {
        this.activeArray.push(index)
        this.activeIndex = this.activeArray[this.activeArray.length - 1]
      } else {
        this.activeIndex = this.activeArray.find(item => item === index)
      }
    }

  }       


<style lang="scss" scoped>
.active{
  background-color: #5fb878;
 }
</style>