菜单栏动态展示样式（滚动条=》更多）

<template>
  <div class="Tabs">
    <div class="origin-menu-item-wrap" ref="menuBarRef">
      <div v-for="(item, index) in menuOriginData1" :key="index" class="menu-item">
        {{ item.name }}
      </div>
    </div>
    <el-dropdown style="width: 100px" v-if="sliceIndex !== this.menuOriginData.length">
      <span class="el-dropdown-link">
        下拉菜单<i class="el-icon-arrow-down el-icon--right"></i>
      </span>
      <el-dropdown-menu slot="dropdown">
        <el-dropdown-item>黄金糕</el-dropdown-item>
        <el-dropdown-item>狮子头</el-dropdown-item>
        <el-dropdown-item>螺蛳粉</el-dropdown-item>
        <el-dropdown-item disabled>双皮奶</el-dropdown-item>
        <el-dropdown-item divided>蚵仔煎</el-dropdown-item>
      </el-dropdown-menu>
    </el-dropdown>
  </div>
</template>

<script>
export default {
  data() {
    return {
      sliceIndex: 0,
      showdropdown: false,
      menuOriginData: [
        { name: "哆啦a梦", id: 1 },
        { name: "宇智波佐助", id: 1 },
        { name: "香蕉之王奥德彪", id: 1 },
        { name: "漩涡鸣人", id: 1 },
        { name: "雏田", id: 1 },
        { name: "大雄", id: 1 },
        { name: "源静香", id: 1 },
        { name: "骨川小夫", id: 1 },
        { name: "超级马里奥", id: 1 },
        { name: "自来也", id: 1 },
        { name: "孙悟空", id: 1 },
        { name: "卡卡罗特", id: 1 },
        { name: "万年老二贝吉塔", id: 1 },
        { name: "小泽玛丽", id: 1 },
        
      ],
      menuOriginData1: [
        { name: "哆啦a梦", id: 1 },
        { name: "宇智波佐助", id: 1 },
        { name: "香蕉之王奥德彪", id: 1 },
        { name: "漩涡鸣人", id: 1 },
        { name: "雏田", id: 1 },
        { name: "大雄", id: 1 },
        { name: "源静香", id: 1 },
        { name: "骨川小夫", id: 1 },
        { name: "超级马里奥", id: 1 },
        { name: "自来也", id: 1 },
        { name: "孙悟空", id: 1 },
        { name: "卡卡罗特", id: 1 },
        { name: "万年老二贝吉塔", id: 1 },
        { name: "小泽玛丽", id: 1 },
      ],
      user: "",
    };
  },
  name: "Tabs",
  components: {},
  async mounted() {
    window.addEventListener("resize", () => this.isshowdropdown());
  },
  beforeDestroy() {
    window.removeEventListener("resize", () => this.isshowdropdown());
  },
  methods: {
    isshowdropdown() {
      // 计算截断菜单的索引位置
      this.sliceIndex = 0;
      // 获取menu-item元素dom的集合
      const menuItemNodeList = this.$refs.menuBarRef.querySelectorAll(".menu-item");
      // 将NodeList转换成数组
      const nodeArray = Array.prototype.slice.call(menuItemNodeList);
      let addWidth = 0;
      for (let i = 0; i < nodeArray.length; i++) {
        addWidth += nodeArray[i].clientWidth + 10;
        if (addWidth + 100 > this.$refs.menuBarRef.clientWidth) {
          this.sliceIndex = i;
          break;
        } else {
          this.sliceIndex = this.menuOriginData.length;
        }
      }
      this.menuOriginData1 = this.menuOriginData.slice(0, this.sliceIndex);
      console.log(this.sliceIndex, "sliceIndex");
    },
  },
};
</script>

<style scoped lang="scss">
.Tabs {
  width: 100%;
  height: 50px;
  margin: 5px;
  display: flex;
  align-items: center;
  background: #f30000;
  .origin-menu-item-wrap {
    width: 100%;
    align-items: center;
    display: flex;
    white-space: nowrap;
    overflow: hidden;
    .menu-item {
      height: 50%;
      text-align: center;
      cursor: pointer;
      background-color: #fff;
      margin-left: 10px;
    }
  }
}
</style>