一、解决问题
二、实现过程
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. 通过点击事件控制按钮状态
实现效果:
点击右侧按钮效果:
文章来源:https://www.toymoban.com/news/detail-597886.html
以vue为例示范:文章来源地址https://www.toymoban.com/news/detail-597886.html
<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>
到了这里,关于Elementui按钮设置默认选中状态的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!