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

el-checkbox-group限制勾选数量

 

<!--* @Description: 视频监控 页面* @Author: mhf* @Date: 2023-08-15 13:26:33
-->
<template><div class="videoSurveillance"><el-row :gutter="24"><el-col :span="4"><div class="videoSurveillance-left"><div class="videoSurveillance-left-header">视频监控</div><div class="videoSurveillance-left-check"><el-checkbox-groupv-model="checkedArr"@change="handleCheckedChange"><el-checkboxv-for="(item, index) in sourceArr":label="item.name":key="index"><el-tooltipoverflowclass="item"effect="dark":content="item.name"placement="right"><div class="check-name">{{ item.name }}</div></el-tooltip></el-checkbox></el-checkbox-group></div></div></el-col><el-col :span="20"><div class="videoSurveillance-right"><div class="sourceBox"></div></div></el-col></el-row></div>
</template><script>
export default {name: "videoSurveillance",components: {},props: {},data() {return {sourceArr: [{name: "视频监控1",source: "",},{name: "视频监控2",source: "",},{name: "视频监控3",source: "",},{name: "视频监控4",source: "",},{name: "视频监控5",source: "",},{name: "视频监控6",source: "",},{name: "视频监控7",source: "",},{name: "视频监控8",source: "",},{name: "视频监控9",source: "",},{name: "视频监控10",source: "",},],checkedArr: [],maxChecked: 7,};},methods: {handleCheckedChange(e) {if (e.length > this.maxChecked) {this.$message.warning(`最多只能选择${this.maxChecked - 1}个视频监控`);this.checkedArr = e.slice(e.length - this.maxChecked);}if (e.length === this.maxChecked && this.checkedArr.length === this.maxChecked) {this.$nextTick(() => {this.checkedArr = e.filter(item => item !== this.checkedArr[0]);});}},},created() {},mounted() {},
};
</script><style lang="scss" scoped>
.videoSurveillance {background-color: #e9e9eb;width: 100%;&-left,&-right {height: calc(100vh - 132px - 2 * 20px) !important;background: #ffffff;border-radius: 4px;}&-left {box-shadow: 0 4px 10px 0 #dddddd;&-header {height: 30px;background: #1492ff;border-radius: 4px 4px 0 0;font-size: 14px;font-family: MicrosoftYaHei-Bold, MicrosoftYaHei;font-weight: bold;color: #ffffff;line-height: 30px;letter-spacing: 1px;text-align: center;}&-check {height: calc(100% - 30px);padding: 10px 24px 20px;/*overflow-y: auto;*/.check-name {width: 190px;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;}}}&-right {.sourceBox {}}
}::v-deep .el-checkbox-group {display: flex;flex-direction: column;
}::v-deep .el-checkbox {margin-top: 8px;display: flex;
}
</style>

相关文章:

el-checkbox-group限制勾选数量

<!--* Description: 视频监控 页面* Author: mhf* Date: 2023-08-15 13:26:33 --> <template><div class"videoSurveillance"><el-row :gutter"24"><el-col :span"4"><div class"videoSurveillance-left&…...

【JavaScript】WebAPI入门到实战

文章目录 一、WebAPI背景知识1. 什么是WebAPI&#xff1f;2. 什么是API&#xff1f; 二、DOM基本概念三、获取元素三、事件初识1. 点击事件2. 键盘事件 四、操作元素1. 获取/修改元素内容2. 获取/修改元素属性3. 获取/修改表单元素属性4. 获取/修改样式属性 五、操作节点1. 新增…...

奥康的高尔夫鞋,圈不住投资者的心

文 | 螳螂观察 作者 | 青月 鞋服行业终于熬过了“寒冬”&#xff0c;2023年行业景气度开始逐步回暖。 东方财富Choice数据显示&#xff0c;截至8月17日&#xff0c;已有28家鞋帽服装类上市公司发布了2023年中期业绩预告或快报&#xff0c;其中&#xff0c;9家预增&#xff0…...

vue2配置环境变量并且nginx运行成功

需求&#xff1a;我在vue项目配置了生产环境和开发环境&#xff0c;之后通过proxy代理的方式把地址转发到真实的服务器地址上用于请求接口&#xff0c;之后把项目打包后上传到nginx上&#xff0c;之后接口报错404&#xff0c;但是本地运行是可以访问的&#xff0c;找了很久终于…...

Java+Swing形成GUI图像界面

一、Swing 简介 Swing 主要用来开发 GUI 程序,GUI(Graphical User Interface)即图形用户界面。Java 中针对 GUI 设计提供了丰富的类库,这些类分别位于 java.awt 和 java.swing 中,简称 AWT 和 Swing ;其中,AWT(Abstract Window Toolkit)是抽象窗口工具包,是 Java 平…...

编辑距离 -- 动规

72. 编辑距离 给出动规的两种常见实现形式&#xff1a;自顶向下、自底向上&#xff0c;前者一般借助递归函数备忘录实现&#xff0c;后者通常基于dp数组实现。 class MinDistance:"""72. 编辑距离https://leetcode.cn/problems/edit-distance/""&quo…...

