Element-UI 写后台【三】 tags标签联动

1、 引入tags

<el-tag
  :key="tag"
  v-for="tag in dynamicTags"
  closable
  :disable-transitions="false"
  @close="handleClose(tag)">
  {{tag}}
</el-tag>

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

2、 vuex

state:{
tabList:[ //存放tab
 //初始页面
       {
                path: '/',
                label: '首页',
                name: 'home',
                icon: 'home',

         }

]
}
mutations:{
    
  selectMenu(state,value){
       //1、默认有一个首页不被删除的，
      //2、【如果不是首页的情况下】点击其他页面添加进来。
     //3、如果点击多次，会放进来多次。所以需要一个去重‘
 if (value.name !== 'home'){
      let result = state.tabList.findIndex(item => item.name === value.name)
     result === -1 ? state.tabList.push(value) : ""
    
}
   
}    

}
//处理Tabs
 closeTab(state, value){
     let result = state.tabList.findIndex(item => item.name === value.name)
   state.tabList.splice(result, 1)
}

             

4、tabs组件

          <el-tag
                :key="tag.name"
                v-for="tag in tags"
                closable
                :disable-transitions="false"
                @close="handleClose(tag)">
            {{tag.label}}
        </el-tag>

import {mapState,mapMutations} from 'vuex'

  computed: {
           ...mapState({
               tags:state=>state.tab.tabList
           })
        },

 methods: {
            ...mapMutations({
                close:'closeTab'
            }),
            handleClose(tag) {
                this.close(tag)
            },

        }