Python私教张大鹏 Vue3整合AntDesignVue之Checkbox 多选框

何时使用

在一组可选项中进行多项选择时;
单独使用可以表示两种状态之间的切换,和 switch 类似。区别在于切换 switch 会直接触发状态改变,而 checkbox 一般用于状态标记,需要和提交操作配合。

案例:多选框组件

核心代码:

<template>
  <a-checkbox v-model:checked="checked">Checkbox</a-checkbox>
</template>
<script setup>
import { ref } from 'vue';
const checked = ref(false);
</script>

vue3示例:

<script setup>
import {ref} from "vue";

const isAgree = ref(false)
</script>
<template>
  <div class="p-8 bg-indigo-50 text-center">
    <a-checkbox v-model:checked="isAgree">同意协议</a-checkbox>
    <a-divider/>
    <a-typography-title>{{ isAgree}}</a-typography-title>
  </div>
</template>

在这里插入图片描述

案例:全选

在实现全选效果时,你可能会用到 indeterminate 属性

核心代码:

<template>
  <div>
    <a-checkbox
      v-model:checked="state.checkAll"
      :indeterminate="state.indeterminate"
      @change="onCheckAllChange"
    >
      Check all
    </a-checkbox>
  </div>
  <a-divider />
  <a-checkbox-group v-model:value="state.checkedList" :options="plainOptions" />
</template>
<script setup>
import { reactive, watch } from 'vue';
const plainOptions = ['Apple', 'Pear', 'Orange'];
const state = reactive({
  indeterminate: true,
  checkAll: false,
  checkedList: ['Apple', 'Orange'],
});
const onCheckAllChange = e => {
  Object.assign(state, {
    checkedList: e.target.checked ? plainOptions : [],
    indeterminate: false,
  });
};
watch(
  () => state.checkedList,
  val => {
    state.indeterminate = !!val.length && val.length < plainOptions.length;
    state.checkAll = val.length === plainOptions.length;
  },
);
</script>

第一步:定义全选组件

<a-checkbox
            v-model:checked="state.checkAll"
            :indeterminate="state.indeterminate"
            @change="onCheckAllChange"
            >
  Check all
</a-checkbox>

第二步:定义选项组组件

<a-checkbox-group v-model:value="state.checkedList" :options="plainOptions" />

第三步:定义选项组内容

const plainOptions = ['Apple', 'Pear', 'Orange'];

第四步:定义全选状态

  • indeterminate:是否选中
  • checkAll:是否全选
  • checkedList:选中列表
const state = reactive({
  indeterminate: true,
  checkAll: false,
  checkedList: ['Apple', 'Orange'],
});

第五步:监听选中事件

const onCheckAllChange = e => {
  Object.assign(state, {
    checkedList: e.target.checked ? plainOptions : [],
    indeterminate: false,
  });
};

第六步:监听已选中列表

watch(
  () => state.checkedList,
  val => {
    state.indeterminate = !!val.length && val.length < plainOptions.length;
    state.checkAll = val.length === plainOptions.length;
  },
);

vue3示例:

<script setup>
import {reactive, ref, watch} from "vue";

const checkAll = ref(false)
const checkList = ["Python", "Golang", "JavaScript"]
const checkState = reactive({
  indeterminate: true,
  checkAll: false,
  checkedList: ["Python", "JavaScript"]
})
const onCheckAllChange = e => {
  Object.assign(checkState, {
    checkedList: e.target.checked ? checkList : [],
    indeterminate: false,
  })
}
watch(
    () => checkState.checkedList,
    val => {
      checkState.indeterminate = !!val.length && val.length < checkList.length
      checkState.checkAll = val.length === checkList.length
    }
)
</script>
<template>
  <div class="p-8 bg-indigo-50 text-center">
    <a-checkbox
        v-model:checked="checkState.checkAll"
        :indeterminate="checkState.indeterminate"
        @change="onCheckAllChange"
    >全选
    </a-checkbox>
    <a-divider/>
    <a-checkbox-group
        v-model:value="checkState.checkedList"
        :options="checkList"
    />
  </div>
