修改el-tabs下划线的样式

默认情况下，el-tabs下划线长度根据标签内容自动调整。那么如何自定义e-tabs的样式呢？

1.el-tabs标签设置自定义class名

<el-tabs v-model="" class='custom-tabs'>
  <el-tab-pane v-for="(item, index) in list" :key="index" :label="item.value"></el-tab-pane>
</el-tabs>

2.css样式中这样写:

// 此处是把tabs的边距清空
::v-deep .el-tabs__item { 
  padding: 0;
}
.custom-tabs ::v-deep .el-tabs__active-bar {
  width: 21px!important; // 假如设置下划线固定21px
  margin-left: calc((100% / 3 - 21px) / 2); // 3为tabs的数量
  background-color: red;
  height: 4px;
  border-radius: 4px;
}

3.最终效果