Elementui button set default selected state

1. Solve the problem

2. Implementation process

1. Button type

Buttons in elementui have default button types andplain buttontype.

<el-row>
 <el-button>默认按钮</el-button>
 <el-button type="primary">主要按钮</el-button>
 <el-button type="success">成功按钮</el-button>
 <el-button type="info">信息按钮</el-button>
 <el-button type="warning">警告按钮</el-button>
 <el-button type="danger">危险按钮</el-button>
</el-row>

<el-row>
 <el-button plain>朴素按钮</el-button>
 <el-button type="primary" plain>主要按钮</el-button>
 <el-button type="success" plain>成功按钮</el-button>
 <el-button type="info" plain>信息按钮</el-button>
 <el-button type="warning" plain>警告按钮</el-button>
 <el-button type="danger" plain>危险按钮</el-button>
</el-row>

2. Button Properties

use type,plain attributeto define the style of the Button.

Example:

<el-button type="danger"  plain>是朴素按钮</el-button>
<el-button type="danger" :plain="false">非朴素按钮</el-button>

Summary: So you only need to control the value of the plain attribute to set the button to the selected state.

3. Control the button state through the click event

Realize the effect:

Click the button on the right to achieve the effect:

Take vue as an example:

<template>
 ...
    <div class="row">
     	<el-button type="danger" :plain="selectA" @click="clickA">默认选中按钮</el-button>
		<el-button type="danger" :plain="selectB" @click="clickB">按钮</el-button>
    </div>
  ...
</template>

<script>
export default {
    
    
 	...
  	data: function () {
    
    
		return {
    
    
			selectA: false,
			selectB: true,
			}
		}
	...
	methods: {
    
    
	 // 默认选中按钮事件
		clickA() {
    
    
			this.selectA = false;
			this.selectB = true;
		
		},
		// 按钮事件
		clickB() {
    
    
			this.selectA = true;
			this.selectB = false;
		},
	}
	...
</script>