<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. cf1131D

    题意:总共有n+m个点,每一个点都有一个val,给出一个n*m的矩阵,矩阵中第i行第j列的为=,表示 i 点 和 j+n个点的值相等,<表示i 点比j+n个点的值小,> 刚好相反 要求用最 ...

  2. layui 弹出层layer中from初始化 ,并在btn中返回from.data

    1.弹出对话框 layer.open() 来初始化弹层 // 监听添加操作 $(".data-add-btn").on("click", function () ...

  3. PHP0005:PHP基础--函数

  4. Codeforces Round #622(Div 2)C2. Skyscrapers (hard version)

    题目链接 : C2. Skyscrapers (hard version) 题目描述 : 与上一道题类似,只是数据范围变大, 5e5, 如果用我们原来的方法,铁定是超时的. 考察点 : 单调栈,贪心, ...

  5. LeetCode30 Hard 查找所有子串

    本文始发于个人公众号:TechFlow,原创不易,求个关注 链接 Substring with Concatenation of All Words 难度 Hard 描述 给定一个字符串s作为母串,和 ...

  6. JavaScirpt 一些基本知识

    var name = prompt('请输入你的姓名:'); //弹出输入框 var age = prompt('请输入你的年龄'); var sex = prompt('请输入你的性别'); 检测字 ...

  7. ng-模板语法

    插值 文本绑定 <p>Message: {{ msg }}</p> <p [innerHTML]="msg"></p> 属性绑定 & ...

  8. tensorflow张量限幅

    本篇内容有clip_by_value.clip_by_norm.gradient clipping 1.tf.clip_by_value a = tf.range(10) print(a) # if ...

  9. 修改Ubuntu的apt-get源为国内镜像源的方法

    1.原文件备份 sudo cp /etc/apt/sources.list /etc/apt/sources.list.bak 2.编辑源列表文件 sudo vim /etc/apt/sources. ...

  10. 对于tensorflow中的gradient_override_map函数的理解

    # #############添加############## def binarize(self, x): """ Clip and binarize tensor u ...