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"

　　　　　　　　　　:closeable="tag.name !== 'home'

                @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)
            },

        }