多选按钮关联多个el-checkbox-group

news2024/7/6 18:06:22

在这里插入图片描述
在这里插入图片描述
需求: 如图设计稿,全部企业成员下面的数据来源与两个接口,点击全部企业成员需要勾选全部,下面选中全部企业成员要是选中状态,所以需要两个数组变量,两个el-checkbox-group来控制;有人可能会疑问为什么不把两个数据接口的数据放一个数组里,用一个el-checkbox-group来展示。正常情况下确实可以,但是还有个表单提交的请求,需要分别传两个数组中勾选的id,所以不能放一个数组里,不然没发区分勾选id的来源。

解决方法:

<div class="user-list">
  <el-checkbox v-model="isCheckAll" :indeterminate="isIndeterminate"
     @change="handleCheckAllChange">全部企业成员</el-checkbox>
 	<el-checkbox-group v-model="checkedUserGroup" @change="handleCheckedUserChange">
       <el-checkbox v-for="item in userGroupList" :key="item.id" :label="item.id">{{
          item.name
       }}</el-checkbox>
   </el-checkbox-group>
   <el-checkbox-group v-model="checkedUser" @change="handleCheckedUserChange">
      <el-checkbox v-for="item in userList" :key="item.id" :label="item.id">{{
         item.name
      }}</el-checkbox>
   </el-checkbox-group>
</div>
data(){
	return {
		userGroupList: [],
		userList: [],
		isCheckAll: false,
		isIndeterminate: false,
		checkedUserGroup: [],
		checkedUser: [],
	}
}

handleCheckAllChange(val) {
      this.checkedUserGroup = val ? this.userGroupList.map(item => item.id) : []
      this.checkedUser = val ? this.userList.map(item => item.id) : []
      this.isIndeterminate = false
    },
handleCheckedUserChange(value) {
      let checkedCount = value.length
      this.isIndeterminate = checkedCount > 0 && this.checkedUserGroup.length + this.checkedUser.length < this.userGroupList.length + this.userList.length
      this.isCheckAll = this.userGroupList.length + this.userList.length === this.checkedUserGroup.length + this.checkedUser.length
    },

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

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

相关文章

Git远程库操作(GitHub)

GitHub 网址&#xff1a;https://github.com/ 创建远程仓库 远程仓库操作 命令名称作用git remote -v查看当前所有远程地址别名git remote add 别名 远程地址起别名git push 别名 分支推送本地分支上的内容到远程仓库git clone 远程地址将远程仓库的内容克隆到本地git pull 别…

OSG文字-HUD显示汉字示例(3)

显示文字是一种非常实用的技术&#xff0c;可以用来把一些重要的文字始终显示在屏幕上。HUD的全称是HeadsUpDisplay&#xff0c;即抬头显示&#xff0c;这种技术最早应用在军事战斗机上。 创建HUD显示的基本步骤如下: <1> 创建一个osg::Camera对象&#xff0c;设置视图、…

利用QRCode.js生成动态二维码页面

文章目录 QRCode.js简介HTML结构JavaScript生成动态二维码拓展功能1. 联系信息二维码2. Wi-Fi网络信息二维码 总结 &#x1f389;利用QRCode.js生成动态二维码页面 ☆* o(≧▽≦)o *☆嗨~我是IT陈寒&#x1f379;✨博客主页&#xff1a;IT陈寒的博客&#x1f388;该系列文章专栏…

接口自动化测试实战经验分享,测试用例也能自动生成

作为测试&#xff0c;你可能会对以下场景感到似曾相识&#xff1a;开发改好的 BUG 反复横跳&#xff1b;版本兼容逻辑多&#xff0c;修复一个 BUG 触发了更多 BUG&#xff1b;上线时系统监控毫无异常&#xff0c;过段时间用户投诉某个页面无数据&#xff1b;改动祖传代码时如履…

OSG文字-osgText3D(5)

osgText3D 三维立体文字比二维平面文字显示效果更好&#xff0c;相对二维平面文字&#xff0c;它有非常好的立体显示效果。 在实际虚拟现实项目中&#xff0c;过多使用三维立体文字会降低染效率&#xff0c;加重渲染负担&#xff0c;相对平面二维文字&#xff0c;它占用的内存是…

for,while,until语句

一、for循环 读取不同的变量值&#xff0c;用来逐个执行同一组命令&#xff0c;经常使用在已经知道要进行多少次循环的场景。 1、基本格式 for 变量名称(注意是名称&#xff0c;不是变量$等) [ in 名称范围 ] (可以不写)do 执行内容 若满足循环则做什么动作do…

软考中级哪个科目最简单?

那必须是系统集成项目管理工程师&#xff01; 系统集成项目管理工程师考试内容少&#xff0c;题型简&#xff0c;报考门槛低&#xff0c;零基础就能报考&#xff0c;学习内容比较简单&#xff0c;接近工作和生活。 系统集成项目管理工程师证书是中国计算机技术职业资格&#…

【亚太杯思路助攻】2023年第十三届APMCM亚太地区大学生数学建模竞赛——(文末领取方式)

