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

页面大概长这样

<el-table :data="items" style="width: 100%" max-height="240" class="m-t-10">
  <el-table-column prop="lineNo" label="序号" width="50">
    <template slot-scope="scope">
      {{ scope.$index + 1 }}
    </template>
  </el-table-column>
  <el-table-column prop="gName" label="商品名称" />
  <el-table-column label="箱数">
    <template slot-scope="scope">
      <div v-if="form.goods[scope.$index]">
        <el-input
          :ref="'cartonQty'+scope.$index"
          v-model="form.goods[scope.$index].cartonQty"
          @keyup.native="moveFocus($event, scope.$index, 'cartonQty')"
        />
      </div>
    </template>
  </el-table-column>
  <el-table-column prop="grossWeight" label="毛重">
    <template slot-scope="scope">
      <div v-if="form.goods[scope.$index]">
        <el-input
          :ref="'grossWeight'+scope.$index"
          v-model="form.goods[scope.$index].grossWeight"
          @keyup.native="moveFocus($event, scope.$index, 'grossWeight')"
        />
      </div>
    </template>
  </el-table-column>
  <el-table-column prop="netWeight" label="净重">
    <template slot-scope="scope">
      <div v-if="form.goods[scope.$index]">
        <el-input
          :ref="'netWeight'+scope.$index"
          v-model="form.goods[scope.$index].netWeight"
          @keyup.native="moveFocus($event, scope.$index, 'netWeight')"
        />
      </div>
    </template>
  </el-table-column>
</el-table>

实现的js代码

moveFocus(event, index, key) {
  console.log(key, index)

  // cartonQty0 grossWeight0 netWeight0
  // cartonQty1 grossWeight1 netWeight1
  // cartonQty2 grossWeight2 netWeight2

  const keyfield = ['cartonQty', 'grossWeight', 'netWeight']

  if (event.keyCode === 13) { // 回车
    if (index === this.declItems.length - 1 && key === keyfield[keyfield.length - 1]) { // 最后一行最后一个
      return
    }

    this.$refs[key + index].blur()
    if (key === keyfield[keyfield.length - 1]) { // 当前行最后一个,跳转下一行第一个
      this.$refs[keyfield[0] + (index + 1)].focus()
    } else { // 跳转下一个
      const nextkeyindex = keyfield.findIndex(k => k === key) + 1
      this.$nextTick(() => {
        this.$refs[keyfield[nextkeyindex] + index].focus()
      })
    }
  }

  // 向上 =38
  if (event.keyCode === 38) {
    console.log('向上')
    if (index === 0) { // 第一行
      console.log('第一行无法向上')
      return
    }
    this.$refs[key + index].blur()
    this.$nextTick(() => {
      this.$refs[key + (index - 1)].focus()
    })
  }

  // 下 = 40
  if (event.keyCode === 40) {
    console.log('向下')
    if (index === this.declItems.length - 1) { // 最后一行
      console.log('最后一行无法向下')
      return
    }
    this.$refs[key + index].blur()
    this.$nextTick(() => {
      this.$refs[key + (index + 1)].focus()
    })
  }

  // 左 = 37
  if (event.keyCode === 37) {
    console.log('向左')
    if (index === 0 && key === keyfield[0]) { // 第一行第一个
      console.log('第一行第一个无法向左')
      return
    }
    this.$refs[key + index].blur()
    if (key === keyfield[0]) { // 当前行第一个,跳转上一行最后一个
      this.$refs[keyfield[keyfield.length - 1] + (index - 1)].focus()
    } else { // 跳转上一个
      const prevkeyindex = keyfield.findIndex(k => k === key) - 1
      this.$nextTick(() => {
        this.$refs[keyfield[prevkeyindex] + index].focus()
      })
    }
  }

  // 右 = 39
  if (event.keyCode === 39) {
    console.log('向右')
    if (index === this.declItems.length - 1 && key === keyfield[keyfield.length - 1]) { // 最后一行最后一个
      console.log('最后一行最后一个无法向左')
      return
    }
    this.$refs[key + index].blur()
    if (key === keyfield[keyfield.length - 1]) { // 当前行最后一个,跳转下一行第一个
      this.$refs[keyfield[0] + (index + 1)].focus()
    } else { // 跳转下一个
      const nextkeyindex = keyfield.findIndex(k => k === key) + 1
      this.$nextTick(() => {
        this.$refs[keyfield[nextkeyindex] + index].focus()
      })
    }
  }
},

这样就完成了