</template>

在这里插入图片描述

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

Django中使用下拉列表过滤HTML表格数据

在Django中&#xff0c;你可以使用下拉列表&#xff08;即选择框&#xff09;来过滤HTML表格中的数据。这通常涉及两个主要步骤&#xff1a;创建过滤表单和处理过滤逻辑。 创建过滤表单 首先&#xff0c;你需要创建一个表单&#xff0c;用于接收用户选择的过滤条件。这个表单可…

Laravel 6 - 第十九章 模型文件

​ 文章目录 Laravel 6 - 第一章 简介 Laravel 6 - 第二章 项目搭建 Laravel 6 - 第三章 文件夹结构 Laravel 6 - 第四章 生命周期 Laravel 6 - 第五章 控制反转和依赖注入 Laravel 6 - 第六章 服务容器 Laravel 6 - 第七章 服务提供者 Laravel 6 - 第八章 门面 Laravel 6 - …

基于JSP的超市管理系统

你好呀&#xff0c;我是计算机学长猫哥&#xff01;如果有相关需求&#xff0c;文末可以找到我的联系方式。 开发语言&#xff1a;Java 数据库&#xff1a;MySQL 技术&#xff1a;JSP MyBatis 工具&#xff1a;IDEA/Eclipse、Navicat、Maven 系统展示 员工管理界面图 管…

香港户口需要什么条件?有学历要求吗?最新香港落户途径详解!

香港户口需要什么条件&#xff1f;有学历要求吗&#xff1f;最新香港落户途径详解&#xff01; 由于香港放开“落户”窗口&#xff0c;想去香港发展或者想拿香港身份的朋友都想抓住这个机会赶紧申请。 只是&#xff0c;香港户口办理是有条件的&#xff0c;而且有学历要求&…

方法分享 |公网IP怎么指定非433端口实现https访问

公网IP可以通过指定非443端口实现HTTPS访问。在网络配置中&#xff0c;虽然HTTPS协议默认使用443端口&#xff0c;但没有规定不能在其他端口上实施HTTPS服务。使用非标准端口进行HTTPS通信需要正确配置服务器和SSL证书&#xff0c;并确保客户端能够连接到指定的端口。下面说明如…

tracetcp下载 安装 使用 网络工具 windows trace工具 tcp协议

省流 Tracetcp是一个类似于Tracert的工具&#xff0c;使用如下&#xff1a; 1. 安装winpcap &#xff0c; 下载链接&#xff1a;WinPcap Download 2.下载tracetcp软件&#xff0c;下载链接&#xff1a; https://github.com/0xcafed00d/tracetcp/releases 命令&#xff1a;…

工业交换机的供电功率配置

在工业领域中&#xff0c;交换机作为网络设备中的重要组成部分&#xff0c;其供电功率配置必不可少。工业交换机的供电功率配置不仅关系到设备的稳定运行&#xff0c;还直接影响到整个工业生产系统的效率和安全性。因此&#xff0c;在选择工业交换机时&#xff0c;必须对供电功…

WPF视频学习-简单应用篇图书馆程序(一)

1.登录界面和主界面跳转 先把登录界面分为三行《Grid》 先添加两行&#xff1a; <Grid><!--//分三行&#xff0c;行排列--><Grid.RowDefinitions><RowDefinition Height"auto"/><RowDefinition Height"auto"/><RowDef…

GD32 MCU超频后无法再次下载程序的解决办法

我们知道&#xff0c;MCU的系统时钟主频就相当于人的心跳或脉搏&#xff0c;为所有的工作单元提供时间基数&#xff0c;所以一般在程序最开始的地方都需要进行主频配置。 GD32固件库中提供了多种宏定义&#xff0c;可以很方便的将系统时钟配置为想要的频率。 GD32固件库中所用…

