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

news2024/10/6 22:28:14

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.coloradmin.cn/o/893407.html

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

相关文章

CentOS7 上安装 Percona XtraBackup

介绍 Percona XtraBackup是一款适用于基于MySQL的服务器的开源热备份实用程序&#xff0c;在备份期间不会锁定数据库。它可以备份MySQL 5.1、5.5、5.6 和 5.7 服务器上的InnoDB、XtraDB 和MyISAM表的数据&#xff0c;以及带有 XtraDB 的 Percona Server。 下载网址 2.4文档地…

中大许少辉博士中国建筑出版传媒八一新书《乡村振兴战略下传统村落文化旅游设计》百度百科新闻

中大许少辉博士中国建筑出版传媒八一新书《乡村振兴战略下传统村落文化旅游设计》百度百科新闻&#xff1a; 乡村振兴战略下传统村落文化旅游设计 - 百度百科 https://baike.baidu.com/item/乡村振兴战略下传统村落文化旅游设计/62588677 概览 《乡村振兴战略下传统村落文化旅游…

链游再进化 Web3版CSGO来袭

过去几年&#xff0c;游戏开发者们一直希望借Web3这个价值流通网络&#xff0c;改造传统游戏的经济系统&#xff0c;将虚拟资产的掌管权交给用户&#xff0c;让资产自由地在市场流通。 Web3游戏发展史上&#xff0c;涌现过CryptoKitties、Axie Infinity两大爆款&#xff0c;但…

C语言暑假刷题冲刺篇——day3

目录 一、选择题 二、编程题 &#x1f388;个人主页&#xff1a;库库的里昂 &#x1f390;CSDN新晋作者 &#x1f389;欢迎 &#x1f44d;点赞✍评论⭐收藏✨收录专栏&#xff1a;C语言每日一练✨其他专栏&#xff1a;代码小游戏C语言初阶&#x1f91d;希望作者的文章能对你有…

Spring5学习笔记—AOP编程

✅作者简介&#xff1a;大家好&#xff0c;我是Leo&#xff0c;热爱Java后端开发者&#xff0c;一个想要与大家共同进步的男人&#x1f609;&#x1f609; &#x1f34e;个人主页&#xff1a;Leo的博客 &#x1f49e;当前专栏&#xff1a; Spring专栏 ✨特色专栏&#xff1a; M…

什么是服务网格,为什么 Kubernetes 需要它?

​企业现在热衷于采用微服务架构&#xff0c;因为它具有敏捷性和灵活性。容器和作为首选的容器编排工具—Kubernetes的兴起使得从单体架构向微服务架构的转变变得更加容易。然而&#xff0c;在大规模使用微服务架构时出现了一系列新的挑战&#xff1a; DevOps和架构师很难管理…

SpringBoot的日志信息及Lombok的常用注解

文章目录 一. 日志的介绍1. 什么是日志2. 日志的作用 二. 日志的使用1. 日志格式说明2. 自定义日志的输出3. 日志级别4. 日志级别的配置5. 日志持久化6. 更简单的输出日志-Lomok7. Lombok框架实现原理以及其他常见注解 一. 日志的介绍 1. 什么是日志 日志是我们程序重要组成部…

UE4/5数字人MetaHuman的控制绑定资产使用

开始操作 首先我们创建一个关卡序列&#xff1a; 打开后将我们的数字人放进去【右键&#xff0c;第一个添加进去】&#xff1a; 我们会自动进入动画模式&#xff0c;没有的话&#xff0c;就自己进入一下&#xff0c; 然后我们去寻找我们的控制绑定资产。 找到控制绑定资产 …

pdf文件如何编辑修改?学会这几种简单编辑方法

pdf文件如何编辑修改&#xff1f;在日常工作和学习中&#xff0c;我们经常需要编辑和修改PDF文件。无论是工作中的合同、报告或学习中的笔记、课件&#xff0c;PDF文件都是我们常用的文档格式。然而&#xff0c;PDF文件的特性使得它们很难被直接编辑。那么&#xff0c;如何编辑…

移远通信推出一站式Matter解决方案,构建智能家居开放新生态

