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

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>
    
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论

报告相同问题?

问题事件

  • 系统已结题 12月5日
  • 已采纳回答 11月27日
  • 赞助了问题酬金 11月26日
  • 创建了问题 11月26日