实现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,一经查实,立即删除!

相关文章

CentOS自己搭建时钟同步服务实操

目录 1、产生背景 2、操作过程 3、客户端操作 4、ntpd和ntpdate的区别 5、参考文章 1、产生背景 因为公司业务&#xff0c;需要使用一些网关设备上报监测实时数据&#xff0c;为了保障数据时钟一致性&#xff0c;所以需要提供一天时钟校验服务器。因为原来这个厂家的网关设…

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…

flask使用心得

Flask开发 flask不像django那样重量&#xff0c;它非常轻巧&#xff0c;可由程序员自己深度掌控。很适合用来做一些原型快速开发。 一个hello world的例子&#xff1a; from flask import Flask import loggingapp Flask(__name__)app.route(/) def hello_world():app.logge…

Azure应用程序网关

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

神经网络基础-神经网络补充概念-58-端到端的深度学习

概念 端到端深度学习&#xff08;End-to-End Deep Learning&#xff09;是指将整个问题的解决过程从输入到输出都交由深度神经网络来完成&#xff0c;无需手工设计复杂的特征提取、预处理或后处理步骤。这种方法的核心思想是通过神经网络自动地学习适合任务的特征表示和映射&a…

Centos 7 通过Docker 安装MySQL 8.0.33实现数据持久化及my.cnf配置

一、docker 启动MySQL容器实现数据持久化 要在 CentOS 7 上使用 Docker 启动 MySQL 8.0.33&#xff0c;并配置 MySQL 的 my.cnf 文件&#xff0c;同时实现 MySQL 数据的持久化&#xff0c;可以按照以下步骤进行操作&#xff1a; 1、安装 Docker&#xff1a;确保你在 CentOS 7 …

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

目录 计算机网络的各层协议及作用&#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()函数栈帧的创建 …

对接海康明眸门禁设备-删除人员信息

对接海康明眸门禁设备-删除人员信息 文中登录 退出登录 长连接和海康hCNetSDK等接口 见文章 初始SDK和登录 /*** 删除人脸 IotCommDataResult 自定义类 收集结果*/Overridepublic List<IotCommDataResult> deleteFace(IotCameraParam camera, Collection<Long> us…

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

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

一文解析HTTP与HTTPS,它们的区别和联系

一文解析HTTP与HTTPS&#xff0c;它们的区别和联系 HTTP和HTTPS之间不同点 尽管HTTP和HTTPS在安全性方面存在差异&#xff0c;但它们仍然共享许多相同的基本特征和功能。这些相同点使得HTTP成为广泛应用的标准协议&#xff0c;并且HTTPS作为更安全的替代方案被广泛采用。HTTP…

npm yarn pnpm 命令集

npm 安装依赖 npm install 安装某个依赖 npm install xxx7.6.3 安装到全局&#xff08;dependencies&#xff09; npm install xxx7.6.3 -S 安装到线下&#xff08;devDependencies&#xff09; npm install xxx7.6.3 -D 卸载某个依赖 npm uninstall xxx 卸载全局依…

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;第二种方法从别的博主那看到…