vue+elementui 中 @keyup 键盘上下左右移动聚焦
<template>
<el-table :data="CreditUnclearOutlineList" border style="width: 100%" ref="table">
<el-table-column align="center" prop="name" label="名称" width="150">
</el-table-column>
<el-table-column align="center" label="正常">
<el-table-column align="center" sortable prop="normalB" label="笔数">
<template scope="scope">
<span>
<el-input style="width: 90px" placeholder="笔数" v-model="scope.row.normalB" @change="handleCreditChange()" class="table_input normalB_input" @keyup.native="show($event,scope.$index)"></el-input>
</span>
</template>
</el-table-column>
<el-table-column align="center" sortable prop="normalY" label="余额(万元)">
<template scope="scope">
<span>
<el-input style="width: 90px" placeholder="余额" v-model="scope.row.normalY" @change="handleCreditChange()" @blur="handleBalanceBlur($event)" @focus="handleBalanceClear($event)" class="table_input normalY_input" @keyup.native="show($event,scope.$index)"></el-input>
</span>
</template>
</el-table-column>
</el-table-column>
<el-table-column align="center" label="关注">
<el-table-column align="center" sortable prop="focusB" label="笔数">
<template scope="scope">
<span>
<el-input style="width: 90px" placeholder="笔数" v-model="scope.row.focusB" @change="handleCreditChange()" class="table_input focusB_input" @keyup.native="show($event,scope.$index)"></el-input>
</span>
</template>
</el-table-column>
<el-table-column align="center" sortable prop="focusY" label="余额(万元)">
<template scope="scope">
<span>
<el-input style="width: 90px" placeholder="余额" v-model="scope.row.focusY" @change="handleCreditChange()" @blur="handleBalanceBlur($event)" @focus="handleBalanceClear($event)" class="table_input focusY_input" @keyup.native="show($event,scope.$index)"></el-input>
</span>
</template>
</el-table-column>
</el-table-column>
<el-table-column align="center" label="不良">
<el-table-column align="center" sortable prop="badB" label="笔数">
<template scope="scope">
<span>
<el-input style="width: 90px" placeholder="笔数" v-model="scope.row.badB" @change="handleCreditChange()" class="table_input badB_input" @keyup.native="show($event,scope.$index)"></el-input>
</span>
</template>
</el-table-column>
<el-table-column align="center" sortable prop="badY" label="余额(万元)">
<template scope="scope">
<span>
<el-input style="width: 90px" placeholder="余额" v-model="scope.row.badY" @change="handleCreditChange()" @blur="handleBalanceBlur($event)" @focus="handleBalanceClear($event)" class="table_input badY_input" @keyup.native="show($event,scope.$index)"></el-input>
</span>
</template>
</el-table-column>
</el-table-column>
<el-table-column align="center" prop="amountY" sortable label="余额(万元)">
<template scope="scope">
<span>{{scope.row.amountY}}</span>
</template>
</el-table-column>
</el-table>
</template>
//键盘触发事件
show(ev,index){ let newIndex ; //通过ev 获取 当前input 名称 用于判断属于哪列
let clssName = ev.target.offsetParent.className; //每一列
if(clssName.indexOf('normalB_input') != -1){ newIndex = index*6 ; } else if (clssName.indexOf('normalY_input') != -1) { newIndex = index*6 + 1 ; } else if (clssName.indexOf('focusB_input') != -1) { newIndex = index*6 + 2; } else if (clssName.indexOf('focusY_input') != -1) { newIndex = index*6 + 3; } else if (clssName.indexOf('badB_input') != -1) { newIndex = index*6 + 4; } else if (clssName.indexOf('badY_input') != -1) { newIndex = index*6 + 5; } //获取每一列的input名称
let normalB_input = document.getElementsByClassName('normalB_input')
let normalY_input = document.getElementsByClassName('normalY_input')
let focusB_input = document.getElementsByClassName('focusB_input')
let focusY_input = document.getElementsByClassName('focusY_input')
let badB_input = document.getElementsByClassName('badB_input')
let badY_input = document.getElementsByClassName('badY_input') //获取54个input
let inputAll = document.querySelectorAll('.table_input input'); //向上 =38
if(ev.keyCode == 38){
//当焦点在第一行的时候 按向上的时候焦点要聚焦到前一列的最后一个
if(newIndex >=1 && newIndex<=5){
newIndex = newIndex + 47;
} else {
newIndex -= 6 ;
} if( inputAll[newIndex] ){ inputAll[newIndex].focus(); } } //下 = 40
if(ev.keyCode == 40){ //当newIndex 在最后一行的时候 焦点要聚焦到 下一列的第一个
if(newIndex>= 48 && newIndex<53){ newIndex = (newIndex%8) + 1
}else {
newIndex += 6 ;
} if( inputAll[newIndex] ){ inputAll[newIndex].focus(); } } //左 = 37
if(ev.keyCode == 37){ newIndex -= 1 ; if( inputAll[newIndex] ){ inputAll[newIndex].focus(); }
} //右 = 39
if(ev.keyCode == 39){ newIndex += 1 ; if( inputAll[newIndex] ){ inputAll[newIndex].focus(); }
} },
注意点：
1.vue element-ui 绑定@keyup事件无效 ,加上.native覆盖原有封装的keyup事件即可
vue+elementui 中 @keyup 键盘上下左右移动聚焦的更多相关文章
- vue+element-ui中的图片获取与上传
vue+element-ui中的图片获取与上传 工作上接触了一下图片的处理,图片的格式是文件流, 记录如下. 请求图片 请求图片的时候,带上{ responseType: 'blob' }, 否则图片 ...
- vue element-ui中引入第三方icon
vue element-ui中引入第三方icon 把图标加入项目 设置项目名称,下载项目(项目名称自定义) 解压项目到开发目录 在main.js中全局引入css文件 修改下载下来的项目中的css文件, ...
- vue+elementUI中单选框el-radio设置默认值和唯一标识某个单选框
vue+elementUI中单选框el-radio设置默认值 如果后台返回的单选框的值是number:单选框的lable需要设置成 :lable='0';如下: <el-form-item la ...
- vue+element-ui中引入阿里播放器
1.在public文件下的index.html文件中插入以下代码: <link rel="stylesheet" href="https://g.alicdn.co ...
- Vue:Elementui中的Tag与页面其它元素相互交互的两三事
前言 公司系统在用elementui做后台开发,不免遇到一些需要自己去根据原有的功能上,加一些交互的功能.今天来介绍下我在用elementUi里的Tag标签与多选框交互的过程,东西听上去很简单,但就是 ...
- 关于Vue element-ui中诡异问题的解决思路
最近在做Element-ui项目时总是会出现些异步及其一些诡异问题,关于vue 的异步原理就不多说了,感觉大部分的问题都可以用Vue.nextTick来解决,Vue.nextTick是等DOM二次加载 ...
- vue element-ui 绑定@keyup事件无效
解决办法: <el-input @keyup.native="ajax"></el-input> 加上.native覆盖原有封装的keyup事件即可
- vue+element-ui中的表单验证（电话等等）
1. 2. 3. ============================================================上代码============================ ...
- Vue Element-UI 中列表单选的实现
el-table中单选的实现 引用场景: 选择单条数据进行业务操作 实现方式: 给el-table-column设置el-radio Template 代码 <div class="r ...
随机推荐
- 虚拟机linux系统 硬盘/root路径扩容
调整完后,重新打开虚拟机,使用fdisk -l查看,可以看到我们刚刚扩容的空间已经可以看到,但没有分区,还不能使用./dev/sda已经拥有了扩大的空间. 使用Linux的fdisk分区工具给磁盘/d ...
- day02 python流程控制 while循环 格式化输出 运算符 编码
day02 python 一.循环: while循环 while expression: while_suite 1.break 停止当前循环(如果多个循环嵌套, ...
- 39th 迷迷糊糊 二豆玩不转了
今天学的语法 1. # {} . format()的传送作用 请从键盘获取一个整数,求他的平方根,要求: 1 如果这个整数是大于等于0,则直接打印其平方根 2 否则, 打印其绝对值的平方根 x ...
- docker部署coredns
示例: [root@corends coredns]# cd /home/coredns/ [root@corends coredns]# ls -al total drwxr-xr-x root r ...
- Sublime Text添加gcc编译器
{ "shell_cmd" : "gcc $file_name -o ${file_base_name}", "working_dir" : ...
- Ubuntu开放对外端口
1.查看已经开启的端口 sudo ufw status 2.打开80端口 sudo ufw allow 80 3.防火墙开启 sudo ufw enable 4.防火墙重启 sudo ufw relo ...
- 【Dart学习】-- Dart之操作符
一,概述 dart定义了下表所示的运算符.你可以重写许多这些运算符. 描述 运算符 一元后缀 expr++ expr-- () [] . ?. 一元前缀 -expr !expr ~expr ++exp ...
- 使用SpringBoot AOP 记录操作日志、异常日志
平时我们在做项目时经常需要对一些重要功能操作记录日志,方便以后跟踪是谁在操作此功能:我们在操作某些功能时也有可能会发生异常,但是每次发生异常要定位原因我们都要到服务器去查询日志才能找到,而且也不能对发 ...
- 51nod 1437 迈克步——单调栈
有n只熊.他们站成一排队伍,从左到右依次1到n编号.第i只熊的高度是ai. 一组熊指的队伍中连续的一个子段.组的大小就是熊的数目.而组的力量就是这一组熊中最小的高度. 迈克想知道对于所有的组大小为x( ...
- php开发面试题---数据库SQL调优的几种方式
php开发面试题---数据库SQL调优的几种方式 一.总结 一句话总结: 创建索引:尽量避免使用or或者like,或者sql中的正则 存储查询中间结果 可以加sphinx搜索技术 查询优化 主从数据库 ...