el-tabs中设置el-tab-pane下划线的宽度并且让文字居中

记录工作实践

如图默认el-tab-pane：

现在需求： 去掉tabs底部的下划线，以及设置el-tab-pane下划线宽度并且文字居中。如图：

 

• 代码直接展示，如图所示： 

  <el-tabs v-model="singlesType" class="demo-tabs" @tab-click="handleClick">
          <el-tab-pane label="治疗" name="1"> </el-tab-pane>
          <el-tab-pane label="服务" name="2"> </el-tab-pane>
          <el-tab-pane label="营养素" name="3"> </el-tab-pane>
          <el-tab-pane label="疗程" name="4"></el-tab-pane>
        </el-tabs>

•  只需添加css样式：

  
  /*去掉tabs底部的下划线*/
  ::v-deep .el-tabs__nav-wrap::after {
    position: static !important;
  }
  
  /* 设置下划线宽度并且文字居中 */
  ::v-deep .el-tabs__item {
    padding: 0px;
    width: 150px;
    text-align: center;
    /* padding-right: 40px;
    margin-left: 30px; */
  }
  
  /* 设置标签距离左边的间接 */
  ::v-deep .el-tabs__header {
    padding-left: 10px;
  }