<template>
<card>
<el-table
ref="singleTable"
:data="tableData"
highlight-current-row
style="width: 100%"
tabindex="-1"
@current-change="handleCurrentChange"
>
<el-table-column
type="index"
width="50"
/>
<el-table-column
property="date"
label="日期"
width="120"
/>
<el-table-column
property="name"
label="姓名"
width="120"
/>
<el-table-column label="地址">
<template slot-scope="scope">
<el-input :ref="'mark'+scope.$index" v-model="scope.row.address" @keyup.enter.native="next" />
</template>
</el-table-column>
</el-table>
<div style="margin-top: 20px">
<el-button @click="setCurrent()">取消选择</el-button>
</div>
</card>
</template>
<script>
export default {
data() {
return {
tableData: [{
date: '2016-05-02',
name: '张三',
address: ''
}, {
date: '2016-05-04',
name: '王小虎',
address: ''
}, {
date: '2016-05-01',
name: '李四',
address: ''
}, {
date: '2016-05-03',
name: '赵六',
address: ''
}],
currentRow: null
}
},
methods: {
setCurrent(row) {
this.$refs.singleTable.setCurrentRow(row)
},
handleCurrentChange(val) {
this.currentRow = val
},
next() {
const len = this.tableData.length
const val = this.currentRow
this.tableData.forEach((v, i) => {
if (v === val) {
if (i < len - 1) {
this.setCurrent(this.tableData[i + 1])
this.$refs['mark' + (i + 1)].focus()
} else {
this.setCurrent(this.tableData[0])
this.$refs['mark' + (0)].focus()
}
}
})
}
}
}
</script>

element 表格里的input点击回车聚焦下个input的更多相关文章

  1. jquery表格可编辑修改表格里面的值,点击td变input无刷新更新表格

    td点击后变为input可以输入,更新数据,无刷新更新 演示 XML/HTML Code <table border="0" cellpadding="0" ...

  2. 表单中的input框点击enter到下一个input框

    $(function() { $("#form1").on("keydown", "tr input", function() { //响应 ...

  3. 如何在HTML表格里定位到一行数据

    业务需求: 在这样一个表格里,通过点击"确认"按钮,收集该行数据,向后台发送请求 解决办法 以该button为锚获取父节点,再由父节点获取各个元素的值 获取子元素又有很多办法,包括 ...

  4. ASP.NET MVC WebApi 返回数据类型序列化控制(json,xml) 用javascript在客户端删除某一个cookie键值对 input点击链接另一个页面,各种操作。 C# 往线程里传参数的方法总结 TCP/IP 协议 用C#+Selenium+ChromeDriver 生成我的咕咚跑步路线地图 (转)值得学习百度开源70+项目

    ASP.NET MVC WebApi 返回数据类型序列化控制(json,xml)   我们都知道在使用WebApi的时候Controller会自动将Action的返回值自动进行各种序列化处理(序列化为 ...

  5. elementUI vue tree input 懒加载 输入下拉树型示例 点击其他区域关闭自定义div

    <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8&quo ...

  6. vue element-ui表格里时间戳转换成时间显示

    工作中遇到后台给的表格数据里时间是一个13位的时间戳,需要转换成时间显示在表格里, 可以用element-ui表格自带的:formatter函数,来格式化表格内容: // 时间戳转换成时间 // 使用 ...

  7. js 实现table表格拖拽和点击表头升降序排序

    js 实现table表格拖拽和点击表头升降序排序,写的比较乱,用的时候可以把其中的一些模块函数提取出来 样式,由于是可拖拽表格,所以样式 table tr th{cursor:move;} js实现 ...

  8. Excel2010表格里设置每页打印时都有表头

    在打印Excel表格时常常会出现如果存在多页打印时,往往从第二页开始就会出现没有表头的情况,导致到后面都不清楚对应的是哪个数据,查看时也很麻烦,下面就将为大家介绍如何在Excel表格里设置每页打印时都 ...

  9. input点击修改样式

    <input id="geren" type="button" value="个人奖励" style="BORDER-TOP ...

随机推荐

  1. Balanced Lineup POJ - 3264

    #include<iostream> #include<cstdio> #include<cstring> #include<algorithm> us ...

  2. IDEA安装Flutter遇到的坑

    环境: ①IDEA2019.3.3 ②JAVA12 ③Android-SDK29.0.3 ④Flutter1.14.6 ⑤WINDOWS10.0.18363.657 ⑥AL10实体机,Android8 ...

  3. DoraBox sql注入&文件上传

    SQL注入 1.sqli数字型 判断是否存在注入点,执行1 and 1=1,有回显判断存在注入点 判断字段数,执行1 order by 3以及执行1 order by 4时报错,判断字段数为3 判断具 ...

  4. 使用 Express 脚手架

    安装: npm install -g express-generator 创建项目: express myapp 安装依赖 install dependencies: > npm install ...

  5. Spark性能优化指南——初级篇

    原文来我的公众号:Spark性能优化指南——初级篇 一. Spark作业原理 我们使用spark-submit提交一个Spark作业之后,这个作业就会启动一个对应的Driver进程.该进程是向集群管理 ...

  6. install multiple versions of CUDA

    https://www.pugetsystems.com/labs/hpc/How-To-Install-CUDA-10-together-with-9-2-on-Ubuntu-18-04-with- ...

  7. ubuntu set up 7 - power

    https://askubuntu.com/questions/1078939/ubuntu-18-04-battery-life http://tipsonubuntu.com/2018/11/18 ...

  8. jsp虚拟路径与虚拟主机

    配置虚拟路径 方式一: 在Tomcat根目录下的webapps就是一个虚拟路径,conf目录下的server.xml文件里配置 //默认的虚拟路径 <Engine name="Cata ...

  9. Give me five !

    @media only screen and (max-width: 360px) { #friedsGroup { grid-template-columns:1fr!important; } } ...

  10. [转]三分钟学会.NET Core Jwt 策略授权认证

    [转]三分钟学会.NET Core Jwt 策略授权认证 一.前言# 大家好我又回来了,前几天讲过一个关于Jwt的身份验证最简单的案例,但是功能还是不够强大,不适用于真正的项目,是的,在真正面对复杂而 ...