按住CTRL多选,按住shift连选的实现
<tr class="address" v-for="(counts, index) in counts" :key="index" @click="trSelect(index)" :class="rowsSelect.indexOf(index) != -1 ? 'selectTr' : ''"></tr>
document.onkeydown = (e) => {
if (!this.keyCode) {
if (window.event) {
this.keyCode = event.keyCode;
} else if (e.which) {
this.keyCode = e.which;
}
}
};
document.onkeyup = () => {
if (this.keyCode) {
this.keyCode = undefined;
}
};
trSelect(index) {
switch (this.keyCode) {
case 17://ctrl
this.isCtrl = true;
if (this.rowsSelect.indexOf(index) != -1) {
this.rowsSelect.splice(index, 1);
} else {
this.rowsSelect.push(index);
}
this.startIndex = index;
break;
case 16://shift
if (!this.isCtrl && this.rowsSelect.length == 0) {
this.rowsSelect.push(index);
this.startIndex = index;
return;
}
let start, end;
if (this.startIndex < index) {
start = this. startIndex;
end = index;
} else {
start = index;
end = this.startIndex;
}
this.rowsSelect = [];
for (let k = start; k <= end; k++) {
this.rowsSelect.push(k);
}
this.isCtrl = false;
break;
default:
this.rowsSelect = [index];
this.isCtrl = false;
this.startIndex = index;
break;
}
}
按住CTRL多选,按住shift连选的实现的更多相关文章
- Element中Tree树结构组件中实现Ctrl和Shift多选
在Element中的树结构中, 实现多选功能,首先的是判断有没有按下键盘ctrl和shift按键.但是在Element中的tree组件的左键点击事件是没有提供$event鼠标属性判断的.所以就需要在函 ...
- (转)Eclipse中需要查看某个类的源码,直接按住Ctrl 然后点击想要查看的类或则方法
文章转自:http://blog.sina.com.cn/s/blog_52f623240102vpcr.html 在Eclipse中需要查看某个类的源码,直接按住Ctrl 然后点击想要查看的 ...
- wpf Listbox 实现按住ctrl键来取消选中
1. 首先继承一个listbox,来获得按住ctrl键时,点击的item public class ListBoxEx : ListBox { public BeatTemplateWave GetA ...
- [Selenium]如何通过Selenium实现Ctrl+click,即按住Ctrl的同时进行单击操作
[以下是不负责任的转载……] 在自动化测试的过程中,经常会出现这样的场景: 按住Ctrl的同时,进行单击操作,已达到多选的目的 Actions a = new Actions(driver); a.k ...
- element穿梭框el-transfer增加拖拽排序和shift多选checkbox功能
<template> <div class="demo"> <el-transfer v-model="value" filter ...
- 在DbGrid中,不按下Ctrl,单击鼠标如何实现多选?谢谢
解决方案 » 有了dbgrid1.options.dgmultiselect:=true;必须按下Ctrl键,才能实现多选, 修改源代码,把以下内容if Select and (ssShift i ...
- 鼠标上下滑动总是放大缩小页面,按住ctrl+0
鼠标上下滑动总是放大缩小页面,可能是ctrl键失灵了,幸好键盘有两个ctrl键,按住ctrl+0,页面就正常了,吓死宝宝了,~~~~(>_<)~~~~
- 按住ctrl键可以在新窗口打开图片
用firebug查看网页时,img标签(或background属性里面的url地址源)里面的图片源按住ctrl键可以弹出新窗口显示,并可右键另存为到本地目录
- Spring Tool Suite4(sts)复制粘贴卡顿(ctrl+v, ctrl+c)、按住ctrl也很卡
最近在看<Spring in Action, Fifth Edition>,下载了Spring Tool Suite4,在使用的过程中发现了一些问题: 只要在复制粘贴(ctrl+c, ct ...
- Delphi 关于DBGrid多选删除(shitf多选,ctrl多选)
////删除多选记录 procedure THistoryForm.DeleteButtonClick(Sender: TObject);var tempBookMark:TbookMark; i ...
随机推荐
- Android中碎片的添加问题
碎片在Android中的应用是十分广泛的,它就像是嵌在活动中的另一个活动就像是一个容器包含了另一个容器,那么到底该怎么添加碎片呢?主要有两种方法,一种是在该碎片所在的xml文档中使用Android:n ...
- node一些相关
1.Node node的核心语言是JavaScript ,基于Google的V8引擎. 2.node使用 找到当前文件所在目录 node 文件名.js 直接用绝对路径 在当前目录打开命令窗口 3.n ...
- 【用户权限】MongoDB用户权限
一.数据库用户角色: read:允许用户读取指定数据库readWrite:允许用户读写指定数据库 二.数据库管理角色:dbAdmin.dbOwner.userAdmin: dbAdmin:允许用户在指 ...
- 20175312 2018-2019-2 《Java程序设计》第9周学习总结
20175312 2018-2019-2 <Java程序设计>第9周学习总结 教材学习内容总结 已依照蓝墨云班课的要求完成了第九章的学习,主要的学习渠道是PPT,和书的课后习题. 总结如下 ...
- Struts2---动态action以及应用
为了处理各种逻辑业务,根据execute方法来判断请求哪种业务,然后将请求转发到对应的业务处理上, 通过动态请求action对象中的方法,实现某个单一的业务逻辑处理. 动态action的应用 //创建 ...
- 数据类型 varchar 和 uniqueidentifier 在 add 运算符中不兼容
select '<a href="/'+a.id +'" title="'+ a.title +'">'+a.Title+'</a>' ...
- 使用sphinx制作接口文档并托管到readthedocs
此sphinx可不是彼sphinx,此篇是指生成文档的工具,是python下最流行的文档生成工具,python官方文档即是它生成,官方网站是http://www.sphinx-doc.org,这里是一 ...
- JS-NaN的数据类型
NaN 的数据类型:not a number .是数字类型但是不是数字 例: var x = Number('abcd'); //结果是NaN alert( typeof (x) ); //结果是nu ...
- Python的类的下划线命名的区别
首先,单下划线开头,这个常被用于模块中,在一个模块中以单下划线开头的变量和函数被默认当做内部函数,如果使用from module import *导入时,这部分变量和函数不会被导入.注意,如果使 ...
- vmware12启动centos6.8报错ACPI:memory_hp:Memory online failed
报错信息 打开后出现黑屏上只显示 ACPI:memory_hp:Memory online failed for 0x10000000 - 0x80000000 BUG: soft lockup - ...