douyin【商品抢购js脚本】

文章目录 前言订阅须知知识点源码前言 脚本主要用来实现抢购douyin商城、直播间秒杀商品等一系列商品 订阅须知 订阅后,只提供js源代码,不提供教学,请根据源码自行抓包知识点 1、在查询串插入一个固定的键rstr   2、对查询串进行按键排序并取值,对空格和+进行转义为a …...

常见Web安全技术总结!474页Web安全从入门到精通(附PDF)

Web安全范围比较大&#xff0c;知识点比较杂&#xff0c;很多朋友都无从下手&#xff0c;这不可怕&#xff0c;可怕的是乱下手&#xff0c;其实往往基础才是决定你是否能走远的关键。 为了帮助大家入门网安&#xff0c;给大家推荐一份《新手Web安全入门到精通》&#xff0c;共…...

Prometheus 监控指南:如何可靠地记录数字时间序列数据

&#x1f337;&#x1f341; 博主猫头虎&#xff08;&#x1f405;&#x1f43e;&#xff09;带您 Go to New World✨&#x1f341; &#x1f405;&#x1f43e;猫头虎建议程序员必备技术栈一览表&#x1f4d6;&#xff1a; &#x1f6e0;️ 全栈技术 Full Stack: &#x1f4da…...

rsync远程同步+inotify监控

目录 一、Rsync 简介 1、rsync是什么 2、备份的方式 3、rsync同步方式 4、常用rsync命令 5、配置源的两种表达方法 二、rsync实验 1、本地复制 ​编辑​编辑 2、异地复制 2.1 rsync服务器配置 2.2 rsync客户端配置 2.2.1 普通同步 2.2.2 免密同步 2.2.3 --delet…...

【面试经典150 | 数组】移除元素

文章目录 写在前面Tag题目来源题目解读解题思路方法一&#xff1a;原地操作 写在最后 写在前面 本专栏专注于分析与讲解【面试经典150】算法&#xff0c;两到三天更新一篇文章&#xff0c;欢迎催更…… 专栏内容以分析题目为主&#xff0c;并附带一些对于本题涉及到的数据结构等…...

玩转Mysql系列 - 第21篇:什么是索引?

这是Mysql系列第21篇。 本文开始连续3篇详解mysql索引&#xff1a; 第1篇来说说什么是索引&#xff1f; 第2篇详解Mysql中索引的原理 第3篇结合索引详解关键字explain 本文为索引第一篇&#xff1a;我们来了解一下什么是索引&#xff1f; 路人在搞计算机之前&#xff0c;…...

预处理指令

// The include directive instructs the preprocessor to paste the text of the given file into the current file. // 粘贴指定文件的内容 #include // 定义宏PI #define PI 3.1415926 // 取消定义PI #undef PI条件编译(Conditional Compilation) // 检查xxx是否已被定义为…...

强大的JTAG边界扫描(1):基本原理介绍

文章目录 1. 什么是边界扫描&#xff1f;2. JTAG硬件接口3. 边界扫描相关的软硬件4. 学习资料5. 总结 我是怎么了解到边界扫描的呢&#xff1f; 这就要从我淘到一块FPGA板卡的事情说起了。 前段时间我在某二手平台上淘了一块FPGA板子&#xff0c;它长这样&#xff1a; 板子的…...

【C++】源文件.cpp和头文件.h分离编程

优势介绍 将C代码分为头文件&#xff08;.h&#xff09;和源文件&#xff08;.cpp&#xff09;的做法有以下几个好处&#xff1a; 模块化和代码组织&#xff1a;将函数和类的声明&#xff08;包括函数原型、类的成员和属性等&#xff09;放在头文件中&#xff0c;将函数和类的…...

报错ssh: Could not resolve hostname

…按照网上好多教程试了一下&#xff1a; 新建密钥&#xff0c;添加到gitee&#xff0c;重新测试。修改host&#xff0c;加入gitee的ip地址到里面去。修改.gifconfig配置文件&#xff0c;配置成ssh的仓库链接。 这上面的方法都不行&#xff0c;后面发现一篇文章&#xff1a;SS…...

从零开始学网站建设:从需求分析到上线发布

从零开始学网站建设&#xff1a;从需求分析到上线发布 一、需求分析 在进行网站建设之前&#xff0c;首先需要与客户进行沟通&#xff0c;了解客户的需求和要求&#xff0c;并进行深入的分析和研究。根据不同的需求&#xff0c;需要确定网站的类型、功能、布局、风格等方面的…...

软件系统验收测试需要注意的地方

验收测试 一、软件验收测试含义&#xff1a; 软件验收测试是指测试人员检验软件是否符合软件规格说明书和用户需求的测试活动。 验收测试是软件测试的最后一个环节&#xff0c;也是最为关键的一个要素。 它关系到软件开发公司的产品质量&#xff0c;也关系到需求方的产品能…...