2023年第十三届APMCM亚太地区大学生数学建模竞赛——来啦&#xff01;&#xff01;&#xff01; 大家准备好了吗&#xff1f;别担心&#xff0c;【数模加油站】会像数模国赛、研赛一样&#xff0c;第一时间提供无偿解题思路、代码、参考文献等资料帮助大家。 祝各位小伙伴都能…

MySQL数据库常见错误及解决方案

“时记数据安全,共享优质资源”,数据库安全是指数据库数据的完整、真实、可靠和可用性。数据库也是一种软件系统,与其他软件系统一样也需要保护,需要采取一定的技术和一定的安全管理策略,保证数据库中的数据不被泄漏、不被破坏、不被修改或删除。本文列举MySQL数据库常见错…

QT搭建的Ros/librviz的GUI软件

1.前言 开发初期学习了下面博主的文章&#xff0c;也报了他在古月局的课&#xff0c;相当于感谢吧。 ROS Qt5 librviz人机交互界面开发一&#xff08;配置QT环境&#xff09;-CSDN博客​​​​​​​r 软件前期也是参考他的开源项目 GitHub - chengyangkj/Ros_Qt5_Gui_App …

Os-hackNos-3

Os-hackNos-3 一、主机发现和端口扫描 主机发现&#xff0c;靶机地址192.168.80.145 arp-scan -l端口扫描&#xff0c;开放了22和80端口 nmap -P -sV 192.168.80.145二、信息收集 访问80端口 find the Bug You need extra WebSec翻译 找到Bug 你需要额外的网络安全路径扫描 d…

【Unity细节】Default clip could not be found in attached animations list.(动画机报错)

&#x1f468;‍&#x1f4bb;个人主页&#xff1a;元宇宙-秩沅 hallo 欢迎 点赞&#x1f44d; 收藏⭐ 留言&#x1f4dd; 加关注✅! 本文由 秩沅 原创 &#x1f636;‍&#x1f32b;️收录于专栏&#xff1a;unity细节和bug &#x1f636;‍&#x1f32b;️优质专栏 ⭐【…

scrapy框架流程

1、Scrapy从Spider子类中提取start_url,然后构造为request请求对象 2、将request请求对象传递给爬虫中间件 3、将request请求对象传递给Scrapy引擎&#xff08;核心代码&#xff09; 4、将request请求对象传递给调度器&#xff08;它负责对多个request安排&#xff0c;好比交…

lombok 引入

lombok 依赖--><dependency><groupId>org.projectlombok</groupId><artifactId>lombok</artifactId></dependency>

【用unity实现100个游戏之16】Unity中程序化生成的2D地牢4(附项目源码)

文章目录 最终效果前言素材按程序放置物品放置玩家和敌人控制主角移动参考源码完结 最终效果 前言 本期紧跟着上期内容&#xff0c;主要实现在地牢中生成物品、放置玩家和敌人。 素材 物品素材&#xff1a; https://itch.io/c/1597630/super-retro-world 按程序放置物品 …

华为obs上传下载-Java版 2023-11-23

弄了半天&#xff0c;老师帮弄成功了&#xff0c;经过同意&#xff0c;分享到网上&#xff0c;希望能帮助更多人&#xff0c;至于怎么弄的&#xff0c;我也不知道。 创建idea项目后&#xff0c;项目结构&#xff0c;对应文件没有的创一个 pom.xm 注意改Java版本&#xff0c;我…

赞!优雅的Python多环境管理神器!易上手易操作!

前言 Python 的不同版本之间常常存在依赖关系和兼容性问题&#xff0c;为了方便开发人员在 不同项目中使用不同的版本 。 如果大家使用过Python版本管理工具&#xff0c;肯定大多数人使用的都是Anaconda&#xff0c;它是一个优秀的数据科学开发环境&#xff0c;本身也提供了丰…

2021年06月 Scratch(二级)真题解析#中国电子学会#全国青少年软件编程等级考试

Scratch等级考试(1~4级)全部真题・点这里 一、单选题(共25题,每题2分,共50分) 第1题 小明同学设计了一款游戏,其中一段程序如下图所示,下面这段程序可以实现哪项功能? A:在任何地方点击鼠标,角色都会移到鼠标位置 B:没有任何操作的时候角色会在舞台区域随机移动…

如何实现数据通过表格批量导入数据库

文章目录 1. 准备工作2. 创建数据库表3. 编写导入脚本4. 优化和拓展4.1 批量插入的优势4.2 错误处理4.3 数据验证4.4 数据转换 5. 总结 &#x1f389;如何实现数据通过表格批量导入数据库 ☆* o(≧▽≦)o *☆嗨~我是IT陈寒&#x1f379;✨博客主页&#xff1a;IT陈寒的博客&…

APP自动化之Poco框架

今天给大家介绍一款自动化测试框架Poco&#xff0c;其脚本写法非常简洁、高效&#xff0c;其元素定位器效率更快&#xff0c;其本质基于python的第三方库&#xff0c;调试起来也会非常方便&#xff0c;能够很好的提升自动化测试效率&#xff0c;节省时间。 (一&#xff09;背景…