vue展示同时多个tab并在超出宽度的时候显示箭头可以切换上一页下一页

可以使用element-ui中的Tabs组件，该组件支持滚动和可关闭标签页，并且可以通过设置属性来实现箭头切换上一页下一页的功能。

具体实现步骤如下：

1. 安装element-ui组件库

npm install element-ui -S

2. 在Vue项目中引入element-ui组件库

import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

Vue.use(ElementUI);

3. 在Vue组件中使用Tabs组件

<template>
  <div class="tab-container">
    <el-tabs v-model="activeTab" :tab-position="tabPosition" type="border-card" closable @tab-remove="handleTabRemove">
      <el-tab-pane v-for="(tab, index) in tabs" :key="tab.name" :label="tab.title" :name="tab.name">
        {{ tab.content }}
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
export default {
  data() {
    return {
      activeTab: '',
      tabPosition: 'top',
      tabs: [
        { name: 'tab1', title: '标签页1', content: '标签页1的内容' },
        { name: 'tab2', title: '标签页2', content: '标签页2的内容' },
        { name: 'tab3', title: '标签页3', content: '标签页3的内容' },
        { name: 'tab4', title: '标签页4', content: '标签页4的内容' },
        { name: 'tab5', title: '标签页5', content: '标签页5的内容' },
        { name: 'tab6', title: '标签页6', content: '标签页6的内容' },
        { name: 'tab7', title: '标签页7', content: '标签页7的内容' },
        { name: 'tab8', title: '标签页8', content: '标签页8的内容' },
        { name: 'tab9', title: '标签页9', content: '标签页9的内容' },
        { name: 'tab10', title: '标签页10', content: '标签页10的内容' },
        { name: 'tab11', title: '标签页11', content: '标签页11的内容' },
        { name: 'tab12', title: '标签页12', content: '标签页12的内容' },
        { name: 'tab13', title: '标签页13', content: '标签页13的内容' },
        { name: 'tab14', title: '标签页14', content: '标签页14的内容' },
        { name: 'tab15', title: '标签页15', content: '标签页15的内容' },
      ],
    };
  },
  methods: {
    handleTabRemove(tab) {
      const index = this.tabs.findIndex((t) => t.name === tab.name);
      this.tabs.splice(index, 1);
    },
  },
};
</script>

<style>
.tab-container {
  width: 400px;
  overflow: hidden;
}

.el-tabs__nav-scroll {
  display: flex !important;
  justify-content: space-between;
  align-items: center;
}

.el-tabs__nav-wrap {
  display: flex !important;
}
</style>

4. 自定义样式实现箭头切换上一页下一页的功能

.tab-container {
  width: 400px;
  overflow: hidden;
}

.el-tabs__nav-scroll {
  display: flex !important;
  justify-content: space-between;
  align-items: center;
}

.el-tabs__nav-wrap {
  display: flex !important;
}

.el-tabs__nav-prev,
.el-tabs__nav-next {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  font-size: 12px;
  text-align: center;
  line-height: 20px;
  cursor: pointer;
  background-color: #eee;
}

.el-tabs__nav-prev:hover,
.el-tabs__nav-next:hover {
  background-color: #ddd;
}

.el-tabs__nav-prev.disabled,
.el-tabs__nav-next.disabled {
  cursor: not-allowed;
  background-color: #ccc;
}

在上面的代码中，我们通过设置`.el-tabs__nav-scroll`和`.el-tabs__nav-wrap`的样式，将标签页的导航栏设置为横向布局，并且通过在左侧和右侧添加箭头来实现切换上一页下一页的功能。同时，通过监听`@tab-remove`事件，我们可以在用户关闭标签页时动态更新`this.tabs`数组中的数据。