当前位置: 首页 > news >正文

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-checkboxv-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-checkboxv-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.lengthcheckState.checkAll = val.length === checkList.length}
)
</script>
<template><div class="p-8 bg-indigo-50 text-center"><a-checkboxv-model:checked="checkState.checkAll":indeterminate="checkState.indeterminate"@change="onCheckAllChange">全选</a-checkbox><a-divider/><a-checkbox-groupv-model:value="checkState.checkedList":options="checkList"/></div>
</template>

在这里插入图片描述

相关文章:

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

何时使用 在一组可选项中进行多项选择时&#xff1b; 单独使用可以表示两种状态之间的切换&#xff0c;和 switch 类似。区别在于切换 switch 会直接触发状态改变&#xff0c;而 checkbox 一般用于状态标记&#xff0c;需要和提交操作配合。 案例&#xff1a;多选框组件 核心…...

flutter 导出iOS问题3

更新flutter版本后 macminihaomacMiniaodeMini SocialIM % flutter --version Flutter 3.7.12 • channel stable • https://github.com/flutter/flutter.git Framework • revision 4d9e56e694 (1 year, 2 months ago) • 2023-04-17 21:47:46 -0400 Engine • revision 1a6…...

用winform开发一个笔记本电脑是否在充电的小工具

笔记本充电状态有两种监测方式&#xff0c;一种是主动查询&#xff0c;另一种是注册充电状态变化事件 1&#xff0c;先说主动监控吧&#xff0c;建立一个线程&#xff0c;反复查询SystemInformation.PowerStatus.PowerLineStatus private void readPower(){while (true){this.…...

构建汛期智慧水利新生态:EasyCVR视频汇聚监控综合管理方案解析

一、项目背景与目标 随着我国水利事业的不断发展&#xff0c;水利设施的管理与维护工作愈发重要。随着夏季汛期的到来&#xff0c;水利管理工作面临着巨大的挑战。为确保水利设施的安全运行&#xff0c;及时应对可能出现的汛情&#xff0c;建设一套高效、智能的视频监控可视化…...

linux中HADOOP_HOME和JAVA_HOME删除后依然指向旧目录

在Linux系统中,当你删除了HADOOP_HOME和JAVA_HOME环境变量后,它们依然指向旧目录,可能是因为这些变量在其他地方被设置了。以下是一些常见的原因和解决方法: 系统级配置文件: 检查系统级的环境变量配置文件,如/etc/profile、/etc/bashrc、/etc/environment,以及/etc/pro…...

C++中的结构体——结构体案例1_2

案例描述 学校正在做毕设项目&#xff0c;每位老师指导5名学生&#xff0c;总共有3名老师&#xff0c;需求如下 设计学生和老师的结构体&#xff0c;其中在老师的结构体中&#xff0c;有老师的姓名和一个存放5名学生的数组作为成员 学生的成员有姓名、考试分数&#xff0c;创…...

python接入汇率换算工具提高网站/小程序日活度

实时汇率换算工具可以帮助用户快速准确地计算不同货币之间最新的汇兑比例。无论是金融从业者或者是人们日常生活出行都会使用到&#xff0c;广泛用于国际结算、银行汇率查询应用、开展跨国贸易、投资等参考场景。 我们可以通过在网站或者小程序中接入这样一个小工具&#xff0…...

Ubuntu 网络重置

在 Ubuntu 中&#xff0c;如果遇到可以联网但是无法打开许多网页的问题&#xff0c;这可能是 DNS 设置不正确或者网络配置有误引起的。重置网络配置到默认设置可以帮助解决这类问题。以下是几种方法来重置 Ubuntu 的网络配置&#xff1a; ### 1. 重启网络服务 有时候简单地重启…...

防护DDoS攻击出现的常见误区

很多运维人员会通过自己的一些方式来缓解DDoS攻击&#xff0c;但效果却并不明显&#xff0c;今天蔡蔡就来说说防护DDoS攻击最容易出现哪些误区&#xff1f; 误区一&#xff1a;通过CDN防御DDoS攻击 经常有人认为高防IP这么贵&#xff0c;为什么不用几百块的CDN来预防DDoS&…...

