实现el-table两列多选框且不可同时勾选

1、效果图如下,功能:必修和选修不可同时勾选
在这里插入图片描述
2、代码如下

<template><el-table :data="addTableData" style="width: 100%"><el-table-column label="必修" width="55px" align="center"><template slot-scope="scope"><el-checkbox v-model="checked1" :label="scope.row.id" @change="checkboxChange($event,scope.row.id,'checked2')"><span></span></el-checkbox></template></el-table-column><el-table-column label="选修" width="55px" align="center"><template slot-scope="scope"><el-checkbox v-model="checked2" :label="scope.row.id" @change="checkboxChange($event,scope.row.id,'checked1')"><span></span></el-checkbox></template></el-table-column><el-table-column prop="id" label="编号" width="60px" align="center"></el-table-column><el-table-column prop="name" label="名称" align="center"></el-table-column><el-table-column prop="name" label="学时" width="60px"  align="center"></el-table-column></el-table>
</template>export default {data() {return {checked1:[],//必修已选checked2:[],//选修已选}}methods: {checkboxChange(val,id,type) {if(val === true) {this[type] = this[type].filter(function(item) {return item !== id;  // 过滤出值不为2的元素});}},}}

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

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

相关文章

AIGC音视频工具分析和未来创新机会思考

编者按&#xff1a;相较于前两年&#xff0c;2023年音视频行业的使用量增长缓慢&#xff0c;整个音视频行业遇到瓶颈。音视频的行业从业者面临着相互竞争、不得不“卷”的状态。我们需要进行怎样的创新&#xff0c;才能从这种“卷”的状态中脱离出来&#xff1f;LiveVideoStack…

AndroidAGP8.1.0和JDK 17迁移之旅

AndroidAGP8.1.0和JDK 17迁移之旅 前言&#xff1a; 由于我最近写demo的直接把之前的项目从AGP4.2.2升级到8.1.0引发了一些列问题&#xff0c;这里记录一下&#xff0c;前面讲解过迁移DSL方式遇到的问题&#xff0c;这次升级8.1.0也比之前顺利多了&#xff0c;想看DSL迁移的可…

交互消息式IMessage扩展开发记录

IMessage扩展简介 iOS10新加入的基于iMessage的应用扩展&#xff0c;可以丰富发送消息的内容。&#xff08;分享表情、图片、文字、视频、动态消息&#xff1b;一起完成任务或游戏。&#xff09; 简单的将发送的数据内型分为三种&#xff1a; 1.贴纸Stickers&#xff1b; 2.交…

动态内存管理详解

动态内存管理 1.前言 目前来回顾一下想要在内存中开辟空间有哪些方法&#xff1f; 创建变量&#xff1a; int a 0;//在栈上开辟了4字节的空间创建数组&#xff1a; int arr[10] { 0 };//在栈上开辟40字节的空间 但是这两种开辟方式都有两个特点&#xff1a; 开辟的内存空间…

安装搭建私有仓库 Harbor

目录 一. 准备环境 1.1安装 Docker 1.2安装 Docker Compose 二. 下载 Harbor 安装包 三. 解压安装包 四. 配置 Harbor 五. 安装 Harbor 六. 访问 Harbor 七. 创建项目、用户和角色 一. 准备环境 确保您的服务器满足 Harbor 的系统要求。最低要求是至少 2 核 CPU、4GB…

Azure应用程序网关

文章目录 什么是应用程序网关实战演练创建虚拟网络创建虚拟机创建应用程序网关测试搭建结果 什么是应用程序网关 Azure应用程序网关是一种托管服务&#xff0c;用于提供安全、可缩放的 Web 应用程序前端点的应用程序传送控制和保护。它可以通过 SSL 终止、cookie 基于会话持久…

【计算机网络八股】计算机网络(一)

目录 计算机网络的各层协议及作用&#xff1f;TCP和UDP的区别&#xff1f;UDP 和 TCP 对应的应用场景是什么&#xff1f;详细介绍一下 TCP 的三次握手机制&#xff1f;为什么需要三次握手&#xff0c;而不是两次&#xff1f;为什么要三次握手&#xff0c;而不是四次&#xff1f…

[C语言]分支语句和循环语句

[C语言]分支语句和循环语句 文章目录 [C语言]分支语句和循环语句C语言语句分类分支语句if语法结构else的匹配规则switch语句switch语句中的breakswitch语句中default 循环语句while循环while循环中的break和continuefor循环for循环中的break和continuefor循环的变种do while循环…

广告牌安全传感器,实时监测事故隐患尽在掌握

在现代城市中&#xff0c;广告牌作为商业宣传的重要媒介&#xff0c;已然成为城市中一道独特的风景线。然而&#xff0c;随着城市迅速发展&#xff0c;广告牌的安全问题也引起了大众关注。广告招牌一般悬挂于建筑物高处&#xff0c;量大面大。由于设计、材料、施工方法的缺陷&a…

函数栈帧的创建与销毁

目录 引言 基础知识 内存模型 ​ 寄存器的种类与功能 常用的汇编指令 函数栈帧创建与销毁 main()函数栈帧的创建 NO1. NO2. NO3. NO4. NO5. NO6. main()函数栈帧变量的创建 调用Add()函数栈帧的预备工作——传参 NO1. NO2. NO3. Add()函数栈帧的创建 …

C语言入门_Day 6布尔数与比较运算

目录 前言 1.布尔数 2.比较运算 3.易错点 4.思维导图 前言 除了算术计算以外&#xff0c;编程语言中还会大量使用比较运算&#xff0c;并会根据比较运算的结果是“真”还是“假”&#xff0c;来执行不同的代码。 当你想买一杯奶茶&#xff0c;准备支付的时候&#xff0c;支…

Codeforces EDU 151 Div.2

文章目录 A. Forbidden IntegerB. Come TogetherC. Strong PasswordD. Rating SystemE. Boxes and Balls A. Forbidden Integer Problem - A - Codeforces 给定整数n&#xff0c;从1~k中选择除了x的数&#xff0c;使这些数之和为n&#xff0c;每个数可以选择无限次 爆搜&…

[Vue]解决npm run dev报错node:internal/modules/cjs/loader:1031 throw err;

解决: 有2中方法&#xff0c;建议先尝试第一种&#xff0c;不行再第二种 第一种: 重新安装依赖环境 删除项目的node_modules文件夹&#xff0c;重新执行 # 安装依赖环境 npm install# 运行 npm run dev 我只用了第一种方法就可以了 &#xff0c;第二种方法从别的博主那看到…

【Java 动态数据统计图】动态数据统计思路案例(动态,排序,数组)二(113)

需求&#xff1a; 有一个List<Map<String.Object>>,存储了区域的数据&#xff0c; 数据是根据用户查询条件进行显示的&#xff1b;所以查询的数据是动态的&#xff1b;按区域维度统计每个区域出现的次数&#xff0c;并且按照次数的大小排序&#xff08;升序&#…

最新ChatGPT网站AI系统源码+详细图文搭建教程/支持GPT4.0/AI绘画/H5端/Prompt知识库/

一、前言 SparkAi系统是基于国外很火的ChatGPT进行开发的Ai智能问答系统。本期针对源码系统整体测试下来非常完美&#xff0c;可以说SparkAi是目前国内一款的ChatGPT对接OpenAI软件系统。 那么如何搭建部署AI创作ChatGPT&#xff1f;小编这里写一个详细图文教程吧&#xff01…

从 Ansible Galaxy 使用角色

从 Ansible Galaxy 使用角色 根据下列要求&#xff0c;创建一个名为 /home/curtis/ansible/roles.yml 的 playbook &#xff1a; playbook 中包含一个 play&#xff0c; 该 play 在 balancers 主机组中的主机上运行并将使用 balancer 角色。 此角色配置一项服务&#xff0c;以…

Docker容器:docker镜像的创建及dockerfile

Docker容器&#xff1a;docker镜像的创建及dockerfile案例 一.docker镜像的三种创建方法 创建镜像有三种方法&#xff1a;基于现有镜像创建、基于本地模板创建及基于dockerfile创建 1.基于现有镜像创建 1.1 启动镜像 #首先启动一个镜像&#xff0c;在容器里做修改 docker …

SpringBoot常用注解-@PathVariable、@RequestParam 、@RequestBody

目录 PathVariable RequestParam RequestBody PathVariable PathVariable 获取url中的数据&#xff0c;绑定路径中的占位符参数到方法参数变量中&#xff0c;get或者post方式都可以&#xff0c;如果URL中无参数&#xff0c;将会出错 例如获取/login/id/name中的id值和name值 …

途乐证券|定增募资是什么意思?

作为融资手法之一&#xff0c;定增募资在企业中被广泛运用。但一般投资者对此或许不太了解&#xff0c;只知道它是一种融资手法。那么&#xff0c;定增募资到底是什么意思呢&#xff1f; 一、什么是定增募资&#xff1f; 定增募资即定向增发股票募集资金&#xff0c;是新股票发…

C++入门知识点——解决C语言不足

&#x1f636;‍&#x1f32b;️Take your time ! &#x1f636;‍&#x1f32b;️ &#x1f4a5;个人主页&#xff1a;&#x1f525;&#x1f525;&#x1f525;大魔王&#x1f525;&#x1f525;&#x1f525; &#x1f4a5;代码仓库&#xff1a;&#x1f525;&#x1f525;魔…