vue 表格点编辑 button , 怎么让光标跳到本行的某个 input 框

Question

<template>
    <el-table  :data="searchResult">
        <!-- 自动生成的列,fieldList为包含列名的数组,[['中文字段名','英文字段名'],[]...],用以自动生成列,子数组[0]是中文字段名 ,子数组[1]是key--->
        <el-table-column align='center' v-for="item in fieldList" :key="item" :label= "item[0]">
            <template #default="scope">
              <el-input :ref = "e=>{editFocus[item[1]]=e}" v-show="scope.row.show" v-model="scope.row[item[1]]"></el-input>
              <span v-show="!scope.row.show">{{scope.row[item[1]]}}</span>
            </template>
        </el-table-column>
        <!-------固定列--------------编辑按钮--------------------------------------------------------->
        <el-table-column  label="操 作" width="260">
          <template #default="scope">
            <el-button @click="scope.row.show =true;moveFocus(scope.$index, scope.row)" >
              编辑</el-button>
          </template>
        </el-table-column>
    </el-table>
</template>
<script>
import { ref, reactive, nextTick } from 'vue'
export default {
  name: 'Category',
  setup(props) {
    const editFocus = ref([])
    // 表格数据
    const searchResult = [
      {'id':1,'category':'家电','name':'电视','date':'2021-1-1','show':false},
      {'id':2,'category':'家电','name':'洗衣机','date':'2021-1-1','show':false}
      ]
    // 列名的数组,用来自动生成列
    const fieldLIst =[['编号','id'],['分类','category'],['名称','name'],['日期','date']]
    function moveFocus(index,row){
      // 当点编辑按钮时怎么把 光标 自动跳到当前行的  id列的 input 框
    }
    return {
      editFocus,
      searchResult,
      fieldLIst,
      moveFocus
    }
  }
} 
</script>

会的帮写完 function moveFocus(index,row){} 函数

Answer 1

moveFocus(id){
        console.log("test"+id)
        this.$refs[`table${id}id`].focus()
  
    }

template改成

<el-table  :data="searchResult">
        <el-table-column align='center' v-for="item in fieldList"  :label="item[0]">
            <template #default="scope">
              <el-input  v-show="scope.row.show" :ref="'table'+scope.row.id+item[1]" v-model="scope.row[item[1]]"></el-input>
              <span v-show="!scope.row.show">{{scope.row[item[1]]}}</span>
            </template>

        </el-table-column>

        <!-------固定列--------------编辑按钮--------------------------------------------------------->

        <el-table-column  label="操 作" width="260">

          <template #default="scope">

            <el-button @click="scope.row.show =true;moveFocus(scope.row.id)" >

              编辑</el-button>

          </template>

        </el-table-column>

    </el-table>