el-tabel嵌套input输入框，回车键跳转同一列下一行

ref方式

<template>
  <div>
    <el-table :data="tableData">
      <el-table-column label="名称">
        <template slot-scope="scope">
          <el-input
            v-model="scope.row.name"
            :ref="`name${scope.$index}`"
            @keyup.enter.native="focusNextInput(scope.$index, 'name')"
          ></el-input>
        </template>
      </el-table-column>
      <el-table-column label="张三">
        <template slot-scope="scope">
          <el-input
            v-model="scope.row.age"
            :ref="`age${scope.$index}`"
            @keyup.enter.native="focusNextInput(scope.$index, 'age')"
          ></el-input>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        { name: '张三', age: 20 },
        { name: '李四', age: 25 },
        { name: '王五', age: 30 }
      ],
      nameRefs: [],
      ageRefs: []
    }
  },
  methods: {
    focusNextInput(index, type) {
      console.log(this.tableData.length - 1)
      console.log(`${index + 1}`)
      let aaa = ''
      if (this.tableData.length - 1 == index) {
        aaa = `${type}0`
      } else {
        aaa = `${type}${index + 1}`
      }
      this.$nextTick(() => {
        this.$refs[aaa].focus()
      })
    }
  }
}
</script>

data-rowindex方式

<template>
  <div>
    <el-table :data="tableData">
      <el-table-column label="名称">
        <template slot-scope="scope">
          <el-input
            v-model="scope.row.name"
            :data-rowindex="'name' + scope.$index"
            @keyup.enter.native="focusNextInput(scope.$index + 1, 'name')"
          ></el-input>
        </template>
      </el-table-column>

      <el-table-column label="张三">
        <template slot-scope="scope">
          <el-input
            v-model="scope.row.age"
            :data-rowindex="'age' + scope.$index"
            @keyup.enter.native="focusNextInput(scope.$index + 1, 'age')"
          ></el-input>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        { name: '张三', age: 20 },
        { name: '李四', age: 25 },
        { name: '王五', age: 30 }
      ]
    }
  },
  methods: {
    focusNextInput(rowIndex, columnName) {
      console.log(rowIndex)
      this.$nextTick(() => {
        let nextInput = null
        if (rowIndex == this.tableData.length) {
          nextInput = document.querySelector(`[data-rowindex="${columnName}0"]`)
        } else {
          nextInput = document.querySelector(
            `[data-rowindex="${columnName}${rowIndex}"]`
          )
        }
        if (nextInput) {
          nextInput.focus()
        }
      })
    }
  }
}
</script>