vue3+Element-Plus+js 解决表格按住上下左右获取焦点

最新推荐文章于 2025-10-24 16:42:56 发布

原创

最新推荐文章于 2025-10-24 16:42:56 发布 · 1.8k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #vue.js

问题:

一个el-table表格里面每一个框框都是一个el-input 然后给输入框v-model绑定值,绑定完成之后我们会发现有这么一个问题,不能按住上下左右键盘来移动,这时候我们操作就来了,效果如下:

步骤走起:代码不做解释,开发时间久了就懂了

import { nextTick } from 'vue'
export class DirectionKey {
    constructor(str, code) {
        let _that = this
        str.split('_').forEach(item => {
            let o = item.split('=')
            _that[o[0]] = o[1]
        })
        if (code === 38) {
            this.previousLine()
        }
        if (code === 40) {
            this.nextLine()
        }
        if (code === 39) {
            this.next()
        }
        if (code === 37) {
            this.previous()
        }
    }
    next(x = this.x, y = this.y) {
        this.move({ x: ++x, y })
    }

    previous(x = this.x, y = this.y) {
        this.move({ x: --x, y })