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

113 链接集10--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>

相关文章:

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

1.ctrl左键单击多选&#xff0c;单击单选 精简代码 <div class"model-list"><divmousedown.prevent"handleClick(item, $event)"class"model-list-item"v-for"item in modelList":key"item.id":class"{ model…...

详解JavaScript中this指向

this 原理 this 是一个指针型变量&#xff0c;它指向当前函数的运行环境。 1.内存的数据结构 var obj { foo: 5 };2.函数 var obj { foo: function () {} };引擎会将函数单独保存在内存中&#xff0c;然后再将函数的地址赋值给foo属性的value属性。 由于函数是一个单独的…...

c语言之在函数中传递指针

c语言中定义一个函数&#xff0c;如果说是形参一个数组&#xff0c;这个数组在编译后会变成一个指针变量 比如下面的代码例子 #include<stdio.h> void ff(char a[]) {a[1]r;a[4]r;printf("%d\n",a); }int main() {char a[]"peogeam";ff(a);printf(…...

vue2 插槽(默认插槽 slot 、具名插槽 v-slot 、作用域插槽 slot-scope -- 插槽传值 )

插槽&#xff1a;用于在子组件的指定位置插入指定内容&#xff0c;类似在电梯里挂的若干广告显示屏&#xff0c;可以给指定的位置传入指定的广告 单插槽&#xff08;匿名/默认插槽&#xff09; 父组件中&#xff08; 此时的 &#xff09; <Child><template><p…...

(第79天)单机转 RAC:19C 单机 到 19C RAC

前言 单机转 RAC 分为两种: 同版本迁移:可以使用 RMAN 或者 ADG 方式升级迁移:建议使用数据泵 或者 XTTS 方式升级迁移使用数据泵的方式与 (第72天)数据泵升级:11GR2 到 19C 步骤基本一致,这里不作演示,只演示使用 ADG 来进行同版本迁移。 升级前准备 本次测试尽量按…...

Spring Cloud微服务Actuator和Vue

目录 前言一、引入Actuator依赖二、暴露Actuator端点1. 配置文件2. 监控端点 三、自定义健康检查自定义健康检查类 四、vue前端代码五、监控器的优势六、监控指标的可视化1. Grafana2. Prometheus 七、安全性考虑安全配置示例 八、总结 前言 随着微服务架构的流行&#xff0c;…...

Iterator对象功能学习

package config;import java.util.Iterator; import java.util.Properties; import java.util.Set;/*** 这个类演示了如何使用Properties类来存储和访问键值对。* Properties类继承自Hashtable&#xff0c;因此它可以用来存储键值对数据&#xff0c;且支持同步。*/ public clas…...

Linux的一些基本指令

​​​​​​​ 目录 前言&#xff1a; 1.以指令的形式登录 2.ls指令 语法&#xff1a; 功能&#xff1a; 常用选项&#xff1a; 3.pwd指令 4.cd指令 4.1 绝对路径与相对路径 4.2 cd .与cd ..&#xff08;注意cd后先空格&#xff0c;然后两个点是连一起的&#xff0…...

【tips】Git使用指南

文章目录 一、Git介绍1. 什么是Git2.Git对比SVN3.Git安装 二.Git常用命令1. git config2. 初始化本地库3. 工作区、暂存区和版本库4. git add5. git commit6. git reset 与 git revertgit resetgit revert 三. Git 分支1.初识分支2.创建分支3.切换分支4.合并分支5.删除分支 四.…...

【字节序】

字节序 高字节&#xff08;低字节&#xff09;高地址&#xff08;低地址&#xff09;大端模式&#xff08;小端模式&#xff09; 高字节&#xff08;低字节&#xff09; 一个16位(双字节)的数据&#xff0c;比如0xAABB&#xff0c;那么高位字节就是0xAA&#xff0c;低位是0xBB …...

数据结构(五)——树森林

