注: 本人水平有限,仅供参考,有所意见和建议欢迎指出,

效果展示

代码实现

<template>
  <div class="tabs">
    <el-tabs 
      v-model="activeName" 
      @tab-click="handleClick"
      >
      <el-tab-pane label="Day" name="first">一颗山楂</el-tab-pane>
      <el-tab-pane label="Week" name="second">A_Hawthorn</el-tab-pane>
      <el-tab-pane label="Month" name="third">Hawthorn_Fruit</el-tab-pane>
    </el-tabs>
  </div>
</template>

<style scoped>
	.tabs {
	  text-align: center;
	  top: 50px;
	  left: 50px;;
	  position: relative;
	}
	.el-tabs{
	  background-color: #EFF6FF;
	  color: #000;
	  border-radius: 17px;
	  left: 0px;
	  top: 0px;
	  width: 315px;
	  height: 36px;
	  position: relative;
	}
	/* 去除灰色横条 */
	::v-deep .el-tabs__nav-wrap::after {
	  position: static !important;
	}
	/* 设置滑块颜色 */
	::v-deep .el-tabs__active-bar{
	  background-color: #538FFF !important;
	}
	/* 设置滑块停止位置 */
	::v-deep .el-tabs__active-bar.is-top{
	  height: 37px;
	  width: 104px ! important;
	  border-radius: 17px;
	  top: 0px !important;
	  left: -18px !important;
	  position: absolute !important;
	  z-index: 1;
	}
	/* 设置当前选中样式 */
	::v-deep .el-tabs__item.is-active{
	  color:#ffffff !important;
	  z-index: 2;
	}
	/* 设置未被选中样式 */
	::v-deep .el-tabs__item{
	  padding: 0 20px !important;
	  width: 104px;
	  box-sizing: border-box;
	  display: inline-block;
	  position: relative !important;
	  color:#000000 !important;
	  z-index: 2;
	}
</style>

<script>
  export default {
    data() {
      return {
        activeName: 'second',
      }
    },
    methods: {
       handleClick(tab, event) {
        console.log(this.choseColor);
      }
    }
  }
</script>