按住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 ...
随机推荐
- QString使用正则表达式快速去空格
//QString去掉空格 QString str; str.remove(QRegExp("\\s"));
- windows10下配置环境变量
环境变量 -> 系统变量中: 新建变量JAVA_HOME,值:jdk的安装路径 新建变量CLASSPATH,值:.;%JAVA_HOME%\lib\dt.jar;%JAVA_HOME%\lib\ ...
- 【.Net Core】Assets file project.assets.json not found. Run a NuGet package restore
问题起因 添加 .net core的Project build失败. 提示以下error: Assets file project.assets.json not found. Run a NuGet ...
- ssh 框架整合事,使用注解,action提示找不到
There is no Action mapped for namespace [/] and action name [/select] associated with context path [ ...
- anaconda中安装TensorFlow的方法
作为一个新手党加手残党真的折腾了好久才搞定,记录一下. step1:在anaconda prompt终端中输入 pip3 install -i https://pypi.tuna.tsinghua.e ...
- pyhon-request之repsonse的常用方法reponse.text和reponse.content的区别
1. requests在python2 和 python3中通用,方法完全一样 2. request简单易用 requests的作用 作用:发送网络请求,返回响应数据 用法 response = re ...
- VUE之图表操作
参考 v-charts文档有详细说明,不多做介绍. 感谢博主的梳理,我在此基础之上稍作修改 效果展示: 在工作中遇到了就记录下来,留作备用,以便今后查阅: 安装 npm install vue-sch ...
- React Native图片缓存解决方案
1. react-native-fetch-blob 将图片存在本地的一个东西 2. react-native-img-cache 自动缓存的一个东西 上面装好后 就可以使用啦 import {Cac ...
- vitual dom实现(转)
1. 通过JavaScript来构建虚拟的DOM树结构,并将其呈现到页面中: 2. 当数据改变,引起DOM树结构发生改变,从而生成一颗新的虚拟DOM树,将其与之前的DOM对比,将变化部分应用到真实的D ...
- mint修改host
sudo xed /etc/hosts # Pycharm 0.0.0.0 account.jetbrains.com0.0.0.0 www.jetbrains.com #sublime text3 ...