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 ...
随机推荐
- soapui基础知识
一.基础知识 1.测试步骤(teststep)为最小单位,一个完整的测试用例由多个测试步骤组成: 2.一个测试用例(testcase)代表一个完整的操作 3.测试集(testsuite)主要是为了区分 ...
- Tensorflow的基础用法
简介 Tensorflow是一个深度学习框架,它使用图(graph)来表示计算任务,使用tensor(张量)表示数据,图中的节点称为OP,在一个会话(Session)的上下文中执行运算,最终产生ten ...
- 使用ReadStream方法延时读取文件
const fs = require('fs'); let file = fs.createReadStream("filenpath.js"); file.pause(); fi ...
- rest framework之过滤组件
一.普通过滤 (一)get_queryset get_queryset方法是GenericAPIView提供的一个方法,旨在返回queryset数据集,而过滤就是要在这个方法返回数据集之前对数据进行筛 ...
- (一)CGI (通用网关接口) 简介
CGI (通用网关接口)公共网关接口(Common Gateway Interface,CGI)是Web 服务器运行时外部程序的规范,按CGI 编写的程序可以扩展服务器功能.CGI 应用程序能与浏览器 ...
- Vue学习笔记【9】——Vue指令之v-for和key属性
迭代数组(普通数组.对象数组) <ul> <li v-for="(item, i) in list">索引:{{i}} --- 姓名:{{item.name ...
- Flex布局(一)
Flex Flex是Flexible Box的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性. 任何一个容器都可以指定为Flex布局.display: flex;, 行内元 ...
- 【LeetCode 15】三数之和
题目链接 [题解] 先把n个数字升序排个序. 然后枚举三元组最左边的那个数字是第i个数字. 之后用两个指针l,r移动来获取三元组的第2个和第3个数字. (初始值,l=i+1,r = n-1); 如果a ...
- firefox显示 您的连接不安全 解决办法
在地址栏键入"about:config" 点击“我了解此风险” 在下方任意位置右键,选择新建布尔值 输入首选项名称为“security.enterprise_roots.enabl ...
- 20165239 2018——2019Exp8 Web基础
Exp8 Web基础 基础问题回答 (1)什么是表单 •表单在网页中主要负责数据采集功能. •一个表单有三个基本组成部分: ◦表单标签,这里面包含了处理表单数据所用CGI程序的URL以及数据提交到服务 ...