近日&#xff0c;全球领先的S物联网整体解决方案供应商移远通信宣布&#xff0c;正式推出全新Matter解决方案&#xff0c;从模组、APP、平台、认证、生产五大层面为客户提供一站式服务&#xff0c;赋能智能家居行业加快融合发展。 过去十年&#xff0c;得益于物联网生态的发展&…

Hlang--用Python写个解析器

文章目录 前言语法树节点语法描述异常处理InvalidSyntaxError错误内容定位解析实现bin_op函数factory函数模拟流程总结前言 先前,我们实现了一个基本的词法分析器。那么现在的话,我们要在这个基础上面,实现一个解析器,那么实现效果的话,是这样的: 注意此时此刻,我们还…

一文教你快速 Cloudreve搭建云盘系统,实现随时访问

文章目录 1、前言2、本地网站搭建2.1 环境使用2.2 支持组件选择2.3 网页安装2.4 测试和使用2.5 问题解决 3、本地网页发布3.1 cpolar云端设置3.2 cpolar本地设置 4、公网访问测试5、结语 1、前言 自云存储概念兴起已经有段时间了&#xff0c;各互联网大厂也纷纷加入战局&#…

FLatten Transformer

FLatten Transformer: Vision Transformer using Focused Linear Attention ICCV 2023 聚焦式线性注意力模块 关于Transformer 在Transformer模型应用于视觉领域的过程中&#xff0c;降低自注意力的计算复杂度是一个重要的研究方向。线性注意力通过两个独立的映射函数来近似S…

springBoot 配置文件 spring.resources.add-mappings 参数的作用

在Spring Boot应用中&#xff0c;spring.resources.add-mappings参数用于控制是否将特定路径的资源文件添加到URL路径映射中。 默认情况下&#xff0c;该参数的值为true&#xff0c;即会自动将静态资源&#xff08;例如CSS、JavaScript、图片等&#xff09;的URL路径添加到Spr…

Mybatis Plus中使用LambdaQueryWrapper进行分页以及模糊查询对比传统XML方式进行分页

传统的XML分页以及模糊查询操作 传统的XML方式只能使用limit以及offset进行分页&#xff0c;通过判断name和bindState是否为空&#xff0c;不为空则拼接条件。 List<SanitationCompanyStaff> getSanitationStaffInfo(Param("name") String name,Param("bi…

〔013〕Stable Diffusion 之 图片自动评分和不健康内容过滤器 篇

✨ 目录 &#x1f388; 下载咖啡美学评价插件&#x1f388; 咖啡美学评价使用&#x1f388; 不健康内容过滤器插件 &#x1f388; 下载咖啡美学评价插件 想让系统帮你的图片作品打分评价&#xff0c;可以下载咖啡美学自动评价插件插件地址&#xff1a;https://github.com/p1at…

记录--webpack和vite原理

这里给大家分享我在网上总结出来的一些知识&#xff0c;希望对大家有所帮助 前言 每次用vite创建项目秒建好&#xff0c;前几天用vue-cli创建了一个项目&#xff0c;足足等了我一分钟&#xff0c;那为什么用 vite 比 webpack 要快呢&#xff0c;这篇文章带你梳理清楚它们的原理…

Python“牵手”1688商品评论数据采集方法,1688API申请指南

1688平台API接口是为开发电商类应用程序而设计的一套完整的、跨浏览器、跨平台的接口规范&#xff0c;1688API接口是指通过编程的方式&#xff0c;让开发者能够通过HTTP协议直接访问1688平台的数据&#xff0c;包括商品信息、店铺信息、物流信息等&#xff0c;从而实现1688平台…

【校招VIP】java语言类和对象之map、set集合

考点介绍&#xff1a; map、set集合相关内容是校招面试的高频考点之一。 map和set是一种专门用来进行搜索的容器或者数据结构&#xff0c;其搜索效率与其具体的实例化子类有关系。 『java语言类和对象之map、set集合』相关题目及解析内容可点击文章末尾链接查看&#xff01; …

dm达梦数据库 创建 YEARWEEK 外部函数

这里写目录标题 数据库环境创建方式一、C 外部函数二、JAVA 外部函数 数据库环境 类型版本官网下载地址基础环境Windows 11–Dm8dm8_20230418_x86_win_64.zip链接: 官网 创建方式 一、C 外部函数 &#xff08;1&#xff09;C 外部函数是使用 C、C 语言编写&#xff0c;在数据…