利用vue的tab标签做三级导航，当页面显示不全，出现左右切换箭头

    <div class="navbar">
      <el-tabs v-model="activeNames" @tab-click="handleClick">
        <el-tab-pane v-for="item in navList" :key="item.name" :name="item.code"
          ><span slot="label"
            ><router-link :to="item.path">{{ item.name }} </router-link></span
          ></el-tab-pane
        >
      </el-tabs>
    </div>

　　

activeNames: 'taskvolume', //默认突出显示当前标签的三级菜单
navList: [
          {
            code: 'taskvolume',
            name: 'www',
            path: '/report/taskvolume/index'
          },
          {
            code: 'exploit',
            name: 'aaa',
            path: '/report/taskvolume/exploit'
          },
          {
            code: 'examine',
            name: 'ddd',
            path: '/report/taskvolume/examine'
          },
          {
            code: 'developexamine',
            name: 'ccc',
            path: '/report/taskvolume/developexamine'
          },
          {
            code: 'project',
            name: 'zzz',
            path: '/report/taskvolume/project'
          },
          {
            code: 'partstatus',
            name: 'vvv',
            path: '/report/taskvolume/partstatus'
          },
          {
            code: 'completed',
            name: 'bbb',
            path: '/report/taskvolume/completed'
          }
        ]

　　

/* 导航样式 */
.navbar {
  background: #fff;
  height: 35px;
  line-height: 35px;
  text-align: center;
  margin-bottom: 5px;
}

.navbar a {
  font-size: 14px;
  color: #333;
  /* margin: auto; */
  float: left;
  padding: 0 20px;
  text-align: center;
  cursor: pointer;
}
.navbar a:hover {
  color: #4a65a3;
  font-weight: bold;
  /* border-bottom: 3px solid #4a65a3; */
}
.navbar a.cur {
  color: #fff;
  background: #4a65a3;
  border-radius: 5PX;
}
.navbar a.cur:hover {
  color: #fff;
}
.navbar i {
  color: #9fa1b3;
  font-size: 16px;
}
.navbar .el-tabs__item.is-active {
  background: #4a65a3;
  border-radius: 5px;
}
.navbar .el-tabs__item.is-active a {
  color: #fff;
}
.navbar .el-tabs__nav-scroll {
  margin: 0 10px;
}
.navbar .el-tabs__item {
  height: 35px;
  line-height: 35px;
}
.navbar .el-tabs__nav-next,
.el-tabs__nav-prev {
  line-height: 39px !important;
}

　　或者

<div class="navbar">
      <el-tabs v-model="activeNames" @tab-click="handleClick">
        <el-tab-pane name="taskvolume" key="taskvolume"
          ><span slot="label"
            ><router-link to="/report/taskvolume"
              >aaa
            </router-link></span
          ></el-tab-pane
        >
        <el-tab-pane name="exploit" key="exploit"
          ><span slot="label"
            ><router-link to="/report/taskvolume/exploit"
              >bbb</router-link
            ></span
          ></el-tab-pane
        >
        <el-tab-pane name="examine"
          ><span slot="label"
            ><router-link to="/report/taskvolume/examine"
              >ccc</router-link
            ></span
          ></el-tab-pane
        >
        <el-tab-pane name="developexamine"
          ><span slot="label"
            ><router-link to="/report/taskvolume/developexamine"
              >ddd</router-link
            ></span
          ></el-tab-pane
        >
        <el-tab-pane name="project"
          ><span slot="label">
            <router-link to="/report/taskvolume/project"
              >eee</router-link
            ></span
          ></el-tab-pane
        >
        <el-tab-pane name="partstatus"
          ><span slot="label"
            ><router-link to="/report/taskvolume/partstatus"
              >fff</router-link
            ></span
          ></el-tab-pane
        >
        <el-tab-pane name="completed">
          <span slot="label"
            ><router-link to="/report/taskvolume/completed"
              >ggg</router-link
            ></span
          >
        </el-tab-pane>
      </el-tabs>
    </div>