1.页面

      //父盒子
      <div class="navHistory gzparkNavWarp" @mousewheel="handleMouseWheel">
      //子盒子
        <el-tag
          class="gzparkNav"
          v-for="tag in tags"
          :key="tag.name"
          closable
          :type="tag.type"
          :disable-transitions="true"
          @close="handleClose(tag)"
        >
          {{ tag.name }}
        </el-tag>
      </div>

2.在vue methods方法中定义

methods: {
    //滑动鼠标滚轮实现横向滚动
    handleMouseWheel(e) {
      const scrollLeft = document.querySelector(".gzparkNavWarp").scrollLeft;
      const offsetWidth = document.querySelector(".gzparkNavWarp").offsetWidth;
      const scrollWidth = document.querySelector(".gzparkNavWarp").scrollWidth;
      if (e.wheelDelta < 0 && scrollLeft + offsetWidth < scrollWidth) {
        document.querySelector(".gzparkNavWarp").scrollLeft =
          document.querySelector(".gzparkNavWarp").scrollLeft + 100;
      } else if (e.wheelDelta > 0 && scrollLeft > 0) {
        document.querySelector(".gzparkNavWarp").scrollLeft =
          document.querySelector(".gzparkNavWarp").scrollLeft - 100;
      }
    },
  }

<style lang="scss" scoped>
.navHistory {//父盒子
  width: 100%;
  height: 40px;
  border-bottom: 1px solid #ccc;
  display: flex;
  align-items: center;
  overflow: hidden;//清除滚动条
  .gzparkNav {//子盒子
    margin: 0 10px;
  }
}
</style>