普通用法
需要注意,如果@change事件除了当前选中的单选按钮的label值,还需要带上另外的参数,则需要用
e
v
e
n
t
来
代
替
当
前
的
值
。
(
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方法内。