【Element Ui】el-checkbox 的 indeterminate 与 v-model 表示 “全选”、“待选”、“不选” 状态

ops/2024/11/22 13:34:28/
官网链接:

https://element-plus.org/zh-CN/component/checkbox.html

indeterminate 与 v-model
  • indeterminate 属性用以表示 checkbox 的不确定状态,一般用于实现全选的效果。
  • v-model 是绑定值
  • indeterminate 与 v-model 对应不同值的组合可以改变 checkbox 的状态

el-checkbox 的状态

示例:官方代码
javascript default_cursor_land"><template><el-checkboxv-model="checkAll":indeterminate="isIndeterminate"@change="handleCheckAllChange">Check all</el-checkbox><el-checkbox-groupv-model="checkedCities"@change="handleCheckedCitiesChange"><el-checkbox v-for="city in cities" :key="city" :label="city" :value="city">{{ city }}</el-checkbox></el-checkbox-group>
</template><script lang="ts" setup>
import { ref } from 'vue'const checkAll = ref(false)
const isIndeterminate = ref(true)
const checkedCities = ref(['Shanghai', 'Beijing'])
const cities = ['Shanghai', 'Beijing', 'Guangzhou', 'Shenzhen']const handleCheckAllChange = (val: boolean) => {checkedCities.value = val ? cities : []isIndeterminate.value = false
}
const handleCheckedCitiesChange = (value: string[]) => {const checkedCount = value.lengthcheckAll.value = checkedCount === cities.lengthisIndeterminate.value = checkedCount > 0 && checkedCount < cities.length
}
</script>


http://www.ppmy.cn/ops/135795.html

相关文章

从0开始学习Linux——MySQL安装多种方式详解

期目录&#xff1a; 从0开始学习Linux——简介&安装 从0开始学习Linux——搭建属于自己的Linux虚拟机 从0开始学习Linux——文本编辑器 从0开始学习Linux——Yum工具 从0开始学习Linux——远程连接工具 从0开始学习Linux——文件目录 从0开始学习Linux——网络配置 从0开始…

如何编译 Cesium 源码

如何编译 Cesium 源码 Cesium 是一个开源的 JavaScript 库&#xff0c;用于构建 3D 地球和地图应用程序。它提供了一套强大的 API 和工具&#xff0c;使开发者能够创建丰富的地理空间应用。本文将指导您如何从 GitHub 下载 Cesium 源码&#xff0c;并在本地进行编译。 TilesB…

【第七课】Rust所有权系统(三)

目录 前言 生命周期 生命周期的规则 总结 前言 上一节课讲述了所有权系统中的引用与借用&#xff0c;引用可以让我们对一块内存上的数据有读权限或者读写权限&#xff0c;但是不会有该内存的释放权限&#xff0c;因为释放权限只会属于所有者&#xff0c;这是所有权原则中的…

如何查找 Kafka消息队列中主题Topic的消费者?

这是一篇关于如何查找特定 Kafka 主题&#xff08;如 filter_id&#xff09;消费者的教程&#xff0c;涵盖了使用 Kafka 命令行工具 kafka-consumer-groups.sh 的详细步骤。 如何查找 Kafka 主题的消费者&#xff1f; Kafka 中&#xff0c;消费者组和主题之间的关系是关键的。…

iPhone 17 Air看点汇总:薄至6mm 刷新苹果轻薄纪录

我们姑且将这款iPhone 17序列的超薄SKU称为“iPhone 17 Air”&#xff0c;Jeff Pu在报告中提到&#xff0c;我同意最近关于 iPhone 17超薄机型采用6 毫米厚度超薄设计的传言。 如果这一测量结果被证明是准确的&#xff0c;那么将有几个值得注意的方面。 首先&#xff0c;iPhone…

css水平居中+垂直居中

display:“flex”,position: “absolute”,top:“50%”,left:“50%”,transform: ‘translate(-50%, -50%)’

Notepad++--在开头快速添加行号

原文网址&#xff1a;Notepad--在开头快速添加行号_IT利刃出鞘的博客-CSDN博客 简介 本文介绍Notepad怎样在开头快速添加行号。 需求 原文件 想要的效果 方法 1.添加点号 Alt鼠标左键&#xff0c;从首行选中首列下拉&#xff0c;选中需要添加序号的所有行的首列&#xff…

安全、便捷、效率高,明达边缘计算网关助力制药装备企业远程调机

随着药厂对设备运维需求的增长&#xff0c;制药装备企业需要在提高运维效率的同时&#xff0c;降低人工及差旅成本。制药装备因其数据具有高度的保密性&#xff0c;要求运维工程师提供安全可靠的远程调试方式。本案例介绍了明达技术MBox20系列5口WIFI通用网关在制药装备上的应用…