element复选框单选

文章描述:

vue element复选框单选以及取消单选

 

<template>
	<div class="container">
		<el-checkbox-group v-model="checkList" ref="processedTableData">
		    <el-checkbox label="A" @change="clickcheck('A')"></el-checkbox>
		    <el-checkbox label="B" @change="clickcheck('B')"></el-checkbox>
		    <el-checkbox label="C" @change="clickcheck('C')"></el-checkbox>
		    <el-checkbox label="D" @change="clickcheck('D')"></el-checkbox>
		</el-checkbox-group>
		<div>
			<div v-if="skillType=='A'">A</div>
			<div v-if="skillType=='B'">B</div>
			<div v-if="skillType=='C'">C</div>
			<div v-if="skillType=='D'">D</div>
		</div>
	</div>
</template>

<script>
export default {
	data(){
		return{
			checkList: [],
			skillType:''
		}
	},
	created() {
		
	},
	methods:{
		// 复选框单选
		clickcheck(val) {

		  if(this.skillType == val){
			this.skillType = ''
		  }else{
			this.skillType = val
		  }

		  if(this.checkList.length >= 2){
			this.checkList = this.checkList.splice(1, 1)
		  }else{

		  }
		},
	}
}
</script>

 

发布时间:2023/09/20

发表评论