el-checkbox-group的全选与反选

news2024/12/27 16:08:21

需求如下:

思路:在点击全部时按钮组双向绑定赋值全部值,点击按钮组内按钮计算选中按钮数量与按钮组数量对比,判定是否选中全部

代码如下:

<template>
  <div>
    <el-checkbox-button v-model="checkall" @change="handleCheckAllChange">全部</el-checkbox-button>
    <el-checkbox-group v-model="state" @change="checkRadio"  >
      <el-checkbox-button v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox-button>
    </el-checkbox-group>
  </div>
 
</template>
<script>
  const cityOptions = ['上海', '北京', '广州', '深圳'];
  export default {
    data () {
      return {
        cities: cityOptions,
        checkall:false,
        state:[]

      };
    },
    methods:{
        handleCheckAllChange(val){
            this.state=val?this.cities:[]
            this.getList()
        },
        checkRadio(val){
            this.state=val
            const checkedCount=val.length
            this.checkAll=checkedCount===this.cities.length
            this.getList()
        },
        getList(){

        }
     }
  }
</script>

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

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

相关文章

视频去水印怎么去?3个简单的去水印方法分享

当我们需要视频去水印怎么去时&#xff0c;了解如何有效地去除视频水印变得至关重要,在日常使用视频资源的过程中&#xff0c;我们可能会遇到一些带有品牌标志或文字水印的视频&#xff0c;这些水印可能会影响视频的观赏体验&#xff0c;特别是当我们需要将视频用于学习、研究或…

viple入门(五)

&#xff08;1&#xff09;自定义活动 自定义活动&#xff0c;用来创建新的组件、服务、函数或者其他代码模块&#xff0c;使用最多的是创建函数。 函数是对一个功能的封装&#xff0c;在调用的时候执行&#xff0c;没有调用的时候则不执行。函数可能有参数&#xff0c;可能没…

Java代码如何对Excel文件进行zip压缩

1&#xff1a;新建 ZipUtils 工具类 package com.ly.cloud.datacollection.util;import java.io.File; import java.io.FileInputStream; import java.io.FileOutputStream; import java.io.IOException; import java.io.OutputStream; import java.net.URLEncoder; import ja…

文件过大放不到U盘怎么办?三个方法轻松搞定!

文件过大放不了U盘我们可以从文件过大这个角度来解决一下这个问题&#xff0c;可以借助一些工具把文件压缩后&#xff0c;体积变小后&#xff0c;再放入U盘&#xff0c;使得u盘得到高效的利用&#xff0c;下面是推荐的一些好用的软件。 一、嗨格式压缩大师 是一款可以压缩多种…

idea 模板注释 {@link}

