elementUI表格勾选框判断选择相同的内容才能进行后续逻辑处理;否则拦截提示

news2024/9/26 5:20:59

需求是:
可多选需满足条件:同一个年级、同一个分数;
不满足条件给出提示:请选择同一个年级 、分数的学生

1、先对勾选数据进行赋值
在这里插入图片描述

 /** 表格复选框勾选 */
    handleSelectionChange(val) {
      console.log(val)
      this.tableSelectArr = val
    },

2、判断是否相同的内容 的公共方法,tableSelectArr是勾选的数据集合

/** 判断是否是相同内容 */
    isEqualMethod(name) {
      // 返回一个id的数组
      const newArr = this.tableSelectArr.map(item => item[name])
      // Set类似于数组,区别在于它所有的成员都是唯一的,不能有重复的值,会将重复的值去重
      const arrSet = new Set(newArr)
      console.log(newArr, arrSet, 'arrSet', arrSet.size)
      // 判断set之后的数组的长度跟set之前的数组是否相等
      if (arrSet.size === 1) {
        return name
      } else {
        return false
      }
    },

3、按钮位置增加判断、拦截

// 按钮
    handleSomething() {
     // 同一个年级、分数
      const supplier = this.isEqualMethod('grade') // 方法传参是表格数据中对应的字段
      const unit = this.isEqualMethod('score')
      if (supplier && unit) {
        // 继续后面逻辑
       } else {
         this.$message.warning('请选择同一个年级 、分数的学生')
       }
    },

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

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

相关文章

5.7.1 UDP概述

5.7.1 UDP概述 用户数据报UDP协议是在IP数据报服务之上增加了两个内容 端口的复用和分用差错控制 一、UDP特点 UDP特点TCP特点无连接面向连接不可靠的服务可靠的服务点到点和多点通信点到点的通信首部8字节首部固定部分20字节面向报文面向字节流 UDP是无连接的服务&#x…

想做一个简单功能小程序需要多久

对于小程序开发的新手来说,往往会有这样一个问题:想做一个简单功能的小程序,大概需要多久时间呢?实际上,这个问题的答案取决于许多因素,包括你的开发技能、你计划实现的功能以及你为项目投入的时间等。 首…

建筑企业缺成本票,怎么解决?学会这几招可胜券在握!

建筑企业缺成本票,怎么解决?学会这几招可胜券在握! 《税筹顾问》专注于园区招商、企业税务筹划,合理合规助力企业节税! 建筑行业业务流程的特点是一般建筑工期的周期长,涉及的施工人员构成十分复杂&#x…

Docker安装,常用命令,部署MySQL,Tomcat,nginx,redis

