el-tabs sets the width of the underline and the text is centered

The effect is as shown in the figure, because I have searched a lot and failed to find an effective method. I have repeatedly tested and realized it, so I record it

code show as below

If you want to use the form to switch parent-child components, you need to use v-if to control the display and hide when switching, otherwise it will flash the screen when switching

<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>

The main code is css

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

In this way, it can be realized. This is the end of the article. I hope it will be helpful to you~