[C#]winform使用onnxruntime部署LYT-Net轻量级低光图像增强算法

【训练源码】 https://github.com/albrateanu/LYT-Net 【参考源码】 https://github.com/hpc203/Low-Light-Image-Enhancement-onnxrun 【算法介绍】 一、研究动机 1.研究目标 研究的目标是提出一种轻量级的基于YUV Transformer 的网络&#xff08;LYT-Net&#xff09;&…

NVIDIA DeepStream SDK 说明及链接

NVIDIA DeepStream SDK DeepStream 的多平台支持为您提供了一种更快、更简单的方式来开发视觉AI应用程序和服务。您甚至可以在本地、边缘和云中部署它们&#xff0c;只需单击一个按钮。 开始 在Launchpad上试用 什么是 NVIDIA DeepStream&#xff1f; NVIDIA 的 DeepStream …

没有登录微信就不会截图了?这个方法你一定要学会

前言 前段时间小白在指导小伙伴的时候&#xff0c;发现他在电脑没有登录微信的时候就不会截图了。 这个可就难倒他了…… 所以他登录了个微信&#xff0c;然后截了张图&#xff0c;接着把微信退出了。这人可真是谨慎啊&#xff5e; 所以&#xff0c;小伙伴在使用电脑的时候…

linux shell查看24h内修改的文件

执行命令&#xff1a; find /path -type f -mtime 0

【JMeter接口测试工具】第二节.JMeter项目实战(下)【实战篇】

文章目录 前言一、接口弱压力测试二、高并发、高频率三、生成图形化报告总结 前言 一、接口弱压力测试 场景举例&#xff1a; 场景1:模拟半小时之内 1000 个用户访问服务器资源&#xff0c;要求平均响应时间在3000ms内&#xff0c;且错误率为0 实现步骤&#xff1a; 步骤一&am…

创新共享经济:探索Web3对新商业模式的启迪

随着Web3时代的到来&#xff0c;我们正在见证着一场数字经济的革命。在这个革命中&#xff0c;区块链技术作为一种基础设施&#xff0c;正为创新的共享经济模式提供新的契机。本文将深入探讨Web3对新商业模式的启迪&#xff0c;以及如何借助区块链技术构建更加开放、公平、高效…

go context 源码刨析(一)

Context 上下文context.Context 是用来设置截止时间、同步信号&#xff0c;传递请求相关值的结构体。 context.Context 定义了四个需要实现的方法&#xff1a; Deadline: 返回 context.Context 被取消的时间。Done: 返回一个 Channel&#xff0c;这个 Channel 会在当前工作完…

从零开始手把手Vue3+TypeScript+ElementPlus管理后台项目实战九(整体布局02)

使用el-menu和el-sub-menu及el-menu-item导航 src/layout目录下新增components目录&#xff0c;components目录下新增PageSidebar.vue 代码基本思想为&#xff1a;读取router中定义的routes数组&#xff0c;渲染绑定到el-menu。 el-menu和el-sub-menu及el-menu-item的区别&…

RNA-seq上下游分析snakemake流程

学习完snakemake后写的第一个流程是RNA-seq上游定量和下游的质控和差异分析。 使用fastp处理fastq文件&#xff0c;在使用START比对到基因组同时得到raw count&#xff0c;使用非冗余外显子长度作为基因的长度计算FPKM、TPM&#xff0c;同时也生成了CPM的结果。 非冗余外显子…

【单片机毕业设计选题24003】-基于STM32和阿里云的家庭安全监测系统

系统功能: 此设计采用STM32单片机采集环境温湿度,烟雾浓度和一氧化碳浓度显示在OLED上&#xff0c;并将这些信息上报至阿里云平台。 1. 上电连接手机热点后自动连接阿里云&#xff0c;可通过阿里云平台收到系统上报的温湿度&#xff0c;烟雾 浓度&#xff0c;一氧化碳数据以…

BGW总结

Java基础 Java概述 面向对象和面向过程的区别 面向过程性能比面向对象高&#xff0c;因为类调用时需要实例化&#xff0c;开销比较大 面向对象有封装、继承、多态性的特性&#xff0c;可以设计出低耦合的系统&#xff0c;使系统更加灵活、更加易于维护 三大特性 ①封装&a…