element UI中的tab切换栏 - 千年寒冰90 - 博客园

安宇雨 - 随手采集
2021-08-06 13:33:11
随手采集
0000-未整理-等待研究

html代码：（用的是el-tab组件）

1 <el-tabs v-model="activeIndex" type="border-card" @tab-click="tabClick" @tab-remove="tabRemove">
2 <el-tab-pane :closable="item.name == '首页'?false:true" :key="item.name" v-for="(item) in options" :label="item.name" :name="item.route">
3 </el-tab-pane>
4 </el-tabs>

methods:

; "复制代码")

1 // tab 切换时, 动态的切换路由
2 tabClick(tab) {
3 this.$router.push({
4 path: this.activeIndex
5 }); // 路由跳转
6 },
7
8
9 tabRemove(targetName) { 10 this.$store.dispatch('menu/deleteTabs', targetName); 11 // 还同时需要处理一种情况当需要移除的页面为当前激活的页面时, 将上一个 tab 页作为激活 tab
12 if (this.activeIndex === targetName) { 13 // 设置当前激活的路由
14 if (this.options && this.options.length >= 1) { 15 this.$store.dispatch('menu/setActiveIndex', this.options\[this.options.length - 1\].route); 16 this.$router.push({ 17 path: this.activeIndex 18 }); 19 }else{ 20 this.$router.push('/home') 21 } 22 } 23 }

; "复制代码")

数据是存放在vuex中的：

; "复制代码")

1 computed: {
2 options: {
3 get () {return this.$store.state.menu.options},
4 set (val) {this.$store.dispatch('menu/addTabs', val)}
5 },
6 // 动态设置及获取当前激活的 tab 页
7 activeIndex: {
8 get() {
9 return this.$store.state.menu.activeIndex; 10 }, 11 set(val) { 12 this.$store.dispatch('menu/setActiveIndex', val); 13 } 14 } 15 },

; "复制代码")

mounted:

; "复制代码")

1 mounted() {
2 let options = JSON.parse(window.localStorage.getItem('menuOptions'))
3 this.activeIndex = localStorage.getItem('menuIndex')
4 if(!options) {
5 options = [] 6 this.$router.push('/home')
7 this.$store.commit('menu/SET_ACTIVEI_NDEX', options.route)
8 // this.$store.dispatch('menu/setActiveIndex', options.route)
9 }else { 10 this.$store.commit('menu/SET_OPTIONS', options) 11 } 12 //this.$store.dispatch('menu/setActiveIndex', options.route) 13 //this.$store.commit('menu/SET_OPTIONS', options) 14 // 设置当前激活的路由
15 if (options && options.length >= 1) { 16 for(var i = 0; i < options.length; i++){ 17 if(options[i].route == this.activeIndex){ 18 this.$store.dispatch('menu/setActiveIndex', options[i].route) 19
20 } 21 } 22 }else{ 23 this.$router.push('/home') 24 } 25 },

; "复制代码")

store/menu.js

; "复制代码")

1 const state = { 2 options: [{ route: '/home', name: '首页' }], 3 activeIndex: '/home'
4 }
5 const mutations = { 6 SET_OPTIONS: (state, data) => { 7 state.options = data 8 },
9 // 添加 tabs
10 ADD_TABS: (state, data) => { 11 //state.options.findIndex(m => m.name === data.name) < 0 && state.options.push(data)
12 state.options.push(data); 13 localStorage.setItem("menuOptions", JSON.stringify(state.options)) 14 }, 15 // 删除 tabs
16 DELETE_TABS: (state, route) => { 17 let index = 0; 18 for (let option of state.options) { 19 if (option.route === route) { 20 break; 21 } 22 index++; 23 } 24 state.options.splice(index, 1); 25 localStorage.setItem("menuOptions", JSON.stringify(state.options)) 26 }, 27 // 设置当前激活的 tab,route
28 SET_ACTIVEI_NDEX: (state, index) => { 29 state.activeIndex = index; 30 localStorage.setItem("menuIndex", state.activeIndex) 31 }, 32 } 33 const actions = { 34 addTabs({ commit }, info) { 35 commit('ADD_TABS', info) 36 }, 37 deleteTabs({ commit }, info) { 38 commit('DELETE_TABS', info) 39 }, 40 setActiveIndex({ commit }, info) { 41 commit('SET_ACTIVEI_NDEX', info) 42 }, 43 } 44
45
46 export default { 47 namespaced: true, 48 state, 49 mutations, 50 actions 51 }

; "复制代码")

over!

原网址: 访问
创建于: 2021-08-06 13:33:11
目录: default
标签: 无

未标明原创文章均为采集，版权归作者所有，转载无需和我联系，请注明原出处，南摩阿彌陀佛，知识，不只知道，要得到