<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连选的实现的更多相关文章

  1. Element中Tree树结构组件中实现Ctrl和Shift多选

    在Element中的树结构中, 实现多选功能,首先的是判断有没有按下键盘ctrl和shift按键.但是在Element中的tree组件的左键点击事件是没有提供$event鼠标属性判断的.所以就需要在函 ...

  2. (转)Eclipse中需要查看某个类的源码,直接按住Ctrl 然后点击想要查看的类或则方法

      文章转自:http://blog.sina.com.cn/s/blog_52f623240102vpcr.html   在Eclipse中需要查看某个类的源码,直接按住Ctrl 然后点击想要查看的 ...

  3. wpf Listbox 实现按住ctrl键来取消选中

    1. 首先继承一个listbox,来获得按住ctrl键时,点击的item public class ListBoxEx : ListBox { public BeatTemplateWave GetA ...

  4. [Selenium]如何通过Selenium实现Ctrl+click,即按住Ctrl的同时进行单击操作

    [以下是不负责任的转载……] 在自动化测试的过程中,经常会出现这样的场景: 按住Ctrl的同时,进行单击操作,已达到多选的目的 Actions a = new Actions(driver); a.k ...

  5. element穿梭框el-transfer增加拖拽排序和shift多选checkbox功能

    <template> <div class="demo"> <el-transfer v-model="value" filter ...

  6. 在DbGrid中,不按下Ctrl,单击鼠标如何实现多选?谢谢

    解决方案 »   有了dbgrid1.options.dgmultiselect:=true;必须按下Ctrl键,才能实现多选, 修改源代码,把以下内容if Select and (ssShift i ...

  7. 鼠标上下滑动总是放大缩小页面,按住ctrl+0

    鼠标上下滑动总是放大缩小页面,可能是ctrl键失灵了,幸好键盘有两个ctrl键,按住ctrl+0,页面就正常了,吓死宝宝了,~~~~(>_<)~~~~

  8. 按住ctrl键可以在新窗口打开图片

    用firebug查看网页时,img标签(或background属性里面的url地址源)里面的图片源按住ctrl键可以弹出新窗口显示,并可右键另存为到本地目录

  9. Spring Tool Suite4(sts)复制粘贴卡顿(ctrl+v, ctrl+c)、按住ctrl也很卡

    最近在看<Spring in Action, Fifth Edition>,下载了Spring Tool Suite4,在使用的过程中发现了一些问题: 只要在复制粘贴(ctrl+c, ct ...

  10. Delphi 关于DBGrid多选删除(shitf多选,ctrl多选)

    ////删除多选记录 procedure THistoryForm.DeleteButtonClick(Sender: TObject);var  tempBookMark:TbookMark;  i ...

随机推荐

  1. MySql 查询表结构信息

    select Column_name as 列名,is_nullable as 是否可为空,data_type as 数据类型,column_default as 默认值,case when colu ...

  2. JS(JavaScript)的初了解6(更新中···)

    Js数据类型具体分析 基础类型:  string  number   boolean   null  undefined 引用类型:  object ==>  json  array  等 复习 ...

  3. 洛谷 P3381 【【模板】最小费用最大流】

    题目描述 如题,给出一个网络图,以及其源点和汇点,每条边已知其最大流量和单位流量费用,求出其网络最大流和在最大流情况下的最小费用. 输入 第一行包含四个正整数N.M.S.T,分别表示点的个数.有向边的 ...

  4. webpack 4.X 基础编译

    webpack4.x的打包已经不能用webpack 文件a 文件b的方式,而是直接运行webpack --mode development或者webpack --mode production,这样便 ...

  5. C# WebClient实现文件上传

    一.同步上传 文章 https://www.cnblogs.com/duanjt/p/6420172.html 里面有提到服务端通过WebApi如何实现文件上传,这里就只说客户端使用WebClient ...

  6. retina屏 适配问题

    物理像素(physical pixel) 一个物理像素是显示器(手机屏幕)上最小的物理显示单元,在操作系统的调度下,每一个设备像素都有自己的颜色值和亮度值. 设备独立像素(density-indepe ...

  7. 【A tour of go】练习题

    练习:循环与函数 (1)题目 为了练习函数与循环,我们来实现一个平方根函数:用牛顿法实现平方根函数. 计算机通常使用循环来计算 x 的平方根.从某个猜测的值 z 开始,我们可以根据 z² 与 x 的近 ...

  8. SWUST OJ(1035)

    定位顺序表中最大和最小值 #include<iostream> #include<cstdlib> using namespace std; int main(int argc ...

  9. 使用XStream解析复杂XML并插入数据库(二)

    标注黄色地方:我需要加深学习!!! 我写的是webservice,目前具体写webservice的步骤我还不清楚, 整理完小知识开始整理webservice! 针对以下格式的XML进行解析 <? ...

  10. Web前端开发标准规范

    web前端开发规范的意义 提高团队的协作能力 提高代码的复用利用率 可以写出质量更高,效率更好的代码 为后期维护提供更好的支持 一.命名规则 命名使用英文语义化,禁止使用特殊字符,禁止使用拼音,禁止使 ...