5.4 树和森林 5.4.1 树的存储结构 树的存储1&#xff1a;双亲表示法 用数组顺序存储各结点&#xff0c;每个结点中保存数据元素、指向双亲结点(父结点)的“指针” #define MAX_TREE_SIZE 100// 树的结点 typedef struct{ElemType data;int parent; }PTNode;// 树的类型 type…...

vscode配置c/c++调试环境

本文记录win平台使用vscode远程连接ubuntu server服务器下&#xff0c;如何配置c/c调试环境。 过程 1. 服务器配置编译环境 这里的前置条件是vscode已经能够连接到服务器&#xff0c;第一步安装编译构建套件&#xff08;gcc、g、make、链接器等&#xff09;和调试器&#xf…...

食品输送带的材质

食品输送带的材质&#xff1a;确保安全与卫生的关键选择 在食品生产和加工过程中&#xff0c;食品输送带扮演着至关重要的角色。它负责将原材料、半成品和成品在各个环节之间进行有效传输&#xff0c;确保生产流程的顺畅进行。然而&#xff0c;在食品行业中&#xff0c;输送带…...

普通用户权限运行Docker

普通用户权限运行Docker 安装Docker Docker的安装比较简单&#xff0c;在Docker官网已经给出了具体的方案&#xff0c;可以直接使用apt安装 # Add Dockers official GPG key: sudo apt-get update sudo apt-get install ca-certificates curl sudo install -m 0755 -d /etc/…...

7.Java并发编程—掌握线程池的标准创建方式和优雅关闭技巧,提升任务调度效率

文章目录 线程池的标准创建方式线程池参数1.核心线程(corePoolSize)2.最大线程数(maximumPoolSize)3.阻塞队列(BlockingQueue) 向线程提交任务的两种方式1.execute()1.1.案例-execute()向线程池提交任务 2.submit()2.1.submit(Callable<T> task)2.2.案例-submit()向线程池…...

从边缘设备丰富你的 Elasticsearch 文档

作者&#xff1a;David Pilato 我们在之前的文章中已经了解了如何丰富 Elasticsearch 本身和 Logstash 中的数据。 但如果我们可以从边缘设备中做到这一点呢&#xff1f; 这将减少 Elasticsearch 要做的工作。 让我们看看如何从具有代理处理器的 Elastic 代理中执行此操作。 E…...

day29|leetcode|C++|491. 非递减子序列|46. 全排列|47. 全排列 II

Leetcode 491. 非递减子序列 链接&#xff1a;491. 非递减子序列 thought: 设 stack 中最后一个值的位置为 last。如果 stack 为空&#xff0c;则 last -1。 设当前正在处理的位置为 pos。如果在 nums 的子区间 [last1, pos) 中&#xff0c;存在和 nums[pos] 相同的值&…...

[Java、Android面试]_12_java访问修饰符、抽象类和接口

文章目录 1. java访问修饰符2. 抽象类和接口2.1 抽象类2.2 接口2.3 抽象类和接口的区别 本人今年参加了很多面试&#xff0c;也有幸拿到了一些大厂的offer&#xff0c;整理了众多面试资料&#xff0c;后续还会分享众多面试资料。 整理成了面试系列&#xff0c;由于时间有限&…...

Linux:Prometheus的源码包安装及操作(2)

环境介绍 三台centos 7系统&#xff0c;运行内存都2G 1.prometheus监控服务器&#xff1a;192.168.6.1 主机名&#xff1a;pm 2.grafana展示服务器:192.168.6.2 主机名&#xff1a;gr 3.被监控服务器&#xff1a;192.168.6.3 …...

MongoDB聚合运算符:$integral

文章目录 语法使用举例 $integral聚合运算符只能用在$setWindowField阶段&#xff0c;返回曲线下面积的近似值&#xff0c;该曲线是使用梯形规则计算的&#xff0c;其中每组相邻文档使用以下公式形成一个梯形&#xff1a; $setWindowFields阶段中用于积分间隔的sortBy字段值$i…...