入门 Axure RP 9 | 原型设计基础教程

选择正确的原型设计工具并非易事&#xff0c;Axure RP 9能够快速完成原型设计。原型设计是一种经过时间考验的方法&#xff0c;可以将你的设计快速放置在用户的设备并交到他们手中。替代Axure RP 9的原型设计工具即时设计是一个完全集成的协同设计工具&#xff0c;无需使用不同…...

一线大厂都在高薪抢AI产品经理?

哈喽&#xff0c;大家下午好呀&#xff5e; 当AI的风吹到产品届&#xff0c;唯叹相见恨晚&#xff01; 作为一名产品经理&#xff0c;日常写调研、需求分析、产品设计、项目管理、数据分析……每一项工作都需要投入大量的时间和精力。 但用上AI后&#xff0c;你会发现写个需…...

html实现粘贴excel数据,在页面表格中复制

录入数据时&#xff0c;有时候需要把excel中的数据一条条粘贴到页面中&#xff0c;当数据量过多时&#xff0c;这种操作很令人崩溃。本篇文章实现了从excel复制好多行数据后,可在页面粘贴的功能 具体实现代码 <!DOCTYPE html> <html lang"en"> <head…...

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

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

Java+前端+Vue 后端Spring boot 开发的全套UWB定位方案,0.1米高精度定位系统源码

Java前端Vue 后端Spring boot 开发的全套UWB定位方案,0.1米高精度定位系统源码 UWB定位系统由硬件定位设备、定位引擎和应用软件组成。该定位系统应用软件支持PC端和移动端访问&#xff0c;并提供位置实时显示、历史轨迹回放、人员考勤、电子围栏、行为分析、智能巡检等功能…...

Mysql查询分析工具Explain的使用

一、前言 作为一名合格的开发人员&#xff0c;与数据库打交道是必不可少的&#xff0c;尤其是在业务规模和数据体量大规模增长的条件下&#xff0c;应用系统大部分请求读写比例在10:1左右&#xff0c;而且插入操作和一般的更新操作很少出现性能问题&#xff0c;遇到最多的&…...

OpenCV中的圆形标靶检测——findCirclesGrid()(一)

如前所述,OpenCV中可以使用findCirclesGrid()实现圆形标靶的检测,该函数的计算流程分为1)斑点形状的检测,和2)基于规则的斑点形状的过滤与定位。第一步将类似圆斑形状的区域检测出来,但可能存在一些误检测的噪声,第二步则利用圆斑的分布规则(M*N排列)进行进一步的过滤…...

2025广州眼博会,2025广东省眼睛健康及眼科产业展览会

广州全国眼睛健康产业博览会暨眼科医学大会&#xff0c;将于2025年4月在广州南丰国际会展中心盛大举办&#xff1b; 广州2025全国眼睛健康产业博览会暨眼科医学大会&#xff08;全国眼博会&#xff09; National Eye Health Industry Expo and Ophthalmic Medicine Conference…...

Vue3 自定义渲染器 API createRenderer()(七)

createRenderer() createRenderer() 是一个高级 API&#xff0c;它允许你创建自定义的渲染器。这个 API 主要是为了支持 Vue 的非 DOM 渲染目标&#xff0c;如 WebGL、Canvas、Web Workers、自定义 DOM 实现等。在实际使用中&#xff0c;自定义渲染器是一个复杂的任务&#xf…...

二分+ST表+递推,Cf 1237D - Balanced Playlist

一、题目 1、题目描述 2、输入输出 2.1输入 2.2输出 3、原题链接 Problem - 1237D - Codeforces 二、解题报告 1、思路分析 case3提示我们一件事情&#xff1a;如果存在某个位置永远不停止&#xff0c;那么所有位置都满足永远不停止 很容易证明 随着下标右移&#xff0c…...

被裁员不可怕,可怕的是你只会写代码!

