【设置element按钮组件点击样式】

一、设置element按钮组件点击样式

多个按钮在页面上，被选中的是一种样式，未被选中的是另一种样式，那个按钮被点击，就切换为选择的样式
显示效果如下:
选中的按钮是Year Range

1.template中代码

<div>
	<el-button-group>
		<el-button :type="selectdate" @click="changedate" >Date Range</el-button>
		<el-button :type="selectmonth" @click="changemonth" >Month Range</el-button>
		<el-button :type="selectyear" @click="changeyear" >Year Range</el-button>
	</el-button-group>
</div>

2.script代码

<script>
export default {
    data() {
      return {
        selectdate:'primary', //此处我默认第一个按钮被选中
        selectmonth:'',
        selectyear:'',
      }
    },
    methods: {
      changedate(){
          this.selectdate='primary'
          this.selectmonth=''
          this.selectyear=''
      },
      changemonth(){
          this.selectdate=''
          this.selectmonth='primary'
          this.selectyear=''
      },
      changeyear(){
          this.selectdate=''
          this.selectmonth=''
          this.selectyear='primary'
      },
    }
  }
</script>

---

总结

这只是其中一种方法，因为我的项目里有点击时间，所以我就将切换样式的融合到点击函数中。仅供参考。