efunbox_resources-web/src/pages/layout/tabs/Tabs.vue

<template>
  <div class="tabs">
    <el-tabs v-model="editableTabsValue" type="card" closable @edit="handleTabsEdit">
      <el-tab-pane
        :key="item.name"
        v-for="(item, index) in editableTabs"
        :label="item.title"
        :name="item.name"
      >
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        editableTabsValue: '',
        editableTabs: [],
      }
    },
    methods: {
      handleTabsEdit(targetName, action) {
        if (action === 'add') {
          if (this.editableTabs.length > 2) {
               this.editableTabs.forEach(item => {
                //  console.log(item.name)
                // if (path.indexOf(item.name) == -1) {

                // }
               })
          } else {
            this.editableTabs.push({
              title: targetName.title,
              name: targetName.url,
            });
            this.editableTabsValue = targetName.url;
          }
        }
        if (action === 'remove') {
          let tabs = this.editableTabs;
          let activeName = this.editableTabsValue;
            tabs.forEach((tab, index) => {
              if (tab.name === targetName) {
                let nextTab = tabs[index + 1] || tabs[index - 1];
                if (nextTab) {
                  activeName = nextTab.name;
                }
              }
            });
          this.editableTabsValue = activeName;
          this.editableTabs = tabs.filter(tab => tab.name !== targetName);
        }
      }
    },
    watch: {
      $route(to, from) {
        const router = this.$router.options.routes;
        const path = this.$route.path;
        console.log(path)
        this.editableTabsValue = path;
        router.forEach(element => {
            if(element.children) {
              element.children.forEach(item => {
                console.log(item.meta)
                if (path.indexOf(item.meta.url) !== -1) {
                  console.log(item.meta)
                  this.handleTabsEdit(item.meta, 'add')
                }
              })
            }
        });
      }
    },
    mounted: function () {
      const router = this.$router.options.routes;
      const path = this.$route.path;
      console.log(path)
      this.editableTabsValue = path;
      router.forEach(element => {
          if(element.children) {
            element.children.forEach(item => {
              console.log(item.meta)
              if (path.indexOf(item.meta.url) !== -1) {
                console.log(item.meta)
                this.handleTabsEdit(item.meta, 'add')
              }
            })
          }
      });
    }
  }
</script>
<style lang="scss">
  .tabs {
    white-space: nowrap;
    overflow: hidden;
    width: 100%;
    height: 40px;
    border-bottom: 1px solid #ccc;
    padding: 4px 0;
    box-sizing: border-box;
    .el-tabs--card {
      margin: 0;
      .el-tabs__header {
        border: none;
        margin: 0;
        .el-tabs__item {
          border: 1px solid #ccc;
          margin: 0 5px;
          height: 32px;
          line-height: 32px;
        }
        .el-tabs__nav {
          border: none;
        }
      }
    }
    .el-tabs__item.is-active {
      background-color: #42b983;
      color: #fff;
      border-color: #42b983;
    }
  }
</style>