el-button切换按钮样式改变，并且第一个按钮默认显示样式

<el-button
         v-for="(item, index) in btnsArr"//遍历显示多个按钮
                :key="index"//保证唯一值
                :class="{ show: item.id == valueBtn }"//判断显示当前点击的图表是哪个，之后添加show样式
                @click="settabs(item, index)"//点击改变数据样式变化
                >{{ item.name }}</el-button
              >

下面data的数据，btnArr定义显示数据按钮有多少个，valueBtn控制默认显示数据，通过item.id的值等于valueBtn的值实现样式切换显示，并且第一个button样式为默认选中状态

 

  btnsArr: [
        { id: 1, name: '全周期' },
        { id: 2, name: '半年' },
        { id: 3, name: '季度' },
        { id: 4, name: '月' }
      ],
      valueBtn: 1,

methods中数据，点击按钮后切换显示

 

settabs(item, index) {
      console.log(item, index)
      this.valueBtn = item.id
    }

css样式，用于切换显示

.show {
  background-color: #1890ff;
  color: #fff;
}

希望对大家有所帮助