多选框时,却只需要点击其中一个就让其他的选项失效,其实也是可以使用单选框来做,但是设计图的图标是和多选框长得一模一样,又不想去修改ant-vue单选框的样式,于是就做了这个demo
html部分
<a-checkbox-group v-model="value" name="checkboxgroup"
:options="plainOptions" @change="onChange" >
<span slot="label" disabled="{disabled}" slot-scope="{ value }" style="color: red">{{ value }}
</span>
</a-checkbox-group>
js部分
<script
>
export default {
data() {
return {
plainOptions
: [
{ label
: "Apple", value
: 'Apple',disabled
: false },
{ label
: 'Pear', value
: 'Pear' ,disabled
: false },
{ label
: 'Orange', value
: 'Orange', disabled
: false },
],
value
: [],
};
},
methods
: {
onChange(checkedValues
,options
) {
console
.log('value = ', this.value
);
let data
= this.plainOptions
for(let i
=0; i
< data
.length
; i
++){
data
[i
].disabled
= true
if(data
[i
].value
== this.value
[0]){
data
[i
].disabled
= false
}
if(this.value
.length
== 0 ){
data
[i
].disabled
= false
}
}
this.plainOptions
= data
},
},
mounted() {
}
}
</script
>
