vue项目中顶部菜单切换，内容过多加左右按钮

   <el-col :span="12">
        <!-- <el-scrollbar wrap-class="scrollbar-wrapper"> -->
        <div class="map_div">
          <el-col :xs="1" :sm="1" :lg="1">
            <div
              v-show="showLeftArrow"
              v-if="showInitMenu"
              id="left_"
              class="dh_li"
              @click="move_left()"
            >
              <!-- <icon-svg name="icon-left-arrow"></icon-svg> -->
              <i class="el-icon-arrow-left" style="color:#fff"></i>
            </div>
          </el-col>
          <el-col :xs="22" :sm="22" :lg="22">
            <div id="dh_li">
              <el-menu
                :default-active="activeMenu"
                text-color="#FFFFFF"
                :unique-opened="false"
                :active-text-color="'#00E5FF'"
                :collapse-transition="false"
                mode="horizontal"
              >
                <sidebar-item
                  v-for="route in routes"
                  :key="route.path"
                  :item="route"
                  :base-path="route.path"
                />
              </el-menu>
            </div>
          </el-col>
          <el-col :xs="1" :sm="1" :lg="1">
            <div
              v-show="showRightArrow"
              v-if="showInitMenu"
              id="right_"
              class="dh_li"
              @click="move_right()"
            >
              <!-- <icon-svg name="icon-right-arrow"></icon-svg> -->
              <i class="el-icon-arrow-right" style="color:#fff"></i>
            </div>
          </el-col>
        </div>
        <!-- <el-menu
          :default-active="activeMenu"
          text-color="#FFFFFF"
          :unique-opened="false"
          :active-text-color="'#00E5FF'"
          :collapse-transition="false"
          mode="horizontal"
        >
          <sidebar-item
            v-for="route in routes"
            :key="route.path"
            :item="route"
            :base-path="route.path"
          />
        </el-menu> -->
        <!-- </el-scrollbar> -->
      </el-col>


 data() {
    return {
      
      showLeftArrow: false,
      showRightArrow: false,
      showInitMenu: true,
    };

 mounted() {
    let _ = this;

    if (document.body.offsetWidth <= 1024) {
      _.showInitMenu = false;
    } else {
      _.showInitMenu = true;
    }
    let menuWidth = document.getElementById("dh_li").offsetWidth;
    if (this.routes.length > 7 || menuWidth < 1000) {
      _.showLeftArrow = true;
      _.showRightArrow = true;
    } else {
      _.showLeftArrow = false;
      _.showRightArrow = false;
    }
  },

 methods: {
   
    move_left() {
      var demo = document.getElementById("dh_li");
      if (dh_li.scrollLeft >= 0) dh_li.scrollLeft -= 140;
    },
    move_right() {
      var demo = document.getElementById("dh_li");
      if (dh_li.scrollLeft <= 1900 - 800) dh_li.scrollLeft += 140;
    },
  },




#dh_li {
  height: 65px;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
  margin-left: -15px;
}

#dh_li li {
  width: 150px;
  height: 65px;
  text-align: center;
  overflow: hidden;
}

li.el-menu-item.sf-home-1,
li.el-menu-item.sf-menu-1,
li.sf-menu-1.el-submenu {
  width: 140px !important;
  text-align: center;
}
.dh_li {
  float: left;
  font-size: 22px;
  line-height: 65px;
 

  &:hover {
    cursor: pointer;
  }
}