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

图片描述

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

回答:

大概思路如下:

<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不用

回答:

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

回答:

https://blog.csdn.net/qq_3781...

回答:

楼主解决了吗?请问怎么解决的?

以上是 【element-ui】vue element-ui table 按回车跳到下一个input 的全部内容, 来源链接: utcz.com/a/151934.html

回到顶部