I don't know if the landlord wants the effect in my picture.
Click the left menu bar to display the label button of the current column in the right header. When the label bar is full, it automatically scrolls to the visible area.
this implementation is also relatively simple. The following is the principle of my implementation
left menu leftbar page plus submenu navitem page omitted, please leave a message if necessary.
this focuses on the implementation of the tagNav page

<template>
  <div class="tag-nav">
    <scroll-bar ref="scrollBar">
      <router-link
        ref="tag"
        class="tag-nav-item"
        :class="isActive(item) ? 'cur' : ''"
        v-for="(item, index) in tagNavList"
        :to="item.path"
        :key="index"
      >
        {{item.title}}
        <span class="el-icon-close" @click.prevent.stop="closeTheTag(item, index)"></span>
      </router-link>
    </scroll-bar>
  </div>
</template>

<script>
import ScrollBar from '@/components/ScrollBar';

export default {
  data() {
    return {
      defaultPage: '/main',
    };
  },
  computed: {
    tagNavList() {
      //console.log(this)
      //console.log(this.$store)
      //console.log(this.$store.state.tagNav.openedPageList);
      return this.$store.state.tagNav.openedPageList;
    },
  },
  mounted() {
    // 
    this.addTagNav();
  },
  watch: {
    $route() {
      this.addTagNav();
      this.scrollToCurTag();
    },
  },
  methods: {
    addTagNav() {
      // nameroutername
      this.$store.commit('tagNav/addTagNav', {
        //name: this.$router.getMatchedComponents()[1].name,
        name: this.$route.name,
        path: this.$route.path,
        title: this.$route.meta.title,
      });
    },
    isActive(item) {
      return item.path === this.$route.path;
    },
    closeTheTag(item, index) {
      // TagTag
      // Tag
      this.$store.commit('tagNav/removeTagNav', item);
      if (this.$route.path == item.path) {
        if (index) {
          this.$router.push(this.tagNavList[index - 1].path);
        } else {
          this.$router.push(this.defaultPage);
          if (this.$route.path == this.defaultPage) {
            this.addTagNav();
          }
        }
      }
    },
    scrollToCurTag() {
      this.$nextTick(() => {
        for (let item of this.$refs.tag) {
          if (item.to === this.$route.path) {
            this.$refs.scrollBar.scrollToCurTag(item.$el);
            break;
          }
        }
      });
    },
  },
  components: { ScrollBar },
};
</script>

<style lang="less" scoped>
.tag-nav {
  position: absolute;
  top: 0;
  width: 100%;
  height: 53px;
  padding: 10px;
  background: -sharpfff;
  border-bottom: 1px solid -sharpddd;
  box-shadow: 0 1px 2px -sharpf2f2f2;
  box-sizing: border-box;
  .tag-nav-item {
    display: inline-block;
    position: relative;
    height: 30px;
    line-height: 30px;
    padding: 0 10px;
    margin-right: 10px;
    border: 1px solid rgba(82, 186, 181, 0.2);
    border-radius: 4px;
    background-color: rgba(82, 186, 181, 0.1);
    text-decoration: none;
    span {
      width: 16px;
      height: 16px;
      line-height: 16px;
      border-radius: 50%;
      text-align: center;
      vertical-align: middle;
      transition: all 0.3s ease;
      -webkit-transform-origin: 100% 50%;
      -ms-transform-origin: 100% 50%;
      transform-origin: 100% 50%;
      font-size: 12px;
      color: -sharp52bab5;
    }
  }
  .cur {
    background-color: -sharp52bab5;
    color: -sharpfff;
    span {
      color: -sharpfff;
    }
  }
}
</style>

in which when the tag is full, it automatically scrolls to the left to make the current tag visible.
ScrollBar components

<template>
  <div class="scroll-wrap" ref="scrollWrap" @wheel.prevent="scroll">
    <div class="scroll-cont" ref="scrollCont" :style="{left: left + 'px'}">
      <slot></slot>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      left: 0,
      wheelSpeed: 30,
    };
  },
  mounted() {},
  methods: {
    scroll(e) {
      const scrollWrapWidth = this.$refs.scrollWrap.offsetWidth;
      const scrollContWidth = this.$refs.scrollCont.offsetWidth;
      if (scrollContWidth > scrollWrapWidth) {
        // wheel
        // chrome/FF/Edge/IE11/IE10/IE9
        // e.deltaY > 0 left
        const scrollSpace =
          e.deltaY > 0 ? -1 * this.wheelSpeed : this.wheelSpeed;
        if (e.deltaY > 0) {
          if (
            Math.abs(this.left + scrollSpace) <=
            scrollContWidth - scrollWrapWidth
          ) {
            this.left += scrollSpace;
          }
        } else {
          if (this.left + scrollSpace < 0) {
            this.left += scrollSpace;
          } else {
            this.left = 0;
          }
        }
      } else {
        return;
      }
    },
    scrollToCurTag(tar) {
      const scrollWrapWidth = this.$refs.scrollWrap.offsetWidth;
      const tarWidth = tar.offsetWidth;
      const tarLeft = tar.offsetLeft;

      if (tarLeft < -1 * this.left) {
        // 
        this.left = -tarLeft;
      } else if (tarLeft + tarWidth > scrollWrapWidth) {
        // 
        this.left = -(tarLeft + tarWidth - scrollWrapWidth);
      }
    },
  },
};
</script>
<style scoped>
.scroll-wrap {
  position: relative;
  width: 100%;
  height: 100%;
  white-space: nowrap;
  overflow: hidden;
}
.scroll-cont {
  position: absolute;
  transition: all 0.3s ease;
}
</style>