解决three.js中加载纹理贴图时,初次渲染不显示的问题

效果&#xff1a; 解决方法&#xff1a;主要是将一些构建网格对象的操作放在了textureLoader.load()方法中&#xff0c;加载图片也用了require init() {// 1, 创建场景对象this.scene new this.$three.Scene();// 2, 创建立方缓冲几何体this.geometry new this.$three.BoxGe…...

Git学习记录

Contest 一、工作区域二、操作命令2.1 创建仓库2.2 查看仓库状态2.3 从工作区向暂存区添加文件2.3.1 只添加一个文件2.3.2 添加全部文件 2.4 从暂存区向仓库区添加文件2.5 查询日志2.5.1 从当前版本开始查询2.5.2 查看所有日志 2.6 回滚2.6.1 从仓库回滚到工作区2.6.2 取消工作…...

内存分配函数malloc kmalloc vmalloc

内存分配函数malloc kmalloc vmalloc malloc实现步骤: 1)请求大小调整:首先,malloc 需要调整用户请求的大小,以适应内部数据结构(例如,可能需要存储额外的元数据)。通常,这包括对齐调整,确保分配的内存地址满足特定硬件要求(如对齐到8字节或16字节边界)。 2)空闲…...

通过Wrangler CLI在worker中创建数据库和表

官方使用文档&#xff1a;Getting started Cloudflare D1 docs 创建数据库 在命令行中执行完成之后&#xff0c;会在本地和远程创建数据库&#xff1a; npx wranglerlatest d1 create prod-d1-tutorial 在cf中就可以看到数据库&#xff1a; 现在&#xff0c;您的Cloudfla…...

React19源码系列之 事件插件系统

事件类别 事件类型 定义 文档 Event Event 接口表示在 EventTarget 上出现的事件。 Event - Web API | MDN UIEvent UIEvent 接口表示简单的用户界面事件。 UIEvent - Web API | MDN KeyboardEvent KeyboardEvent 对象描述了用户与键盘的交互。 KeyboardEvent - Web…...

Springcloud:Eureka 高可用集群搭建实战(服务注册与发现的底层原理与避坑指南)

引言&#xff1a;为什么 Eureka 依然是存量系统的核心&#xff1f; 尽管 Nacos 等新注册中心崛起&#xff0c;但金融、电力等保守行业仍有大量系统运行在 Eureka 上。理解其高可用设计与自我保护机制&#xff0c;是保障分布式系统稳定的必修课。本文将手把手带你搭建生产级 Eur…...

Robots.txt 文件

什么是robots.txt&#xff1f; robots.txt 是一个位于网站根目录下的文本文件&#xff08;如&#xff1a;https://example.com/robots.txt&#xff09;&#xff0c;它用于指导网络爬虫&#xff08;如搜索引擎的蜘蛛程序&#xff09;如何抓取该网站的内容。这个文件遵循 Robots…...

CMake 从 GitHub 下载第三方库并使用

有时我们希望直接使用 GitHub 上的开源库,而不想手动下载、编译和安装。 可以利用 CMake 提供的 FetchContent 模块来实现自动下载、构建和链接第三方库。 FetchContent 命令官方文档✅ 示例代码 我们将以 fmt 这个流行的格式化库为例,演示如何: 使用 FetchContent 从 GitH…...

成都鼎讯硬核科技!雷达目标与干扰模拟器,以卓越性能制胜电磁频谱战

在现代战争中&#xff0c;电磁频谱已成为继陆、海、空、天之后的 “第五维战场”&#xff0c;雷达作为电磁频谱领域的关键装备&#xff0c;其干扰与抗干扰能力的较量&#xff0c;直接影响着战争的胜负走向。由成都鼎讯科技匠心打造的雷达目标与干扰模拟器&#xff0c;凭借数字射…...

uniapp中使用aixos 报错

问题&#xff1a; 在uniapp中使用aixos&#xff0c;运行后报如下错误&#xff1a; AxiosError: There is no suitable adapter to dispatch the request since : - adapter xhr is not supported by the environment - adapter http is not available in the build 解决方案&…...

华为云Flexus+DeepSeek征文|DeepSeek-V3/R1 商用服务开通全流程与本地部署搭建

华为云FlexusDeepSeek征文&#xff5c;DeepSeek-V3/R1 商用服务开通全流程与本地部署搭建 前言 如今大模型其性能出色&#xff0c;华为云 ModelArts Studio_MaaS大模型即服务平台华为云内置了大模型&#xff0c;能助力我们轻松驾驭 DeepSeek-V3/R1&#xff0c;本文中将分享如何…...

Spring数据访问模块设计

前面我们已经完成了IoC和web模块的设计&#xff0c;聪明的码友立马就知道了&#xff0c;该到数据访问模块了&#xff0c;要不就这俩玩个6啊&#xff0c;查库势在必行&#xff0c;至此&#xff0c;它来了。 一、核心设计理念 1、痛点在哪 应用离不开数据&#xff08;数据库、No…...