ant-vue checkbox 多选 只能选中一个demo

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