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