element table 实现input输入框回车键跳入下一行，自动获取焦点

墨蓝 2022-09-10 07:18 463阅读 0赞

element table 实现input输入框回车键跳入下一行，自动获取焦点

![cb4ee2ba83caca7b1fafb605bd8851f8.png][]

使用动态绑定ref  this.$refs获取的是一个所有id组成的对象。

使用Object.keys(this.$refs) //遍历这个对象，返回的是一个包含所有id组成的一个数组，让当前的index+1获取到下一个input的id.

再根据这个id 使用this.$refs获取到这个input 使用focus

<template slot-scope="scope">
                    <el-input
                      class="year-leiji"
                      :ref='scope.row.id'
                      autocomplete="off"
                      v-model.number="scope.row.ljje"
                      @keydown.native="validateCounts(scope.row,scope.$index, $event)"
                    ></el-input>
                  </template>

validateCounts(row,index, e) {
          
          const val = e.target.value;
          var keyCode = e.keyCode || e.which || e.charCode;
          if(keyCode=== 13) {
            this.submitYearLeiJi(row.id, val)
            this.$refs[row.id].blur()
            if(Object.keys(this.$refs).length-1 === index) {
                index = -1
            }
            this.$refs[Object.keys(this.$refs)[index + 1]].focus();
          }
        }

[cb4ee2ba83caca7b1fafb605bd8851f8.png]: /images/20220829/eba73e3583454d829ee6631c5a2d314a.png

发表评论取消回复

表情：

评论列表（有 0 条评论，463人围观）

还没有评论，来说两句吧...

相关阅读

相关 Vue之input框自动获取焦点+内容形式修改

前言在项目开发的过程中需要用到input框，限定input框中只能输入数字，当界面一显示的时候input框获得焦点，并调起手机上的数字框。实现方式 ...

布满荆棘的人生/ 2024年04月19日 10:42/ 0 赞/ 80 阅读

相关 uniapp弹框uni-popup中input自动获取焦点实现

<uni-popup :show="showPopupBottom" :type="popType" @hidePopup="hidePo

港控/mmm°/ 2023年08月17日 15:54/ 0 赞/ 152 阅读

相关 el-table 设置当前行，按回车键自动选中下一行

<el-input id="insertInfoBcbd" v-model="insertInfoBcbd"></el-input> <el-table ref

妖狐艹你老母/ 2023年07月10日 15:36/ 0 赞/ 23 阅读

相关 element input 自适应_vue自定义指令实现element中input 自动获取焦点

项目的一个需求，记录分享一下，希望帮助别人少踩坑。先简单说一下需求：左侧是tree结构，右侧是表单，实现功能就是点击tree节点，对应的右侧input获取焦点 ![Image

不念不忘少年蓝@/ 2022年12月31日 15:27/ 0 赞/ 250 阅读

相关 Element el-input 输入框详解

[点此查看全部文字教程、视频教程、源代码][Link 1] 本文目录 1. 用途 2. 输入框 2.1 输入框基本功能 2.2 显

待我称王封你为后i/ 2022年10月26日 12:51/ 0 赞/ 762 阅读

相关输入文本框，焦点自动跳转下一个文本框

![Center][] $(".yhjuan").keydown(function(event)\{ var num=event.keyCode;

绝地灬酷狼/ 2022年09月21日 11:38/ 0 赞/ 193 阅读

相关 element table 实现input输入框回车键跳入下一行，自动获取焦点

element table 实现input输入框回车键跳入下一行，自动获取焦点 ![cb4ee2ba83caca7b1fafb605bd8851f8.png][] 使用动态

墨蓝/ 2022年09月10日 07:18/ 0 赞/ 464 阅读

相关 vue通过自定义指令使input输入框自动获取焦点

在部分开发场景中我们需要input输入框自动获取焦点我们可以通过以下代码实现使用自定义指令 v-focus <template> <el

我就是我/ 2022年08月28日 12:44/ 0 赞/ 213 阅读

相关 vue input自动获取焦点

方法一这个方法适合vue插件，id比较好绑定 // html 部分 <input type="text" id="name">

逃离我推掉我的手/ 2022年03月16日 14:54/ 0 赞/ 406 阅读

相关 Vue中input文本输入框自动获得鼠标焦点

this.$nextTick(_ => { this.$refs.saveTagInput.$refs.input.focus() }) saveT

Love The Way You Lie/ 2021年07月25日 18:19/ 0 赞/ 962 阅读