Vue:Element组件el-input输入框支持上下左右回车键跳转

页面大概长这样

1.  
   <el-table :data="items" style="width: 100%" max-height="240" class="m-t-10">
2.  
   <el-table-column prop="lineNo" label="序号" width="50">
3.  
   <template slot-scope="scope">
4.  
   {{ scope.$index 1 }}
5.  
   </template>
6.  
   </el-table-column>
7.  
   <el-table-column prop="gName" label="商品名称" />
8.  
   <el-table-column label="箱数">
9.  
   <template slot-scope="scope">
10.  
    <div v-if="form.goods[scope.$index]">
11.  
    <el-input
12.  
    :ref="'cartonQty' scope.$index"
13.  
    v-model="form.goods[scope.$index].cartonQty"
14.  
    @keyup.native="moveFocus($event, scope.$index, 'cartonQty')"
15.  
    />
16.  
    </div>
17.  
    </template>
18.  
    </el-table-column>
19.  
    <el-table-column prop="grossWeight" label="毛重">
20.  
    <template slot-scope="scope">
21.  
    <div v-if="form.goods[scope.$index]">
22.  
    <el-input
23.  
    :ref="'grossWeight' scope.$index"
24.  
    v-model="form.goods[scope.$index].grossWeight"
25.  
    @keyup.native="moveFocus($event, scope.$index, 'grossWeight')"
26.  
    />
27.  
    </div>
28.  
    </template>
29.  
    </el-table-column>
30.  
    <el-table-column prop="netWeight" label="净重">
31.  
    <template slot-scope="scope">
32.  
    <div v-if="form.goods[scope.$index]">
33.  
    <el-input
34.  
    :ref="'netWeight' scope.$index"
35.  
    v-model="form.goods[scope.$index].netWeight"
36.  
    @keyup.native="moveFocus($event, scope.$index, 'netWeight')"
37.  
    />
38.  
    </div>
39.  
    </template>
40.  
    </el-table-column>
41.  
    </el-table>

实现的js代码

1.  
   moveFocus(event, index, key) {
2.  
   console.log(key, index)
3.  
    
4.  
   // cartonQty0 grossWeight0 netWeight0
5.  
   // cartonQty1 grossWeight1 netWeight1
6.  
   // cartonQty2 grossWeight2 netWeight2
7.  
    
8.  
   const keyfield = ['cartonQty', 'grossWeight', 'netWeight']
9.  
    
10.  
    if (event.keyCode === 13) { // 回车
11.  
    if (index === this.declItems.length - 1 && key === keyfield[keyfield.length - 1]) { // 最后一行最后一个
12.  
    return
13.  
    }
14.  
     
15.  
    this.$refs[key index].blur()
16.  
    if (key === keyfield[keyfield.length - 1]) { // 当前行最后一个,跳转下一行第一个
17.  
    this.$refs[keyfield[0] (index 1)].focus()
18.  
    } else { // 跳转下一个
19.  
    const nextkeyindex = keyfield.findIndex(k => k === key) 1
20.  
    this.$nextTick(() => {
21.  
    this.$refs[keyfield[nextkeyindex] index].focus()
22.  
    })
23.  
    }
24.  
    }
25.  
     
26.  
    // 向上 =38
27.  
    if (event.keyCode === 38) {
28.  
    console.log('向上')
29.  
    if (index === 0) { // 第一行
30.  
    console.log('第一行无法向上')
31.  
    return
32.  
    }
33.  
    this.$refs[key index].blur()
34.  
    this.$nextTick(() => {
35.  
    this.$refs[key (index - 1)].focus()
36.  
    })
37.  
    }
38.  
     
39.  
    // 下 = 40
40.  
    if (event.keyCode === 40) {
41.  
    console.log('向下')
42.  
    if (index === this.declItems.length - 1) { // 最后一行
43.  
    console.log('最后一行无法向下')
44.  
    return
45.  
    }
46.  
    this.$refs[key index].blur()
47.  
    this.$nextTick(() => {
48.  
    this.$refs[key (index 1)].focus()
49.  
    })
50.  
    }
51.  
     
52.  
    // 左 = 37
53.  
    if (event.keyCode === 37) {
54.  
    console.log('向左')
55.  
    if (index === 0 && key === keyfield[0]) { // 第一行第一个
56.  
    console.log('第一行第一个无法向左')
57.  
    return
58.  
    }
59.  
    this.$refs[key index].blur()
60.  
    if (key === keyfield[0]) { // 当前行第一个,跳转上一行最后一个
61.  
    this.$refs[keyfield[keyfield.length - 1] (index - 1)].focus()
62.  
    } else { // 跳转上一个
63.  
    const prevkeyindex = keyfield.findIndex(k => k === key) - 1
64.  
    this.$nextTick(() => {
65.  
    this.$refs[keyfield[prevkeyindex] index].focus()
66.  
    })
67.  
    }
68.  
    }
69.  
     
70.  
    // 右 = 39
71.  
    if (event.keyCode === 39) {
72.  
    console.log('向右')
73.  
    if (index === this.declItems.length - 1 && key === keyfield[keyfield.length - 1]) { // 最后一行最后一个
74.  
    console.log('最后一行最后一个无法向左')
75.  
    return
76.  
    }
77.  
    this.$refs[key index].blur()
78.  
    if (key === keyfield[keyfield.length - 1]) { // 当前行最后一个,跳转下一行第一个
79.  
    this.$refs[keyfield[0] (index 1)].focus()
80.  
    } else { // 跳转下一个
81.  
    const nextkeyindex = keyfield.findIndex(k => k === key) 1
82.  
    this.$nextTick(() => {
83.  
    this.$refs[keyfield[nextkeyindex] index].focus()
84.  
    })
85.  
    }
86.  
    }
87.  
    },

这样就完成了

这篇好文章是转载于：学新通技术网