“听说隔壁部门又要裁员了&#xff0c;人心惶惶的……” “是啊&#xff0c;这年头&#xff0c;工作真是越来越难了&#xff0c;谁知道下一个会不会是自己呢&#xff1f;” 这两天&#xff0c;公司里弥漫着一股紧张的气氛&#xff0c;裁员的消息&#xff0c;就像是一场突如其来…...

19c补丁后oracle属主变化,导致不能识别磁盘组

补丁后服务器重启&#xff0c;数据库再次无法启动 ORA01017: invalid username/password; logon denied Oracle 19c 在打上 19.23 或以上补丁版本后&#xff0c;存在与用户组权限相关的问题。具体表现为&#xff0c;Oracle 实例的运行用户&#xff08;oracle&#xff09;和集…...

【kafka】Golang实现分布式Masscan任务调度系统

要求&#xff1a; 输出两个程序&#xff0c;一个命令行程序&#xff08;命令行参数用flag&#xff09;和一个服务端程序。 命令行程序支持通过命令行参数配置下发IP或IP段、端口、扫描带宽&#xff0c;然后将消息推送到kafka里面。 服务端程序&#xff1a; 从kafka消费者接收…...

springboot 百货中心供应链管理系统小程序

一、前言 随着我国经济迅速发展&#xff0c;人们对手机的需求越来越大&#xff0c;各种手机软件也都在被广泛应用&#xff0c;但是对于手机进行数据信息管理&#xff0c;对于手机的各种软件也是备受用户的喜爱&#xff0c;百货中心供应链管理系统被用户普遍使用&#xff0c;为方…...

ssc377d修改flash分区大小

1、flash的分区默认分配16M、 / # df -h Filesystem Size Used Available Use% Mounted on /dev/root 1.9M 1.9M 0 100% / /dev/mtdblock4 3.0M...

【SpringBoot】100、SpringBoot中使用自定义注解+AOP实现参数自动解密

在实际项目中,用户注册、登录、修改密码等操作,都涉及到参数传输安全问题。所以我们需要在前端对账户、密码等敏感信息加密传输,在后端接收到数据后能自动解密。 1、引入依赖 <dependency><groupId>org.springframework.boot</groupId><artifactId...

论文解读:交大港大上海AI Lab开源论文 | 宇树机器人多姿态起立控制强化学习框架(一)

宇树机器人多姿态起立控制强化学习框架论文解析 论文解读&#xff1a;交大&港大&上海AI Lab开源论文 | 宇树机器人多姿态起立控制强化学习框架&#xff08;一&#xff09; 论文解读&#xff1a;交大&港大&上海AI Lab开源论文 | 宇树机器人多姿态起立控制强化…...

css3笔记 (1) 自用

outline: none 用于移除元素获得焦点时默认的轮廓线 broder:0 用于移除边框 font-size&#xff1a;0 用于设置字体不显示 list-style: none 消除<li> 标签默认样式 margin: xx auto 版心居中 width:100% 通栏 vertical-align 作用于行内元素 / 表格单元格&#xff…...

GC1808高性能24位立体声音频ADC芯片解析

1. 芯片概述 GC1808是一款24位立体声音频模数转换器&#xff08;ADC&#xff09;&#xff0c;支持8kHz~96kHz采样率&#xff0c;集成Δ-Σ调制器、数字抗混叠滤波器和高通滤波器&#xff0c;适用于高保真音频采集场景。 2. 核心特性 高精度&#xff1a;24位分辨率&#xff0c…...

Spring Cloud Gateway 中自定义验证码接口返回 404 的排查与解决

Spring Cloud Gateway 中自定义验证码接口返回 404 的排查与解决 问题背景 在一个基于 Spring Cloud Gateway WebFlux 构建的微服务项目中&#xff0c;新增了一个本地验证码接口 /code&#xff0c;使用函数式路由&#xff08;RouterFunction&#xff09;和 Hutool 的 Circle…...

rnn判断string中第一次出现a的下标

# coding:utf8 import torch import torch.nn as nn import numpy as np import random import json""" 基于pytorch的网络编写 实现一个RNN网络完成多分类任务 判断字符 a 第一次出现在字符串中的位置 """class TorchModel(nn.Module):def __in…...