满口金牙
2021-11-26 19:28
采纳率: 88.2%
浏览 46
已结题

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


<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){} 函数

  • 写回答
  • 好问题 提建议
  • 追加酬金
  • 关注问题
  • 收藏
  • 邀请回答

1条回答 默认 最新

  • greatofdream 2021-11-26 22:01
    已采纳
    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>
    
    评论
    解决 无用
    打赏 举报

相关推荐 更多相似问题