1. 新增组 2. 设置方法注释及变量 增加模板文本 ** * $param$ * return {link $return$} */3. 设置变量表达式 勾选跳过param 参数表达式 groovyScript("def result ;def params \"${_1}\".replaceAll([\\\\[|\\\\]|\\\\s], ).split(,).toList();def param…

【案例卡】clickhouse:多行数据拼接在一行

一、需求 针对clickhouse数据库中&#xff0c;group by 分组后的字符串字段&#xff0c;拼接处理在一行的问题实现。在mysql中&#xff0c;可以用group_concat()函数来实现&#xff0c;而clickhouse数据库不支持此函数&#xff0c;特此记录实现方式。 二、clickhouse相关函数…

C++模板元模板实战书籍讲解第一章题目讲解

目录 第一题 C代码示例 第二题 C代码示例 第三题 3.1 使用std::integral_constant模板类 3.2 使用std::conditional结合std::is_same判断 总结 第四题 C代码示例 第五题 C代码示例 第六题 C代码示例 第七题 C代码示例 总结 第一题 对于元函数来说&#xff0c;…

AIGPT重大升级,界面重新设计,功能更加饱满,用户体验升级

AIGPT AIGPT是一款功能强大的人工智能技术处理软件&#xff0c;不但拥有其他模型处理文本认知的能力还有AI绘画模型、拥有自身的插件库。 我们都知道使用ChatGPT是需要账号以及使用魔法的&#xff0c;实现其中的某一项对我们一般的初学者来说都是一次巨大的挑战&#xff0c;但…

录屏软件区域录制图片特效显示,电脑怎么区域局域放大录制屏幕

对应的视频链接 录屏软件区域录制图片特效显示&#xff0c;电脑怎么区域局域放大录制屏幕-CSDN直播录屏软件区域录制图片特效显示&#xff0c;电脑怎么区域局域放大录制屏幕图片特效显示软件可以定制https://live.csdn.net/v/341731 录屏软件区域录制图片特效显示&#xff0c…

socks5代理和https代理有什么不同?各自有哪些优点?

socks5代理和https代理是两种不同的代理服务&#xff0c;它们在实现方式、安全性和协议特点等方面存在差异。下面我们来详细了解一下这两种代理的优点。 一、socks5代理的优点 1. 速度快 socks5代理采用了TCP协议&#xff0c;能够有效地减少网络延迟和数据传输速度慢的问题&…

通过docker快速部署RabbitMq

查询镜像&#xff1a; docker search rabbitmq拉去RabbitMq镜像&#xff1a; docker pull rabbitmq:management创建数据卷&#xff1a; docker volume create rabbitmq-home运行容器&#xff1a; docker run -id --namerabbitmq -v rabbitmq-home:/var/lib/rabbitmq -p 156…

Steam余额红锁的原因,及红锁后申诉方法

CSGO饰品自动上架助手使用教程 安全的余额一般是通过充值卡充值获得&#xff0c;再加上交易手续费再转卖给你。一般便宜不到哪去。 但你别以为余额是安全的&#xff0c;就万事大吉了。照样有被红锁的可能性&#xff0c;比如这三种&#xff1a; 1、Steam市场巡查机制&#xff…

UML与PlantUML简介

UML与PlantUML 1、UML与PlantUML概述2、PlantUML使用 1、UML与PlantUML概述 UML&#xff08;Unified Modeling Language&#xff09;是一种统一建模语言&#xff0c;为面向对象开发系统的产品进行说明、可视化、和编制文档的一种标准语言&#xff0c;独立于任何具体程序设计语言…

番外---10.1 gcc+make调试程序

######### step0&#xff1a;理解程序调试&#xff1b; &#xff08;原始程序文件--->目标文件---->可执行文件&#xff1b;&#xff09; step1&#xff1a;掌握使用gcc的调试方法&#xff1b; step2&#xff1a;掌握使用make编译方法&#xff1b; ######### step0&…

JWT原理分析——JWT

了解为什么会有JWT的出现&#xff1f; 首先不得不提到一个知识叫做跨域身份验证&#xff0c;JWT的出现就是为了更好的解决这个问题&#xff0c;但是在没有JWT的时候&#xff0c;我们一般怎么做呢&#xff1f;一般使用Cookie和Session&#xff0c;流程大体如下所示&#xff1a;…

DVWA - 1

文章目录 Brute Forcelowhigh Command Injectionlowmediumhigh CSRFlowmediumhigh Brute Force low 1.进入到Brute Force页面&#xff0c;随机输入一个用户名及密码&#xff0c;点击登录。使用 BurpSuite查看拦截历史&#xff0c;找到该登录请求&#xff0c;右键send to intr…

第二章:人工智能深度学习教程-深度学习简介

深度学习是基于人工神经网络的机器学习的一个分支。它能够学习数据中的复杂模式和关系。在深度学习中&#xff0c;我们不需要显式地对所有内容进行编程。近年来&#xff0c;由于处理能力的进步和大型数据集的可用性&#xff0c;它变得越来越流行。因为它基于人工神经网络&#…

pytorch_神经网络构建5

文章目录 生成对抗网络自动编码器变分自动编码器重参数GANS自动编码器变分自动编码器gans网络Least Squares GANDeep Convolutional GANs 生成对抗网络 这起源于一种思想,假如有一个生成器,从原始图片那里学习东西,一个判别器来判别图片是真实的还是生成的, 假如生成的东西能以…

竞赛选题 深度学习手势识别算法实现 - opencv python

文章目录 1 前言2 项目背景3 任务描述4 环境搭配5 项目实现5.1 准备数据5.2 构建网络5.3 开始训练5.4 模型评估 6 识别效果7 最后 1 前言 &#x1f525; 优质竞赛项目系列&#xff0c;今天要分享的是 &#x1f6a9; 深度学习手势识别算法实现 - opencv python 该项目较为新颖…

【Spring】bean的自动装配

目录 一.byName 二.byType 快捷书写 people1 package org.example;public class People1 {public void eat(){System.out.println("吃饭");} }people2 package org.example;public class People2 {public void sleep(){System.out.println("睡觉");} …