vue3+ElementPlus 表单编辑与查看模式切换的应用

 <el-table-column label="属性值名称">
  <template #="{ row, $index }">
 <el-input
   :ref="(vc: any) => inputArr[$index] = vc"
   v-if="row.flag"
   @blur="toLook(row, $index)"
   size="small"
   placeholder="请你输入属性值名称"
   v-model="row.valueName">
</el-input>
    
              
   <div v-else @click="toEdit(row, $index)">{{ row.valueName }}</div>
  </template>
</el-table-column>

const toLook = (row: AttrValue, $index: number) => {
    ...
    row.flag = false 
}

const toEdit = (row: AttrValue, $index: number) => {
  row.flag = true
  //nextTick:响应式数据发生变化,获取更新的DOM(组件实例)
  nextTick(() => {
    inputArr.value[$index].focus()
  })
}