elementUI Checkbox 多选框互斥事件

elementUI Checkbox 多选框互斥事件

需求

项目使用的vue2+elementUI,项目的查询接口遇到一个需求:

复制代码
1.多个标签
2.标签数据由后端接口给出;
3.可以多选标签;
4.有两个标签为默认存在的标签:任意标签 和 无标签;
5.这个两个默认标签为互斥标签,且存在这两个默认标签中任意一个标签时,其他标签不可选,如果其他标签已选中,清除选中的其他标签;
6.这两个默认标签未选中时,其他标签可选。

效果(下方截图为连续性操作)

未选中

选中其他标签

选中任意标签,其他标签清空选中

选中无标签,其他标签清空选中

解决代码

html

javascript 复制代码
<template>
	<el-checkbox-group v-model="flag" size="mini" @change="changeValue">
		<el-checkbox label="1" border @change="changeAny">任意标签</el-checkbox>
		<el-checkbox label="0" border @change="changeNone">无标签</el-checkbox>
		<el-checkbox v-for="item in labelList" :key="item.id" :label="item.id" border>
			{{ item.name }}
		</el-checkbox>
	</el-checkbox-group>
</template>

js

javascript 复制代码
<script>
export default {
	data() {
		return {
      		flag: [],
      		labelList: [],
		}
	},
	methods: {
		changeValue() {
			if (this.flag.includes('none')) {
	          this.flag = ['none']
	        } else if (this.flag.includes('any')) {
	          this.flag = ['any']
	        }
		},
		// 任意标签 (任意标签与无标签只能二选一)
	    changeAny(value) {
	      if (value) {
	        this.flag = ['1']
	      }
	    },
	    // 无标签 (任意标签与无标签只能二选一)
	    changeNone(value) {
	      if (value) {
	        this.flag = ['0']
	      }
	    },
	}
}
</script>
相关推荐
林强18116 小时前
前端文件预览docx、pptx和xlsx
前端
像是套了虚弱散19 小时前
DevEco Studio与Web联合开发:打造鸿蒙混合应用的全景指南
开发语言·前端·华为·harmonyos·鸿蒙
衬衫chenshan19 小时前
【CTF】强网杯2025 Web题目writeup
前端
飞翔的佩奇19 小时前
【完整源码+数据集+部署教程】【天线&水】舰船战舰检测与分类图像分割系统源码&数据集全套:改进yolo11-repvit
前端·python·yolo·计算机视觉·数据集·yolo11·舰船战舰检测与分类图像分割系统
哆啦A梦158820 小时前
点击Top切换数据
前端·javascript·vue.js
程序猿追21 小时前
Vue组件化开发
前端·html
艾德金的溪21 小时前
redis-7.4.6部署安装
前端·数据库·redis·缓存
小光学长21 小时前
基于Vue的2025年哈尔滨亚冬会志愿者管理系统5zqg6m36(程序+源码+数据库+调试部署+开发环境)带论文文档1万字以上,文末可获取,系统界面在最后面。
前端·数据库·vue.js
@PHARAOH21 小时前
WHAT - 受控组件和非受控组件
前端·javascript·react.js
生莫甲鲁浪戴21 小时前
Android Studio新手开发第二十六天
android·前端·android studio