多选框时,却只需要点击其中一个就让其他的选项失效,其实也是可以使用单选框来做,但是设计图的图标是和多选框长得一模一样,又不想去修改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('checked = ', checkedValues);
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>