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

在这里插入图片描述
在这里插入图片描述
需求: 如图设计稿,全部企业成员下面的数据来源与两个接口,点击全部企业成员需要勾选全部,下面选中全部企业成员要是选中状态,所以需要两个数组变量,两个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
    },

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

ZKP11.1 From Practice To Theory

ZKP学习笔记 ZK-Learning MOOC课程笔记 Lecture 11: From Practice to Theory (Guest Lecturer: Alex Lombardi) 11.1 The Feasibility of Interactive ZK SMPC: semi-honest protocol ZKP malicious protocol Parties use ZKP to prove that they follow the protocol T…

js进阶笔记之原型,原型链

目录 1、原型对象 constructor 属性 对象原型 2、原型链 3、instanceof 4、原型继承 1、原型对象 面向过程就是分析出解决问题所需要的步骤&#xff0c;然后用函数把这些步骤一步一步实现&#xff0c;使用的时候再一个一个的依次调用就可以了。 面向对象是把事务分解成为…

动态规划:2304. 网格中的最小路径代价

2304. 网格中的最小路径代价 给你一个下标从 0 开始的整数矩阵 grid &#xff0c;矩阵大小为 m x n &#xff0c;由从 0 到 m * n - 1 的不同整数组成。你可以在此矩阵中&#xff0c;从一个单元格移动到 下一行 的任何其他单元格。如果你位于单元格 (x, y) &#xff0c;且满足…

软件第三方测评报告可作哪些用途?

软件第三方测评报告是指由独立、中立的第三方机构对软件进行全面、客观、科学的评估和分析后所做的报告。该报告基于系统而严密的评测流程&#xff0c;通过多项指标和标准&#xff0c;对软件的性能、功能、易用性、安全性等方面进行评价&#xff0c;为用户提供一个权威、可靠的…

IDEA 配置maven结合案例使用篇

1. 项目需求和结构分析 需求案例&#xff1a;搭建一个电商平台项目&#xff0c;该平台包括用户服务、订单服务、通用工具模块等。 项目架构&#xff1a; 用户服务&#xff1a;负责处理用户相关的逻辑&#xff0c;例如用户信息的管理、用户注册、登录等。 spring-context 6.0.…

基于MS16F3211芯片的触摸控制灯的状态变化和亮度控制总结版(11.22)

1.任务需求 基于MS16F3211芯片实现功能一个按键通过长按可以控制当前处于亮状态的灯的亮度&#xff0c;当灯从最亮达到最暗时&#xff0c;所用时为3s。现有三盏颜色分别为红绿蓝的灯&#xff0c;在处于关机状态时红灯亮&#xff0c;处于开机状态时红灯灭。点按第一次仅绿灯亮&…

java游戏制作-飞翔的鸟游戏

一.准备工作 首先创建一个新的Java项目命名为“飞翔的鸟”&#xff0c;并在src中创建一个包命名为“com.qiku.bird"&#xff0c;在这个包内分别创建4个类命名为“Bird”、“BirdGame”、“Column”、“Ground”&#xff0c;并向需要的图片素材导入到包内。 二.代码呈现 …

HuggingFace-利用BERT预训练模型实现中文情感分类(下游任务)

准备数据集 使用编码工具 首先需要加载编码工具&#xff0c;编码工具可以将抽象的文字转成数字&#xff0c;便于神经网络后续的处理&#xff0c;其代码如下&#xff1a; # 定义数据集 from transformers import BertTokenizer, BertModel, AdamW # 加载tokenizer token Ber…

关于AssetBundle禁用TypeTree之后的一些可序列化的问题

1&#xff09;关于AssetBundle禁用TypeTree之后的一些可序列化的问题 2&#xff09;启动Unity导入变动的资源时&#xff0c;Singleton ScriptableObject 加载不到 3&#xff09;Xcode15构建Unity 2022.3的Xcode工程&#xff0c;报错没有兼容的iPhone SDK 这是第361篇UWA技术知识…

NLP学习

参考&#xff1a;NLP发展之路I - 从词袋模型到Transformer - 知乎 (zhihu.com) NLP大致的发展历史。从最开始的词袋模型&#xff0c;到RNN&#xff0c;到Transformers和BERT&#xff0c;再到ChatGPT&#xff0c;NLP经历了一段不断精进的发展道路。数据驱动和不断完善的端到端的…

