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

效果如图，因为找了很多都没找到有效方法，反复测试实现，故此记录

代码如下

如果要走表单切换父子组件的时候，需要时候用v-if来控制切换的时候显示隐藏，不然切换的时候会闪屏一下

<template>
  <d2-container>
    <el-card class="box-card">
        <el-tabs v-model="activeName">
          <el-tab-pane  label="测试11" name="first">
        <VibrationWireSersorl v-if="activeName==='first'"></VibrationWireSersorl>
        </el-tab-pane>
        <el-tab-pane label="测试22" name="aaa">
          
        </el-tab-pane>
        <el-tab-pane label="测试33" name="third">
          
        </el-tab-pane>
      </el-tabs>
    </el-card>
    <template slot="footer"><div></div></template>
  </d2-container>
</template>

<script>
import VibrationWireSersorl from "./vibrationWireSersorl.vue";
export default {
  components:{
    VibrationWireSersorl
  },
  data() {
    return {
        activeName: "first"
    };
  },
  mounted() {

  },
  created() {

  },
  methods: {
    
  }
};
</script>

<style lang="scss" scoped>
.box-card{
    border: none;
    height: 100%;
}
//主要css
::v-deep .el-tabs__item {
  padding: 0px;
  width: 170px;
  text-align: center;
}
// 设置标签距离左边的间接
::v-deep .el-tabs__header {
  padding-left: 30px; /*设置标签头左边距*/
}

</style>

主要代码就是css

::v-deep .el-tabs__item {
  padding: 0px;
  width: 170px;
  text-align: center;
    // padding-right: 40px;
    // margin-left: 30px;
}

这样就可以实现了，文章到此结束，希望对你有所帮助~