vue中使用箭头控制input的焦点 适合操作大量表格填写

首先老样子 下载包

yarn add vue-direction-key

然后在全局引用或者组件 都行

// 引入控制input焦点插件
import Direction from 'vue-direction-key'
Vue.use(Direction)

然后是在组件中填写

<el-table
                    :data="tableData"
                    style="width: 100%">
                    <el-table-column
                        prop="code"
                        label="生物编码"
                        width="180">
                        <template slot-scope="scope">
                            <span>{{scope.row.code}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column
                        prop="oldEar"
                        label="原耳号"
                        width="180">
                        <template slot-scope="scope">
                            <span>{{scope.row.oldEar}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column
                        prop="area"
                        label="场地"
                        width="180">
                        <template slot-scope="scope">
                            <span>{{scope.row.area}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column
                        prop="newEar"
                        label="现耳号"
                        width="180">
                        <template slot-scope="scope">
                            <el-input v-model="scope.row.newEar" placeholder="请输入内容" v-direction="{x: 1, y: scope.$index}" ></el-input>
                        </template>
                    </el-table-column>
                    <el-table-column
                        prop="firstTimeWeight"
                        label="初生重"
                        width="180">
                        <template slot-scope="scope">
                            <el-input v-model="scope.row.firstTimeWeight" placeholder="请输入内容" v-direction="{x: 2, y: scope.$index}"></el-input>
                        </template>
                    </el-table-column>
                    <el-table-column
                        prop="motherEar"
                        label="母系普通耳标"
                        width="180">
                        <template slot-scope="scope">
                            <el-input v-model="scope.row.motherEar" placeholder="请输入内容" v-direction="{x: 3, y: scope.$index}"></el-input>
                        </template>
                    </el-table-column>
                    <el-table-column
                        prop="fatherEar"
                        label="父系普通耳标"
                        width="180">
                        <template slot-scope="scope">
                            <el-input v-model="scope.row.fatherEar" placeholder="请输入内容" v-direction="{x: 4, y: scope.$index}"></el-input>
                        </template>
                    </el-table-column>
                    <el-table-column
                        prop="allNum"
                        label="同胞数">
                        <template slot-scope="scope">
                            <el-input v-model="scope.row.allNum" placeholder="请输入内容" v-direction="{x: 5, y: scope.$index}"></el-input>
                        </template>
                    </el-table-column>
                    <el-table-column
                        prop="grace"
                        label="生物等级">
                        <template slot-scope="scope">
                            <el-select v-model="scope.row.grace" placeholder="请选择">
                                <el-option
                                    v-for="items in scope.row.nameGrace"
                                    :key="items.id"
                                    :label="items.name"
                                    :value="items.name">
                                </el-option>
                            </el-select>
                        </template>
                    </el-table-column>
                </el-table>

在created()中写

const direction = this.$getDirection()
        direction.on('keyup', function(e, val) {
            console.log(val)
            if (e.keyCode === 39) {
                direction.next()
            }
            if (e.keyCode === 37) {
                direction.previous()
            }
            if (e.keyCode === 38) {
                direction.previousLine()
            }
            if (e.keyCode === 40) {
                direction.nextLine()
            }
        })

可以随便写什么按钮 只要对应的keyCode
再附带数据

//纯手工mock数据
tableData: [{
                code: '001',
                date: '2016-05-04',
                oldEar: '王小虎1',
                area: '上海市普陀区金沙江路 1519 弄',
                newEar: '王小龙6',
                grace: '',
                firstTimeWeight: 300,
                motherEar: 'm002341',
                fatherEar: 'f001',
                allNum: 8,
                nameGrace: [{
                    id: 1,
                    name: '小毛'
                }, {
                    id: 5,
                    name: 'huazi'
                }]
            }, {
                code: '002',
                date: '2016-05-06',
                oldEar: '王小虎2',
                area: '上海市普陀区金沙江路 1520 弄',
                newEar: '王小龙7',
                grace: '',
                firstTimeWeight: 1,
                motherEar: 'm001',
                fatherEar: 'f02301',
                allNum: 134,
                nameGrace: [{
                    id: 2,
                    name: '小李'
                }]
            }, {
                code: '003',
                date: '2016-05-08',
                oldEar: '王小虎3',
                area: '上海市普陀区金沙江路 1521 弄',
                newEar: '王小龙8',
                grace: '',
                firstTimeWeight: 12314,
                motherEar: 'm02201',
                fatherEar: 'f02301',
                allNum: 2,
                nameGrace: [{
                    id: 3,
                    name: '小冲'
                }]
            }, {
                code: '004',
                date: '2016-05-10',
                oldEar: '王小虎4',
                area: '上海市普陀区金沙江路 1522 弄',
                newEar: '王小龙9',
                grace: '',
                firstTimeWeight: 188,
                motherEar: 'm01101',
                fatherEar: 'f0401',
                allNum: 82,
                nameGrace: [{
                    id: 4,
                    name: '小点'
                }]
            }],
            // mock结束

焦点只会在input里面跳转