vue表格点击变成输入框，光标移动输入框变文本框

可以通过以下步骤实现：

1. 在表格中的需要编辑的单元格内添加一个点击事件，例如：

<template>
  <table>
    <tr v-for="item in list">
      <td @click="edit(item)">{{ item.name }}</td>
      <td>{{ item.age }}</td>
    </tr>
  </table>
</template>

2. 在`edit`方法中，将当前单元格的内容保存到`editing`变量中，并将`editingIndex`变量设置为当前单元格的索引：

export default {
  data() {
    return {
      list: [
        { name: 'Alice', age: 20 },
        { name: 'Bob', age: 25 },
        { name: 'Charlie', age: 30 }
      ],
      editing: '',
      editingIndex: -1
    }
  },
  methods: {
    edit(item) {
      this.editing = item.name
      this.editingIndex = this.list.indexOf(item)
    }
  }
}

3. 将当前单元格的内容替换为一个输入框，并将焦点设置到输入框中：

<td @click="edit(item)">
  <input
    v-if="editingIndex === list.indexOf(item)"
    type="text"
    v-model="editing"
    @blur="save(item)"
    @keyup.enter="save(item)"
  >
  <span v-else>{{ item.name }}</span>
</td>

4. 当输入框失去焦点或按下回车键时，将输入框中的内容保存到当前单元格中，并将`editingIndex`变量重置：

export default {
  // ...
  methods: {
    // ...
    save(item) {
      if (this.editing !== '') {
        item.name = this.editing
      }
      this.editing = ''
      this.editingIndex = -1
    }
  }
}