Spring+Mybatis解析

源码执行流程 通过MapperScan导入MapperScannerRegistrar类MapperScannerRegistrar类实现了ImportBeanDefinitionRegistrar接口&#xff0c;Spring启动会调MapperScannerRegistrar类中的registerBeanDefinitions方法在registerBeanDefinitions方法中注册一个MapperScannerConf…

盖雅绩效应用通过SAP认证并斩获创新方案奖

近日&#xff0c;在「不啻微芒 造炬成阳」为主题的SAP合作伙伴创新大赛上&#xff0c;盖雅工场「G移动绩效创新方案」荣获创新解决方案奖。该方案核心是一款基于SAP SuccessFactors套件及SAP BTP平台的扩展应用&#xff0c;主要针对一线人员绩效管理场景&#xff0c;借助简洁的…

国民新旅游时代,OTA们如何制胜新周期?

文 | 螳螂观察&#xff08;TanglangFin&#xff09; 作者 | 图霖 消费全面复苏的大背景下&#xff0c;旅游业正迎来预期中的拐点。 一个显著表现是&#xff0c;旅游消费正在从可选消费转化成必选消费。 国内消费者旅游需求的不降反增&#xff0c;就是最好的印证。 同程研究…

哈希表之开散列的实现

回顾与引出 我们在上一节用闭散列的开放定址法实现了哈希表。不难看出这种方法有明显的缺点&#xff1a;一旦发生哈希冲突&#xff0c;所有的冲突连在一起&#xff0c;容易产生数据“堆积”&#xff0c;即&#xff1a;不同 关键码占据了可利用的空位置&#xff0c;使得寻找某关…

秋招如何准备?有什么建议?

秋招&#xff0c;是毕业生最好的求职渠道&#xff0c;没有之一。尽管还有春招&#xff0c;社招......都不如秋招重要&#xff0c;因为秋招的机会更多..... 如何准备秋招&#xff1f; 1、简历很重要 一个好的简历&#xff0c;就是敲门砖&#xff0c;这是你跟企业HR的第一次亲…

如何使用SD-WAN提升物流供应链网络效率

案例背景 本次分享的物流供应链企业是一家国际性的大型企业&#xff0c;专注于提供全球范围内的物流和供应链解决方案。案例用户在不同国家和地区均设有多个分支机构和办公地点&#xff0c;以支持客户需求和业务运营。 在过去&#xff0c;该企业用户使用传统的MPLS网络来连接各…

【grep】从html表格中快速定位某个数据

文章目录 1 背景2 参考知识2.1 grep2.2 HTML基础语言标签 3 解决方案 1 背景 在html中是一堆表格、图片、文字什么的&#xff0c;想从表格中提取关键词为“GJC”后对应的数字&#xff0c;怎么办呢&#xff1f; 逐个打开html文件&#xff0c;“ctrlF”搜一下&#xff0c;然后复…

直线导轨在自动锁螺丝机的作用及注意事项

直线导轨在自动锁螺丝机中具有重要作用&#xff0c;可以提供精确的导向&#xff0c;使滑块能够沿固定轨迹移动&#xff0c;确保螺丝准确无误地进入螺丝孔并被锁定&#xff0c;因此&#xff0c;选择高品质的直线导轨对于自动锁螺丝机的性能和精度至关重要&#xff01;那么&#…

拿下!这些证书可以帮你职场晋升!(PMP/CSPM/NPDP)

PMP证书为项目管理道路打好基础&#xff0c;建立规划思维&#xff0c;整合思维&#xff0c;提高解决问题效率。中国也有自己的项目管理认证CSPM&#xff0c;与PMP相比难度较小&#xff0c;可用已获得的证书免考。NPDP认证拓宽视野&#xff0c;帮助项目经理提升技能。 01PMP为项…

常见树种(贵州省):006栎类

摘要&#xff1a;本专栏树种介绍图片来源于PPBC中国植物图像库&#xff08;下附网址&#xff09;&#xff0c;本文整理仅做交流学习使用&#xff0c;同时便于查找&#xff0c;如有侵权请联系删除。 图片网址&#xff1a;PPBC中国植物图像库——最大的植物分类图片库 一、麻栎 …