el-tabs样式调整 ，切换时，下划线不变形_el-tabs 样式

el-tabs样式调整

<el-tabs ref="tabs" v-model="activeNameTab" class="custom-tabs" @tab-click="handleClick">
          <el-tab-pane label="销售额" name="sales"/>
          <el-tab-pane label="毛利额" name="gross"/>
          <el-tab-pane label="毛利率" name="gross_rate"/>
          <el-tab-pane v-if="salesPlat == '全部'" label="损耗金额" name="loss"/>
        </el-tabs>
1
2
3
4
5
6

mounted() {
    this.resetActivePosition(this.$refs.tabs.$el)
  },
  methods: {
    handleClick() {
      this.resetActivePosition(this.$refs.tabs.$el)
      this.$emit('handleTabChange', this.activeNameTab)
    },
    resetActivePosition($el) { // tabs的样式修改
      this.$nextTick(() => {
        const activeEl = $el.querySelector('.el-tabs__item.is-active')
        const lineEl = $el.querySelector('.el-tabs__active-bar')
        const style = getComputedStyle(activeEl)
        const pl = style.paddingLeft.match(/\d+/)[0] * 1
        const pr = style.paddingRight.match(/\d+/)[0] * 1
        const w = style.width.match(/\d+/)[0] * 1
        lineEl.style.transform = 'translateX(' + (activeEl.offsetLeft + pl) + 'px)'
        lineEl.style.width = (w - pl - pr) + 'px'
      })
    },
  }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

<style scoped>
  .custom-tabs {
    display: flex;
    justify-content: flex-end;
  }
  /deep/.el-tabs__item {
    height: 27px;
    line-height: 25px;
    padding: 0;
    margin: 0 8px;
  }

  /* 鼠标选中时样式 */
  /deep/.el-tabs__item.is-active {
    color: #292929;
    font-weight: bold;
  }
  /* 鼠标悬浮时样式 */
  /deep/.el-tabs__item:hover {
    color: #00D1CB;
    cursor: pointer;
    opacity: 1;
  }
  /deep/.el-tabs__active-bar {
    background-color: #00D1CB;
  }
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27