一、设置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>