vue3+elementplus实现tagsView导航标签栏功能

<template>
  <el-tabs v-model="activeName" type="card" closable @tab-remove="removeTab">
    <el-tab-pane
      v-for="item in tabsList"
      :key="item.name"
      :label="item.title"
      :name="item.name"
    ></el-tab-pane>
  </el-tabs>
</template>
 
<script setup>
import { ref } from 'vue';
import { ElTabs, ElTabPane } from 'element-plus';
 
const activeName = ref('1');
const tabsList = ref([
  { title: 'Tab 1', name: '1' },
  { title: 'Tab 2', name: '2' },
]);
 
const removeTab = (targetName) => {
  let tabs = tabsList.value;
  let activeIndex = tabs.findIndex(tab => tab.name === activeName.value);
  let newActiveName = tabs[activeIndex - 1] || tabs[activeIndex + 1];
 
  if (newActiveName) {
    activeName.value = newActiveName.name;
  } else {
    activeName.value = tabs[0].name;
  }
 
  tabsList.value = tabsList.value.filter(tab => tab.name !== targetName);
};
</script>

这个例子使用了Vue 3的 <script setup> 语法糖，结合 Element Plus 的 <el-tabs> 和 <el-tab-pane> 组件实现了一个简单的 tagsView 功能。用户可以添加标签项，并且在关闭（点击标签上的关闭按钮）时会更新当前激活的标签项，并重新渲染标签栏。