多个 el-checkbox-group 使用同一个变量传参联动回显

在这里插入图片描述

      <el-form-item label="保底对象" required><div style="display: flex"><span> A类:</span><el-checkbox-group v-model="guaranteedPartyA"><el-checkbox label="1">设备</el-checkbox><el-checkbox label="2">工程</el-checkbox><el-checkbox label="3">佣金</el-checkbox></el-checkbox-group></div><span style="padding-left: 60px"> B类:</span><el-checkbox-group v-model="guaranteedPartyB"><el-checkbox label="4">充电度数</el-checkbox><el-checkbox label="5">服务费收入</el-checkbox></el-checkbox-group></el-form-item>

// 可多选,A类:设备、工程、租金,B类:充电度数、服务费收入(只能二选一),选A类后就不能选B类


const guaranteedPartyA = ref<any>([]);
const guaranteedPartyB = ref<any>([]);
watch(guaranteedPartyA, (newValue) => {if (newValue && newValue.length > 0) {guaranteedPartyB.value = [];store.guaranteedParty = newValue.join(',');}
});
watch(guaranteedPartyB, (newValue) => {if (newValue && newValue.length > 0) {guaranteedPartyA.value = [];store.guaranteedParty = newValue.join(',');}
});// 回显
onMounted(() => {const {guaranteedParty} = storeconst guaranteedPartyList=guaranteedParty.split(',')if(['1','2','3'].includes(guaranteedPartyList[0])){guaranteedPartyA.value =guaranteedPartyList}if(['4','5'].includes(guaranteedPartyList[0])){guaranteedPartyB.value =guaranteedPartyList}
});

存在问题–取消选中的时候,没有置空,改成使用 @change事件

      <el-form-item label="保底对象" required><div style="display: flex"><span> A类:</span><el-checkbox-group v-model="guaranteedPartyA"  @change="handleChangePartyA"><el-checkbox label="1">设备</el-checkbox><el-checkbox label="2">工程</el-checkbox><el-checkbox label="3">佣金</el-checkbox></el-checkbox-group></div><span style="padding-left: 60px"> B类:</span><el-checkbox-group v-model="guaranteedPartyB" @change="handleChangePartyB"><el-checkbox label="4">充电度数</el-checkbox><el-checkbox label="5">服务费收入</el-checkbox></el-checkbox-group></el-form-item>
const handleChangePartyA=(newValue:any)=> {if (newValue && newValue.length > 0) {guaranteedPartyB.value = [];store.guaranteedParty = newValue.join(',');}else{store.guaranteedParty=''}}
const handleChangePartyB=(newValue:any)=> {if (newValue && newValue.length > 0) {guaranteedPartyA.value = [];store.guaranteedParty = newValue.join(',');}else{store.guaranteedParty=''}}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/860875.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

[windows] 无拓展名文件设置默认打开方式为记事本

前言 本文是对[windows] 无拓展名文件设置默认打开方式_给无后缀文件添加打开方式选项-CSDN博客 的细节上的补充&#xff0c;对小白更友好。建议对照引用的博客观看。 管理员状态运行cmd 右键左下角开始位置&#xff0c;出现 左键点击打开终端管理员。 进去后直接输入cmd即…

COMSOL -电力输电线的电场和磁场仿真

为确保电力输电线周围人员和环境的安全&#xff0c;工程师必须对电力线产生的电场和磁场进行监控。通过多物理场仿真&#xff0c;工程师能够预测电力线产生的场如何从电力线中扩散&#xff0c;以及如何影响其辐射至地面的强度。这篇文章&#xff0c;我们将使用两个示例模型来说…

火绒被骂惨,良心居然也翻车?剩下3款软件还被误认为外国人开发

万万没想到&#xff0c;公认的国产良心软件“火绒”&#xff0c;居然也翻车&#xff0c;很多网友对其大失所望&#xff0c;甚至忍不住吐槽让他不要砸了自己的招牌。 事情的起因是这样的&#xff0c;火绒推出应用商店&#xff0c;并于正式公测&#xff0c;这是要逐渐走向全家桶的…

大模型应用RAG系列(一):初识RAG,RAG出现及未来发展趋势

题外话 之前我们在讲大模型的应用方向和架构时&#xff0c;有提到RAG、Agent、Fine-Tune。在作者写大模型专题的文章时&#xff0c;也是边学习&#xff0c;边梳理&#xff0c;边总结。在这个过程中&#xff0c;大模型在各个方向都不断地快速发展&#xff0c;对应的paper、理论…

AI绘画的10种变现方法,逼你躺平挣钱

AI绘画到底能多挣钱&#xff01; 马上看证据&#xff0c;知乎和其它平台的收益&#xff0c;AI绘画挣的稿费&#xff0c;还有某音某瓜的稿费。 都是有AI绘画的一大功劳&#xff01; 接下来介绍AI绘画的十种挣钱方法&#xff0c;有折腾的收益&#xff0c;也有躺平的收益&#x…

ArcGIS Pro三维空间分析、专题制图、遥感制图全流程系统教学

ESRI宣布&#xff1a;ArcGIS 10.8.2 是 ArcMap 的当前版本&#xff0c;在 2026 年 3 月 1 日之前将继续受支持。我们没有计划在 2021/22 年随 ArcGIS 版本一起发布 ArcMap 10.9.x。这意味着 10.8.x 系列将是 ArcMap 的最终版本系列&#xff0c;并将在 2026 年 3 月 1 日之前受支…

28. 深度学习中的损失函数:起源、分类及统一理解