Docker简介 Docker是基于Go语言实现的云开源项目。 Docker的主要目标是“Build,Ship and Run Any App,Anywhere”,也就是通过对应用组件的封装、分发、部署、运行等生命周期的管理,使用户的APP(可以是一个WEB应用或数据库应用等等…

Cocos Creator Node 旋转角度实现的几种方法

rotation 需要四元数进行旋转,具体旋转方法本博主直接绕开了,因为没给案例不太了解,知道的欢迎评论 1.在Cocos Creator v3.6中,要使用setRotation方法将节点旋转90度,可以使用以下代码: // 获取节点 var node this.n…

Grafana嵌入iframe,websoket连接报错400或403(nginx代理)

1、custom.ini配置文件修改allowed_origins* 2、 nginx中增加配置,如下:

Effective Modern C++ 笔记

Effective Modern C 本文是Effective Modern C学习笔记,以细碎的知识点记录的形式来记录学习过程。 简介: 1、Effective Modern C目标:学习怎样高效地使用新机能 2、移动语义(C11): 右值表明这个对象适合…

Unable to Locate package python2 | Linux Ubuntu系统下python2和cif2cell的安装

Linux Ubuntu系统下python2的安装 安装键入命令和报错如下: 背景:官方早年前已经宣布停止 Python 2 的更新和服务,所以对于ubuntu20版本之后的,都是自带安装了python3,但是我们在处理安装某些大型科学计算程序的时候…

【python百炼成魔】python之字典详解

前言 今天我们一起来探讨python的另外一种类型: 字典,如果你没有看过列表和元组,建议先学习列表和元组。 【python百炼成魔】python之元组详解 【python百炼成魔】python之列表详解 文章目录 前言字典的概念语法格式及字典的创建字典的日常…

广告数仓:可视化展示

系列文章目录 广告数仓:采集通道创建 广告数仓:数仓搭建 广告数仓:数仓搭建(二) 广告数仓:全流程调度 广告数仓:可视化展示 文章目录 系列文章目录前言一、FineBI1.FineBI下载2.软件安装3.配置数据库 二、数据可视化1…

I3C协议手册研读-2

阿兴的理解 I3C的时序主要包括SDR模式、HDR模式(HDR-DDR、HDR-TSP、HDR-TSL) 阿兴的理解 上图主要介绍了SDR模式,SDR模式下的波形远看很像I2C波形,因此可以被逻辑分析仪识别到。此外,SDR较I2C增加了一些新的特征。 阿兴的理解 图中很好的绘制…

Unity 事件监听与广播(高度解耦合,观察者模式)

文章目录 1. 目的2. 主要思路3. 基础类4. EventCenter 事件中心类5. 测试 1. 目的 使用观察者模式降低模块间的耦合性 2. 主要思路 通过C# 的 Dictionary 存放事件码和事件的委托添加事件: 判断字典是否有该事件码,没有添加判断当前委托类型与添加的事…

微客云接口支持话费充值,大批量充值更方便

目前话费作为生活中的必需品,只要使用手机就一定会用到话费充值。 但是目前市场上可供话费充值的渠道比如:支付宝、微信、各大银行app,只能单笔充值,如果有几百几千个号码,只能单笔去充值,根本是不可能实现…

Qt实现拖拽功能(支持拖放文件、拖放操作)

目录 拖放Qt程序接受其他程序的拖拽部件/控件之间相互拖放总结 拖放 拖放是在一个应用程序内或者多个应用程序之间传递信息的一种直观的现代操作方式。除了为剪贴板提供支持外,通常它还提供数据移动和复制的功能。 拖放操作包括两个截然不同的动作:拖动和放下。Qt窗口部件可以…

津津乐道设计模式 - 享元模式详解(以影院座位举例让你快速掌握)

😄 19年之后由于某些原因断更了三年,23年重新扬帆起航,推出更多优质博文,希望大家多多支持~ 🌷 古之立大事者,不惟有超世之才,亦必有坚忍不拔之志 🎐 个人CSND主页——Mi…

itext 7批量生成pdf文件并以压缩包形式下载

itext 7批量生成pdf文件并以压缩包形式下载 引入jar <dependency><groupId>com.itextpdf</groupId><artifactId>itext7-core</artifactId><version>7.0.3</version><type>pom</type></dependency>代码实现–生成…

逻辑漏洞小结之SRC篇(值得收藏,反复看!)

​​​​​最近在挖各大src&#xff0c;主要以逻辑漏洞为主&#xff0c;想着总结一下我所知道的一些逻辑漏洞分享一下以及举部分实际的案例展示一下&#xff0c;方便大家理解。 主要从两个方面看&#xff0c;业务方面与漏洞方面。&#xff08;接下来就从拿到网站的挖掘步骤进行…

如何使用模板化消息进行客户服务?(参考salesmartly)

如何使用模板化消息进行客户服务&#xff1f;&#xff08;参考salesmartly&#xff09; 一整天一遍又一遍地重复相同的答案可能会很乏味&#xff0c;尤其是对于您的客户服务团队而言。模板化消息&#xff0c;也称为预制回复或回复模板&#xff0c;已成为许多客户服务团队必备功…

Kong(Without DB)的安装和基本使用

下载和安装 Docs 这里以Centos为例 sudo yum install kong-enterprise-edition-3.3.0.0.rpm配置 ​ Kong的官网提供了两个配置模式一个是 Using a database 另一个是使用 yaml配置文件的形式&#xff0c;安装好后默认配置文件默认是/etc/kong/kong.conf.default 二者对比 …

React V6实现类似与vue的eventBus

功能背景 想要实现类似于vue的eventBus的功能&#xff0c;由一个组件通知其他一个或多个组件。应用场景&#xff1a;比如一个可视化大屏的界面&#xff0c;当筛选条件变化的时候&#xff0c;要同时通知到大屏中所有图表一起变化。&#xff08;当然使用store也是可以的&#xff…