第19节 Node.js Express 框架

Express 是一个为Node.js设计的web开发框架&#xff0c;它基于nodejs平台。 Express 简介 Express是一个简洁而灵活的node.js Web应用框架, 提供了一系列强大特性帮助你创建各种Web应用&#xff0c;和丰富的HTTP工具。 使用Express可以快速地搭建一个完整功能的网站。 Expre…...

基于距离变化能量开销动态调整的WSN低功耗拓扑控制开销算法matlab仿真

目录 1.程序功能描述 2.测试软件版本以及运行结果展示 3.核心程序 4.算法仿真参数 5.算法理论概述 6.参考文献 7.完整程序 1.程序功能描述 通过动态调整节点通信的能量开销&#xff0c;平衡网络负载&#xff0c;延长WSN生命周期。具体通过建立基于距离的能量消耗模型&am…...

日语学习-日语知识点小记-构建基础-JLPT-N4阶段(33):にする

日语学习-日语知识点小记-构建基础-JLPT-N4阶段(33):にする 1、前言(1)情况说明(2)工程师的信仰2、知识点(1) にする1,接续:名词+にする2,接续:疑问词+にする3,(A)は(B)にする。(2)復習:(1)复习句子(2)ために & ように(3)そう(4)にする3、…...

React Native 开发环境搭建(全平台详解)

React Native 开发环境搭建&#xff08;全平台详解&#xff09; 在开始使用 React Native 开发移动应用之前&#xff0c;正确设置开发环境是至关重要的一步。本文将为你提供一份全面的指南&#xff0c;涵盖 macOS 和 Windows 平台的配置步骤&#xff0c;如何在 Android 和 iOS…...

反射获取方法和属性

Java反射获取方法 在Java中&#xff0c;反射&#xff08;Reflection&#xff09;是一种强大的机制&#xff0c;允许程序在运行时访问和操作类的内部属性和方法。通过反射&#xff0c;可以动态地创建对象、调用方法、改变属性值&#xff0c;这在很多Java框架中如Spring和Hiberna…...

Spring Boot面试题精选汇总

&#x1f91f;致敬读者 &#x1f7e9;感谢阅读&#x1f7e6;笑口常开&#x1f7ea;生日快乐⬛早点睡觉 &#x1f4d8;博主相关 &#x1f7e7;博主信息&#x1f7e8;博客首页&#x1f7eb;专栏推荐&#x1f7e5;活动信息 文章目录 Spring Boot面试题精选汇总⚙️ **一、核心概…...

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 解决方案&…...

【学习笔记】深入理解Java虚拟机学习笔记——第4章 虚拟机性能监控,故障处理工具

第2章 虚拟机性能监控&#xff0c;故障处理工具 4.1 概述 略 4.2 基础故障处理工具 4.2.1 jps:虚拟机进程状况工具 命令&#xff1a;jps [options] [hostid] 功能&#xff1a;本地虚拟机进程显示进程ID&#xff08;与ps相同&#xff09;&#xff0c;可同时显示主类&#x…...

Typeerror: cannot read properties of undefined (reading ‘XXX‘)

最近需要在离线机器上运行软件&#xff0c;所以得把软件用docker打包起来&#xff0c;大部分功能都没问题&#xff0c;出了一个奇怪的事情。同样的代码&#xff0c;在本机上用vscode可以运行起来&#xff0c;但是打包之后在docker里出现了问题。使用的是dialog组件&#xff0c;…...

JS手写代码篇----使用Promise封装AJAX请求

15、使用Promise封装AJAX请求 promise就有reject和resolve了&#xff0c;就不必写成功和失败的回调函数了 const BASEURL ./手写ajax/test.jsonfunction promiseAjax() {return new Promise((resolve, reject) > {const xhr new XMLHttpRequest();xhr.open("get&quo…...