el-menu 导航菜单 item 过多的显示问题

    
    

      

        

          

            

              
            
            

              
                首页
                
                  
                  {
    { item.name ? item.name : item.title }}
              
            
            

              
                
              
            
          
        
        

          参会报名
          修改报名
          我的参会
        
      
    
    
    

      
        
          
          
          
          
        
        
          首页
          {
    {
            item.name ? item.name : item.title
          }}
        
      
    

/*tab part begin*/
.kxb-groupmenu {
  width: 100%;
  display: flex;
  margin-bottom: 0;

  .left,
  .right {
    width: 15px;
    color: #fff;
    font-size: 20px;
  }
  .left {
    text-align: right;
  }

  /* tab 整体高度设置 */

  &,
  .left,
  .right,
  /deep/ .el-menu--horizontal > .el-menu-item {
    height: 60px;
    line-height: 60px;
  }

  .menu {
    text-align: center;
    padding: 0;
    font-size: 1.42rem;

    /deep/ .el-menu--horizontal {
      display: inline-block;
      border-bottom: none;
      background-color: #000;
      width: 100%;
    }

    /deep/ .el-menu--horizontal > .el-menu-item {
      width: var(--showTabNum, 11.11%);
      /*每次显示 8 个 tab   */
      color: white;
      font-size: 1.14rem;
      border-bottom: none;
    }

    /deep/ .el-menu--horizontal > .el-menu-item.is-active,
    /deep/ .el-menu--horizontal > .el-menu-item.is-active:hover {
      /*高亮后 item 样式 */
      background-color: #1b57d6;
    }

    /deep/ .el-menu--horizontal > .el-menu-item:hover {
      /*鼠标滑过 item 样式 */
      color: #1fb9b7;
      background-color: #000;
    }
  }
}

.mobilemenu {
  padding: 10px 15px 5px 0;
  .mobile-tab {
    border: 1px solid #333;
    border-radius: 2px;
    display: inline-block;
    height: 32px;
    width: 38px;
    padding: 7px 8px 0;
    box-sizing: border-box;
    & > span {
      border-bottom: 2px solid #333;
      margin-bottom: 4px;
      display: block;
    }
  }
}
/*tab part end*/

if (this.showTabs.length < 9) {
              //如果 tab 小于 8个 那么 tab 的宽度将不再是 12.5%  
              let value = 100 / (this.showTabs.length + 1) + "%";
              document.body.style.setProperty("--showTabNum", value);
              //这里 + 1 是因为 tab 的宽度计算要算上首页
            }