使用elementUI的el-tag实现菜单tab标签超出宽度视口移到当前标签可视化位置

在Element UI中，`el-tag`组件用于创建标签页或卡片标题。如果你想实现在菜单Tab标签超出宽度时自动滚动到可视区域并显示当前选中的标签，你可以通过CSS和JavaScript配合来实现。以下是一个简单的步骤：

1. 首先，在HTML结构上，保持`el-tabs`标签的默认布局，并确保每个`el-tag`都有唯一标识，以便判断哪个是当前选中的。

<template>
  <el-tabs v-model="activeName">
    <el-tab-pane label="Tab 1" name="pane1">
      <!-- 标签内容 -->
    </el-tab-pane>
    <el-tab-pane label="Tab 2" name="pane2">
      <!-- 标签内容 -->
    </el-tab-pane>
    <!-- 更多的tab pane... -->
  </el-tabs>
</template>

2. 然后，在Vue组件的样式中，设置`el-tag`的溢出部分滚动条以及滚动到当前标签的CSS规则。你可以尝试使用`:hover`伪类来切换时滚动到对应标签。

.el-tabs__item {
  position: relative;
}

.el-tabs__item:hover .el-tag {
  overflow-x: auto;
  white-space: nowrap;
}

.el-tabs__item.is-active .el-tag {
  left: 0; /* 当前激活的标签左移至可视区域 */
}

3. 最后，在JavaScript中，当`activeName`发生变化时，手动滚动到对应的`el-tag`。这可以通过获取元素的offsetLeft值然后设置其scrollLeft来实现。

export default {
  data() {
    return {
      activeName: 'pane1',
    };
  },
  methods: {
    handleTabChange(tab) {
      this.activeName = tab.name;
      const elTag = document.querySelector(`.el-tabs__item.is-active .el-tag`);
      if (elTag) {
        elTag.scrollIntoView({ behavior: 'smooth' });
      }
    },
  },
  watch: {
    activeName(newVal, oldVal) {
      this.handleTabChange({ name: newVal });
    },
  },
};

注意：这个示例假设你已经在Vue实例中绑定了`handleTabChange`方法，当你切换tab时，它会被调用。同时，`scrollIntoView`方法可能会因为浏览器兼容性的问题需要处理，如果在某些旧版本的浏览器下有问题，可以考虑使用其他库如`vue-scrollto`.