element中tabs标签如何运用

这是实际效果主要功能报告
1.点击左侧导航栏和tabs栏切换页面
2.刷新页面不会导致已选的tabs栏消失
3.刷新页面不会导致当前点击的tabs栏失去点击效果
这里需要运用到vuex与vue-router以及mitt的知识点大家可以个人主页中的关于vuex使用方法简单易懂。vuex使用教程，mitt教程
第一步声明vuex中的属性 editableTabs/editableTabsValue
editableTabs：为当前选择的标签总合

editableTabsValue：为当前选中的标签

在vuex文件中创建方法：

import { createStore } from 'vuex';
import createPersistedState from "vuex-persistedstate";
const store = createStore({
  state: {
    // 添加您的全局状态变量
    info: '',
    editableTabs: [
      {
        title: '首页',
        name: '/home_page',
        content: '/home_page',
      },
    ],
    editableTabsValue: '/home_page'
  },
  mutations: {
    // / 添加您的全局状态更新方法
    updateInfo(state, payload) {
      state.info = payload
    },
    editableTabs(state, payload) {
      state.editableTabs.push({
        title: payload.title,
        name: payload.name,
        content: payload.content
      })
    },
    editableTabsValue(state, payload) {
      state.editableTabsValue = payload
    }
  },
  actions: {
    // 添加您的异步操作和其他处理方法
    // 2秒后更新状态
    updateInfo(context, payload) {
      context.commit('updateInfo', payload)
    },
    //页面导航栏方法
    updateeditableTabs(context, payload) {
      context.commit('editableTabs', payload)
    },
    updateeditableTabsValue(context, payload) {
      context.commit('editableTabsValue', payload)
    }
  },
  getters: {
    // 添加您的子模块（如果有）
    formatInfo(state) {
      // return state.info + ' Tom'
      console.log(state)
    }
  },
  modules: {
  },
  plugins: [createPersistedState()]
});

export default store;

第二步导航栏触发父组件方法传参

import emitter from '../public_method/bus.js'
const addTab=(index : String, label:String)=>{
  emitter.emit('addTab', { index, label });
}
@click="addTab('/Procurement_Management/Purchase_Order','采购订单'

第三部父组件引入添加tabs标签方法

let a = 0
	console.log("点击导航栏时遍历tabs数组，当数组没有出去返回1")
  store.state.editableTabs.forEach(tab => {
    if (tab.title == data.label) {
      return a = 1
    }
  })
  console.log("当数组为一时间添加新的tabs标签，否则跳转到已经有了的tabs标签")
  if (a == 0) {
    //修改值方法
    store.dispatch('updateeditableTabs', {
      title: data.label,
      name: data.index,
      content: data.index
    })
    //标记当前点击的标签
    store.dispatch('updateeditableTabsValue', data.index)
    router.push(store.state.editableTabsValue)
  } else {
    router.push(data.index)
    store.dispatch('updateeditableTabsValue', data.index)
  }

添加代码块

<el-main>
   <el-tabs v-model="store.state.editableTabsValue" type="card" class="demo-tabs"
      :closable="store.state.editableTabsValue != '/home_page' ? true : false" @tab-remove="removeTab"
            @tab-click="Pageswitch">
            <el-tab-pane v-for="item in store.state.editableTabs" :key="item.name" :label="item.title"
              :name="item.content">
            </el-tab-pane>
          </el-tabs>
          <el-row>
            <el-col :span="24"><router-view></router-view>
            </el-col>
          </el-row>
        </el-main>

这里判断出是否首页，首页不可以有删除按钮
删除方法@tab-remove="removeTab"代码

const removeTab = (targetName: string) => {
  const tabs = store.state.editableTabs
  let activeName = store.state.editableTabsValue
  console.log(activeName)
  if (activeName === targetName) {
    tabs.forEach((tab, index) => {
      if (tab.name === targetName) {
        const nextTab = tabs[index + 1] || tabs[index - 1]
        if (nextTab) {
          activeName = nextTab.name
        }
      }
    })
  }
  store.dispatch('updateeditableTabsValue', activeName)
  router.push(activeName)
  store.state.editableTabs = tabs.filter((tab) => tab.name !== targetName)

}

选中代码@tab-click="Pageswitch"可以发生跳转

const Pageswitch = (tab: String, event: String) => {
  store.dispatch('updateeditableTabsValue', tab.props.name)
  router.push(tab.props.name)
}

这样三个效果就完成了我这里会将我首页复制出来大家copy就OK了

<script setup lang="ts">
import Header from '../components/structure/Header.vue'
import Navbar from '../components/structure/Navbar.vue'
import emitter from '../components/public_method/bus'
import { useRouter } from 'vue-router'
import { ref, onMounted } from 'vue'
import { useStore } from 'vuex'
const store = useStore()
const router = useRouter()
onMounted(() => {

})
emitter.on('addTab', (data: any) => {
  let a = 0
  store.state.editableTabs.forEach(tab => {
    if (tab.title == data.label) {
      return a = 1
    }
  })
  if (a == 0) {
    //修改值方法
    store.dispatch('updateeditableTabs', {
      title: data.label,
      name: data.index,
      content: data.index
    })
    store.dispatch('updateeditableTabsValue', data.index)
    router.push(store.state.editableTabsValue)
  } else {
    router.push(data.index)
    store.dispatch('updateeditableTabsValue', data.index)
  }
})
const removeTab = (targetName: string) => {
  const tabs = store.state.editableTabs
  let activeName = store.state.editableTabsValue
  console.log(activeName)
  if (activeName === targetName) {
    tabs.forEach((tab, index) => {
      if (tab.name === targetName) {
        const nextTab = tabs[index + 1] || tabs[index - 1]
        if (nextTab) {
          activeName = nextTab.name
        }
      }
    })
  }
  store.dispatch('updateeditableTabsValue', activeName)
  store.state.editableTabs = tabs.filter((tab) => tab.name !== targetName)

}
const Pageswitch = (tab: String, event: String) => {
  store.dispatch('updateeditableTabsValue', tab.props.name)
  router.push(tab.props.name)
}
</script>
<template>
  <div class="common-layout">
    <el-container>
      <el-header style="--el-header-padding: 0 0px">
        <Header />
      </el-header>
      <el-container>
        <el-aside>
          <navbar></navbar>
        </el-aside>
        <el-main>
          <el-tabs v-model="store.state.editableTabsValue" type="card" class="demo-tabs"
            :closable="store.state.editableTabsValue != '/home_page' ? true : false" @tab-remove="removeTab"
            @tab-click="Pageswitch">
            <el-tab-pane v-for="item in store.state.editableTabs" :key="item.name" :label="item.title"
              :name="item.content">
            </el-tab-pane>
          </el-tabs>
          <el-row>
            <el-col :span="24"><router-view></router-view>
            </el-col>
          </el-row>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>