Elementui按钮设置默认选中状态

一、解决问题

二、实现过程

1. 按钮类型

elementui中按钮有默认按钮类型和朴素按钮类型。

<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. 按钮属性

使用type、plain属性来定义 Button 的样式。

示例：

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

总结：所以只需要控制plain属性的值，就可以将按钮设置为选中状态。

3. 通过点击事件控制按钮状态

实现效果：

点击右侧按钮效果：

以vue为例示范：

<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>