Elementui按钮设置默认选中状态

这篇具有很好参考价值的文章主要介绍了Elementui按钮设置默认选中状态。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

一、解决问题

el-button默认选中,#Vue,web study,elementui,vue.js,前端

二、实现过程

1. 按钮类型

elementui中按钮有默认按钮类型和朴素按钮类型。
el-button默认选中,#Vue,web study,elementui,vue.js,前端

<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默认选中,#Vue,web study,elementui,vue.js,前端

示例:
el-button默认选中,#Vue,web study,elementui,vue.js,前端

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

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

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

实现效果:
el-button默认选中,#Vue,web study,elementui,vue.js,前端
点击右侧按钮效果:
el-button默认选中,#Vue,web study,elementui,vue.js,前端

以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模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • el-table多选框设置默认选中,翻页保留选中状态

    最近碰到个需求,el-table列表渲染数据,要求有多选框并且附带默认选中,翻页后保留选中状态 写默认选中时百度一下还很简单,但是碰到个bug,第一次翻页可以保留,第二次翻页回来之后选中的就没了。 经过研究解决,记录一下,直接上代码了 默认选中只需要给table增加

    2024年02月14日
    浏览(51)
  • ElementUI中el-tree获取每个节点点击的选中状态

    有时候需要获取el-tree每个节点的点击状态,可以通过以下方式,其中isCheck类型为布尔值 1.绑定@check事件,我这里是getCurrentNode,函数名自己随便写 2.绑定ref

    2024年02月11日
    浏览(60)
  • 自定义el-tree复选框选中状态vue elementUI

    :check-strictly属性:该属性默认false,表示严格遵循父子相互关联。父子相互关联(即选中父节点其所有子节点全部选中,取消选中父节点其子节点全部取消,且折叠、展开状态都一样)。 Attributes属性 参数 说明 类型 可选值 默认值 check-strictly 在显示复选框的情况下,是否严格

    2023年04月09日
    浏览(38)
  • el-button自定义图片显示

    想要在button上显示自己的图片,而不是使用element-ui提供的el-icon 效果如图:中间这个按钮就是我自己的图片,devops.png 具体实现方法如下: 首先将图片引入,引入路径随你,我是将图片放到assets目录下 在按钮处自定义icon 在css中设置el-icon-devops 最后就可以显示出来啦。我用的

    2024年02月15日
    浏览(43)
  • VUE中使用ElementUI组件的单选按钮el-radio-button实现第二点击时取消选择的功能

    页面样式为: html 代码为: js代码为:(记得在data中声明loglevel:\\\"\\\")

    2024年02月15日
    浏览(49)
  • IOS 设置UIButton按钮的选中状态样式

    设置按钮的边框 设置按钮的文字样式 设置按钮的背景颜色 设置按钮的文字内容 附上按钮的各种状态及交互

    2024年04月27日
    浏览(34)
  • vue+element ui中的el-button自定义icon图标

    button的icon属性自定义一个图标名称,这个自定义的图标名称会默认添加到button下i标签的class上,我们只需要设置i标签的样式就可以了 ##3. 按钮上使用自定义的icon

    2024年02月05日
    浏览(42)
  • vue el-table的每行操作el-button添加单独的loading效果实现

    实现就这么简单,一目了然。 你的压力来源于无法自律,只是假装努力,现状跟不上内心的欲望,所以你焦虑又恐惧。

    2024年02月13日
    浏览(55)
  • elementUi el-radio神奇的:label与label不能设置默认值

    问题:最近项目遇到一个奇葩的问题:红框中列表的单选按钮无法根据需求设置默认选中,但是同样是设置开启状态的单选框可以设置默认状态  原因:开始同样是和 开启/关闭状态 一样也把 红框中列表的默认值 设置为数字模式,但是由于后台返回值、与label绑定值的类型不

    2024年02月14日
    浏览(37)
  • Vue项目里设置el-tree默认选中的背景色和字体色以及鼠标悬停的背景色

    el-tree默认选中的背景色是白色,有时候我们需求是一进入到页面就要发请求,并且设置默认选中的背景色改为蓝色,字体色为白色,然后选中的项也是背景色改为蓝色,字体色为白色,那这个时候我们可以给el-tree通过添加属性 highlight-current设为高亮,然后通过以下样式改变

    2024年02月13日
    浏览(63)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包