在深度学习和机器学习领域&#xff0c;损失函数&#xff08;Loss Function&#xff09;是优化问题的核心&#xff0c;决定了模型参数的调整方向和幅度。尽管损失函数种类繁多&#xff0c;但理解其起源和背后的理论有助于我们更好地选择和应用它们。 损失函数的起源 所有的优化…

Python爬虫实战:利用代理IP批量下载哔哩哔哩美女视频

文章 目录 1.前言2.爬取目标3.准备工作3.1 环境安装3.2 代理免费获取 四、爬虫实战分析4.1 翻页分析4.2 获取视频跳转链接4.3 下载视频4.4 视频音频合并4.5 完整源码 五、总结 1.前言 粉丝们&#xff08;lsp&#xff09;期待已久的Python批量下载哔哩哔哩美女视频教程它终于来…

机器人控制系列教程之运动规划(1)

机械臂的运动 工业机器人的运动&#xff0c;根据其运动轨迹可分为点到点的运动和路径跟踪运动。点到点的运动只关心特点的位置点&#xff0c;而路径跟踪运动关心整个运动路径。 点到点运动 点到点的运动根据目标点的机器人位姿&#xff0c;利用逆向运动学求取机器人各个关节…

低代码平台如何重塑项目管理:效率与创新的新边界

引言 随着数字化转型的加速和技术创新的推动&#xff0c;低代码开发平台在近年来逐渐崭露头角&#xff0c;成为企业和组织加速应用开发和创新的重要工具。低代码平台通过提供可视化的开发环境和预构建的组件&#xff0c;极大地简化了应用程序的开发过程&#xff0c;使非专业开发…

C++学习全教程(day1:变量和数据类型、运算符、流行控制语句)

目录 一、变量和数据类型 1、变量 2、标识符 3、作用域 4、常量 5、数据类型 1.基本数据类型-整型 2.char类型 3.bool类型 4.浮点类型 5.字面值常量 二、运算符 1、算数运算符 2、赋值运算符 3、复合赋值运算符 4、关系和逻辑运算 1.关系运算符 -------结果是…

PointCloudLib NDT3D算法实现点云配准 C++版本

0.实现效果 效果不咋好 ,参数不好调整 1.算法原理 3D NDT(Normal Distributions Transform)算法是一种用于同时定位和地图生成(SLAM)的机器人导航算法,特别适用于三维点云数据的配准。以下是关于3D NDT算法的详细解释: 算法原理 点云划分与分布计算:3D NDT算法首先将…

2024第十三届中国PMO大会主持人介绍

全国PMO专业人士年度盛会 由PMO评论主办的2024第十三届中国PMO大会邀请了到十几位知名企业的PMO和项目管理专家来担任大会主持人。大会将于6月29-30日在北京举办&#xff0c;敬请关注&#xff01; 主持人介绍 肖杨&#xff0c;国际知名组织级项目管理专家&#xff0c;微薄之力…

武汉星起航:亚马逊全球化布局助力企业拓展国际市场

在当今全球化经济的大背景下&#xff0c;企业如何突破地域限制&#xff0c;将产品推向更广阔的市场&#xff0c;成为了摆在众多企业家面前的重要课题。武汉星起航相信&#xff0c;亚马逊&#xff0c;作为全球最大的在线零售平台之一&#xff0c;以其独特的全球化布局和强大的服…

fidder自动测试cookie脚本

前言 工作在使用fidder抓包时&#xff0c;经常需要找到一个请求携带的cookie中&#xff0c;真正校验了那些cookie&#xff0c;从而在代码中实现写入这些cookie的请求。这个过程除了根据经验快速过滤&#xff0c;就只能一个一个删除测试了。 所以我写了这个脚本&#xff0c;自动…

东南亚本地化游戏

通常&#xff0c;亚洲电子游戏市场首先与中国联系在一起。但最近&#xff0c;分析人士越来越关注一个邻近地区&#xff1a;东南亚。而且有充分的理由。 该地区包括中南半岛、马来群岛和邻近岛屿上的十一个国家。1967年&#xff0c;其中10个国家&#xff08;除东帝汶外&#xf…

全自动封箱机技术革新:效率优化新篇章

在日新月异的物流行业中&#xff0c;全自动封箱机以其高效、精准的特性&#xff0c;成为了不可或缺的关键设备。然而&#xff0c;随着市场竞争的加剧和客户需求的不断升级&#xff0c;如何进一步优化全自动封箱机的效率&#xff0c;成为了行业内外关注的焦点。 一、全自动封箱机…

如何快速绘制logistic回归预测模型的ROC曲线?

详情请点击下方&#xff1a; 零代码课程来了&#xff0c;不需要R语言&#xff0c;快速构建预测模型 临床预测模型&#xff0c;也是临床统计分析的一个大类&#xff0c;除了前期构建模型&#xff0c;还要对模型的预测能力、区分度、校准度、临床获益等方面展开评价&#xff0c;确…

智慧车库管理系统

摘 要 随着城市化进程的不断加快&#xff0c;私家车数量的快速增长给城市交通带来了巨大的挑战&#xff0c;停车问题成为城市交通管理中的一大难题。车辆停车时&#xff0c;在停车场寻找停车位耗时过久&#xff0c;不仅仅浪费用户的时间&#xff0c;还可能引起交通拥堵。城市停…

小程序中this(1)

}, onLoad: function() {}, }) 此时经过编译后模拟器的显示&#xff1a; 这里都容易理解&#xff0c;当点击了button按钮后&#xff0c;触发点击事件执行testfun函数&#xff0c;将test02设置为8&#xff0c;如图&#xff1a; 通过this.data.test028这种方式直接赋值可以吗&…