113 链接集11--ctrl+左键单击多选

1.ctrl+左键单击多选,单击单选

精简代码

  <div class="model-list"><div@mousedown.prevent="handleClick(item, $event)"class="model-list-item"v-for="item in modelList":key="item.id":class="{ 'model-active': item.active }">{{ item.name }}</div></div>//scriptpublic modelList = [{id: 0,name: '马栏山方案-HR-0001',active: false,},{id: 1,name: '马栏山方案-HR-0002',active: false,},{id: 2,name: '马栏山方案-HR-0003',active: false,},];//单选 状态切换modelSelect(info: any) {this.modelList.forEach(item => {if (item.id === info.id) {item.active = !item.active;} else {item.active = false;}});}//多选状态为truemultiSelect(info: any) {this.modelList.forEach(item => {if (item.id === info.id) {item.active = !item.active;}});}//判断是否多选操作handleClick(item: any, event: any) {// 检查是否按下了Ctrl键并是左键点击if (event.ctrlKey && event.button === 0) {this.multiSelect(item);} else {this.modelSelect(item);}}
<template><!-- 数据编辑--合并 --><CsDialog:width="580"@close="visibleDialog = false"@reduce="visibleDialog = false"@expend="visibleDialog = false"title="合并":visible="visibleDialog"><div class="row-item common-wrapper">提示:选择一个模型继承其属性</div><div class="model-list"><div@mousedown.prevent="handleClick(item, $event)"class="model-list-item"v-for="item in modelList":key="item.id":class="{ 'model-active': item.active }">{{ item.name }}</div></div><template slot="footer"><div class="end__operation"><CsButton @click="visibleDialog = false">确定</CsButton><CsButton @click="visibleDialog = false">取消</CsButton></div></template></CsDialog>
</template><script lang="ts">
import { Component, Vue, Prop } from 'vue-property-decorator';@Component({components: {},
})
export default class CombineDialog extends Vue {@Prop() visible!: any;get visibleDialog() {return this.visible;}set visibleDialog(val: any) {this.$emit('update:visible', val);}mounted() {}public modelList = [{id: 0,name: '马栏山方案-HR-0001',active: false,},{id: 1,name: '马栏山方案-HR-0002',active: false,},{id: 2,name: '马栏山方案-HR-0003',active: false,},{id: 3,name: '马栏山方案-HR-0004',active: false,},{id: 4,name: '马栏山方案-HR-0005',active: false,},{id: 5,name: '马栏山方案-HR-0006',active: false,},{id: 6,name: '马栏山方案-HR-0006',active: false,},{id: 7,name: '马栏山方案-HR-0006',active: false,},{id: 8,name: '马栏山方案-HR-0006',active: false,},];modelSelect(info: any) {this.modelList.forEach(item => {if (item.id === info.id) {item.active = !item.active;} else {item.active = false;}});}multiSelect(info: any) {this.modelList.forEach(item => {if (item.id === info.id) {item.active = !item.active;}});}handleClick(item: any, event: any) {// 检查是否按下了Ctrl键并是左键点击if (event.ctrlKey && event.button === 0) {this.multiSelect(item);} else {this.modelSelect(item);}}
}
</script><style lang="scss" scoped>
.excavation-analysis {position: absolute;top: 0;left: 50%;
}
.end__operation {float: right;display: flex;
}.el-radio-group {padding: 5px 8px;border-radius: 2px;border: 1px solid rgba(204, 212, 228, 1);background-color: #f9fafc;display: flex;align-items: center;
}
.row-item {display: flex;justify-content: space-between;margin-bottom: 8px;
}
.common-wrapper {display: flex;align-items: center;font-size: 14px;font-weight: 400;line-height: 22px;color: rgba(115, 123, 141, 1);padding: 5px 8px;border-radius: 2px;border: 1px solid rgba(204, 212, 228, 1);background-color: #f9fafc;font-family: PingFang SC;
}
.file-select {display: flex;justify-content: space-between;width: 100%;
}.model-list {font-family: PingFang SC;font-size: 14px;color: rgba(115, 123, 141, 1);max-height: 300px;overflow-y: auto;.model-list-item {height: 32px;line-height: 32px;padding-left: 8px;&:nth-child(2n + 1) {background-color: rgba(245, 248, 253, 1);}}.model-active {background: rgba(203, 218, 255, 1) !important;}
}
</style>

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

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

相关文章

Java 中的 Math. round(-1. 5) 等于多少?

在 Java 中&#xff0c;Math.round() 方法用于四舍五入一个浮点数。这个方法的工作原理是&#xff0c;它会查看要舍入数值的小数点后第一位。如果这一位是 5 或更大&#xff0c;那么整数部分加 1&#xff1b;如果小于 5&#xff0c;整数部分保持不变。 对于 Math.round(-1.5)&…

【力扣】零钱兑换和零钱兑换2,动态规划算法

【力扣】零钱兑换和零钱兑换2&#xff0c;动态规划算法 最大组合数和最小物品数 package day0325;/*** description 动态规划* date 2024/3/25*/ public class Demo2 {public static void main(String[] args) {// 3 // int[] coins {1, 2, 5}; // int amount…

蓝桥杯物联网遇见的重大BUG及其产生原因和解决方法

BUG列表 1、ADC的RP2显示一直为0&#xff1a;2、LORX_Tx发送数据乱码&#xff1a;3、strcmp比较char a[2] {1, 2}与“12”字符串是否相等板子会死机&#xff1a;4、LORA_Tx和LORA_Rx放一起会接收不到数据&#xff1a;5、RTC获取到静止时间&#xff1a;6、ADC获取RP1和RP2模拟量…

IO复用并发模型

在讲解复用并发模型之前&#xff0c;先补齐一些知识&#xff1a; 设想一个场景&#xff0c;你今天想洗衣服&#xff0c;但是没有洗衣粉&#xff0c;于是你让快递小哥送来&#xff0c;那在送的这段时间&#xff0c;如果你干了别的活&#xff0c;洗衣服这件事情就被阻塞了&#…

Prometheus(五):监控物理机并进行数据展示

目录 1 ipmi export安装配置1.1 ipmi exporter简介1.2 安装1.2 创建yaml文件1.3 systemd启动配置 ipmi_exporter.service1.4 启动 ipmi_exporter 服务1.5 Prometheus配置创建target&#xff1a;修改Prometheus配置文件 1.6 Grafana配置1.7 IPMI说明1、IPMI2、ipmitool远程电源管…

C++项目——集群聊天服务器项目(五)网络模块与业务模块

今天来正式书写集群聊天服务器网络模块与部分业务模块的代码 环境搭建C项目——集群聊天服务器项目(一)项目介绍、环境搭建、Boost库安装、Muduo库安装、Linux与vscode配置-CSDN博客 Json第三方库 muduo网络库 MySQL数据库 一、工程目录创建 项目通过CMake编译&#xff0c…

C语言:自定义类型:联合体和枚举

目录 联合体 联合体是什么&#xff1f; 联合体的大小计算 枚举 枚举是什么&#xff1f; 为什么要使用枚举&#xff1f; 联合体 联合体是什么&#xff1f; 联合体也是个自定义类型&#xff0c;它和结构体类似&#xff0c;都是由多个成员构成&#xff0c;可以有不同的内置…

【OJ】动归练习二

个人主页 &#xff1a; zxctscl 如有转载请先通知 题目 1. 91.解码方法1.1 分析1.2 代码 2. 62.不同路径2.1 分析2.2 代码 3. 63.不同路径 II3.1 分析3.2 代码 1. 91.解码方法 1.1 分析 题目所述就是把一串数字反向解码为字母映射出来&#xff0c;有多少种方法。 题目也说&…

nav仿真(2)

开启仿真和建图 打开第一个窗口启动仿真&#xff1a; source devel/setup.bash export TURTLEBOT3_MODELburger roslaunch turtlebot3_gazebo turtlebot3_world.launch # 启动仿真打开第二个窗口&#xff0c;开始建图&#xff1a; source devel/setup.bash export TURTLEBOT3_…

mysql存储引擎、行锁与索引的关系

一、存储引擎概念介绍 MySQL中的数据用各种不同的技术存储在文件中&#xff0c;每一种技术都使用不同的存储机制、索引技巧、锁定水平并最终提供不同的功能和能力&#xff0c;这些不同的技术以及配套的功能在MySQL中称为存储引擎 存储引擎是MySQL将数据存储在文件系统中的存储…

个人网络防范

目录 安全事件频发根源在于背后利益链条 不仅仅是中国 网络安全事件成国际性难题 个人网络信息安全防护 四招来帮忙 首先&#xff0c;预防第一 第二&#xff0c;健康的上网浏览习惯 第三&#xff0c;WiFi安全性 第四&#xff0c;规范的文件处理 黑客攻击无孔不入&…

小程序网络视频组件video经常出现的错误解决

小程序网络视频组件错误 1.错误提示如下 3[渲染层网络层错误] Failed to load media http://www.xxx.net/download/1.mp4#devtools_no_referrer net::ERR_FAILED From server 112.126.62.195(env: Windows,mp,1.06.2401020; lib: 3.3.4)2.解决文章请参考 本文链接&#xff…

隐语技术架构

隐语架构 产品定位 算法层 计算层 密码原语 互联互通–资源层 总结

写了几个难一点的sql

写了几个难一点的sql SELECT bn.id AS book_node_id, t.version_id, bn.textbook_id, s.id AS subject_id, s.stage_id, COUNT( CASE WHEN d.document_type_id 1 AND d.scope IS NULL AND p.document_id IS NOT NULL THEN 1 END ) AS type_1_count, COUNT( CASEWHEN d.docume…

教程1_图像入门

一、读取图像文件 cv2.imread() 是 OpenCV 库中的一个函数&#xff0c;用于读取图像文件。下面是 cv2.imread() 函数的基本介绍和使用方法&#xff1a; 函数定义 cv2.imread(filename, flagscv2.IMREAD_COLOR) 参数 filename&#xff1a;要读取的图像的路径和文件名。flags…

前端理论总结(css3)——三角形/梯形 // 一边固定另一边自适应

三角形/梯形 三角形 width: 0; height: 0; border-top: 40px solid transparent; border-left: 40px solid transparent; border-right: 40px solid transparent; border-bottom: 40px solid #ff0000; 梯形 width: 50px; height: 0; border-bottom: 50px solid red; border-l…

JavaScript typeof运算符使用

typeof NaN 的数据类型是数字对象、数组、null 、日期 的数据类型是 object未定义变量、未赋值变量的数据类型为 undefined typeof "Bill" // 返回 "string" typeof 3.14 // 返回 "number" typeof NaN …

数据结构(五)——树与二叉树的应用

5.5 树与二叉树的应用 5.5.1 哈夫曼树 结点的权&#xff1a;有某种现实含义的数值。 结点的带权路径长度&#xff1a;从树的根到该结点的路径长度&#xff08;经过的边数&#xff09;与该结点上权值的乘积。 树的带权路径长度&#xff1a;树中所有叶结点的带权路径长度之和…

Spring如何解决循环依赖?

Spring中的循环引用 循环依赖&#xff1a;循环依赖其实就是循环引用,也就是两个或两个以上的bean互相持有对方,最终形成闭环。比如A依赖于B,B依赖于A 循环依赖在spring中是允许存在&#xff0c;spring框架依据三级缓存已经解决了大部分的循环依赖 ①一级缓存&#xff1a;单例池…

linux系统------------Mysql数据库介绍、编译安装

目录 一、数据库基本概念 1.1数据(Data) 1.2表 1.3数据库 1.4数据库管理系统(DBMS) 数据库管理系统DBMS原理 1.5数据库系统&#xff08;DBS) 二、数据库发展史 1、第一代数据库 2、第二代数据库 3、第三代数据库 三、关系型数据库 3.1关系型数据库应用 3.2主流的…