el-tag 标签 + 点击菜单栏添加对应标签 + 点击标签跳转菜单栏变蓝

el-tag：

　　<el-tag
    v-for="tag in tags"            //循环
    :key="tag.index"               //
    closable                           　//可关闭
    @close="handleClose(tag)"            //关闭方法
    @click="handleClick(tag)"            //点击标签
    :effect="activeName == tag ? 'dark' : 'plain'"           //点击标签主题颜色改变
    size="small">        　　　　　　　　　　//大小 medium / small / mini
        {{tag}}　　　　//循环的内容
    </el-tag>                        

data中注册

data(){
  return{
  　　tags: [],        //最初为空数组
  　　activeName:[]    //最初为空，为plain主题
  }
},

 

---

1、点击关闭：

handleClose(tag) {
        this.tags.splice(this.tags.indexOf(tag), 1);
    },

 

2、点击菜单添加对应标签，且只添加一次：

handOne() {
        if(this.tags.indexOf("终端商招商收入统计") < 0){　　　　//indexOf 判断数组中是否存在某元素，不存在则返回 -1
            this.tags.push("终端商招商收入统计");　　　　　　　　//push 向数组尾部添加一个元素
        }
    },

 

3、点击标签跳转，且菜单栏对应变蓝：

handleClick(tag){
        this.activeName = tag;
        if(tag == "终端商招商收入统计"){
            this.$router.replace('/5-1-1');      //跳转
            this.activePath = '5-1-1';           //变色
        }
   },

　　点击标签，左侧菜单栏对应变蓝：

　　菜单栏里设置：　　　:default-active="activePath"　　　　default-active为默认边色标签的 index

　　data里设置：　　　　activePath:' ',

　　点击事件里设置：　　this.activePath = '5-1-1';