普通用法

需要注意，如果@change事件除了当前选中的单选按钮的label值，还需要带上另外的参数，则需要用event来代替当前的值。（event来代替当前的值。（event来代替当前的值。（event指代当前触发的事件）
如果只需要当前被选中的单选按钮的label值，那么可以写成@change="changeReportLevel()"即可，js接收方法写成：changeReportLevel(value)

<el-radio-group size="mini" v-model="xxx"@change="changeReportLevel($event,scope.row)" :disabled="xxx"><el-radio-button label="2">背景</el-radio-button><el-radio-button label="1">出列</el-radio-button></el-radio-group>//js方法changeReportLevel(value, row) {},

需要实现双击取消

先贴上代码

<el-radio-group size="mini" v-model="xxx":disabled="xxx"><el-radio-button :disabled="xxx"@click.native="changeReportLevel($event,2,scope.row,operate)":label="scope.row.reportFlag==1?2:4">背景</el-radio-button><el-radio-button :disabled="xxx"@click.native="changeReportLevel($event,1,scope.row,operate)":label="scope.row.reportFlag==1?1:3">出列</el-radio-button>//js方法
changeReportLevel(el, value, row, operate) {if (disabled条件) return;if (el.target.tagName === 'INPUT') return;var reportFlag = row.reportFlag;if (value === row.reportLevel && reportFlag === 1) {reportFlag = 0;} else {reportFlag = 1;}}

问题：
需要实现单击单选按钮为选中状态，再次单击这个被选中的按钮，则取消选中

目前情况：
在el-radio-group中需要点击单选按钮B，才能取消单选按钮A的选中。

解决思路：
1、label值需要设置为动态的，以便显示未选中状态；
2、将click事件放置每个radio-button上；
3、捕捉当前被选中的按钮的值，并在js方法中进行进一步处理。

遇到的问题：
1、@click方法如果要添加至组件上，需要加上native，等同于在自组件中，子组件内部处理click事件然后向外发送click事件：$emit(“click”.fn)，具体的说明可以参考这篇文章
@click事件详细说明
2、@click.native会触发两次click事件，原因是el-radio-button是封装过的，由input和label标签组成，在这个组件上添加单纯的click事件，所以会触发两个组件的click；
3、:disabled没有生效。

解决方法：
1、点击后及时改变reportFlag的值；
2、在js方法内判断，如果事件为INPUT，则返回；
3、将disabled的条件放置js方法内。

vue中el-radio-group点击事件，双击取消相关推荐

vue中触发按钮的点击事件
主动触发点击事件由vue代码触发点击事件,实现的效果是:点击按钮,触发输入框点击事件,从而实现选择文件. 示例如下: <template><input type="fi ...
vue中echarts纵轴添加点击事件
直接上代码 initChart () {this.ganttChart = echarts.init(document.getElementById('gantt-chart'))const _sel ...
vue中防止按钮重复点击提交的方法
vue中防止按钮重复点击提交的方法 vue中防止按钮重复点击提交的方法一.自定义全局指令二.自定义局部指令三.动态控制disabled属性 vue中防止按钮重复点击提交的方法经常会遇到的一个问 ...
vue、uniapp 小程序点击事件禁止多次点击方法封装
vue.uniapp 小程序点击事件禁止多次点击方法封装在写uniapp 小程序时发现个bug,疯狂点击按钮第一点击事件还没执行完就疯狂多次调用该事件,很是影响用户体验以及消耗性能,所以这里我封装个 ...
iostext添加点击事件_iOS开发小技巧 - label中的文字添加点击事件
Label中的文字添加点击事件以前老师讲过类似的功能,自己懒得回头看了,找了很多第三方的,感觉这个小巧便利,作者只是扩展了分类,实现起来代码也少.先来个效果图自己的项目,直接上代码 - (void ...
给radio添加点击事件
1.单独给每个radio添加点击事件 <fieldset id="form-gra-time"> <legend>请选择日期粒度:</legend&g ...
Android中的事件处理之点击事件
在 Android 的图形界面(UI)开发中,有两个非常重要的内容∶一个是控件的布局,另个就是控件的事件处理.Android中的常用事件有点击事件.长按事件.触摸事件.焦点事件.按键事件-下拉列表的选 ...
六十二、Js中的冒泡和捕获点击事件和Vue组件绑定原生事件
2020/10/18 . 周日.今天又是奋斗的一天. @Author:Runsen @Date:2020/10/18 写在前面:我是「Runsen」,热爱技术.热爱开源.热爱编程.技术是开源的.知识是 ...
在Vue组件中获取全局的点击事件
使用场景: 在Vue组件中点击某元素之外的地方移除该元素需求: 如上图所示,"用户列表"页面有三个Vue组件组成,分别是"菜单组件","导航组件&q ...
Web前端-Vue ElementUI el-input组件绑定点击事件
1.element中el-input组件事件 <el-input v-model="value" v-on:change="handleChange"&g ...

vue中el-radio-group点击事件，双击取消

vue中el-radio-group点击事件

普通用法

需要实现双击取消

vue中el-radio-group点击事件，双击取消相关推荐

最新文章

热门文章