vue element-ui table 按回车跳到下一个input

打代码像cxk
  • 35

图片描述

element-table编辑时可以用tab跳到下一个input或者select,然后获取焦点, 现在想按enter也有tab的效果
回复
阅读 5.9k
5 个回答

大概思路如下:

<template slot-scope="scope">
// 给当前input加上ref
<el-input 
  :ref="scope.row.id" 
  v-model.number="scope.row.qcsl"
  @keydown.native="nextFocus(scope.row, scope.$index, $event)"
></el-input>
</template>

methods: {
    nextFocus(row, index, e){
     e.target.blur() // 或者this.$refs[row.id].blur()
     // TODO  需要对最后一个input做判断
     ...
     this.$refs[Object.keys(this.$refs)[index + 1]].focus();
    }

}

以上是简单版,如果要加上select,建议自己封装select,可以封装一个自定义指令,思路和上面差不多,也是通过refs或者通过设置相同class去跳转到下一个

自找麻烦 有Tab不用

陈龙
  • 2
新手上路,请多包涵

为每一个input或者select设置ref,并添加enter键盘事件,写逻辑调用原生的focus即可实现

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
宣传栏