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

可以使用 Vue.js 的指令 `v-if` 和 `v-show` 结合使用来实现这个功能。

首先，在表格中添加一个输入框，并给它一个 `v-show` 指令。这样一开始它是隐藏的，只有当用户点击某一行时，才会显示出来。

然后，在单元格上添加一个点击事件，当单元格被点击时，将输入框显示出来，并将光标自动聚焦到输入框中。这可以通过在单元格上添加 `@click` 事件来实现。

最后，当用户从输入框移开时，将输入框隐藏，并将输入框中的值显示在表格中。这可以在输入框上添加 `@blur` 事件来实现。

以下是示例代码：

<template>
  <table>
    <thead>
      <tr>
        <th>姓名</th>
        <th>年龄</th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="(item, index) in list" :key="index">
        <td @click="edit(index)">{{editingIndex === index ? '' : item.name}}</td>
        <td v-show="editingIndex === index">
          <input type="text" v-model="list[index].name" @blur="save(index)" ref="input" />
        </td>
        <td>{{item.age}}</td>
      </tr>
    </tbody>
  </table>
</template>

<script>
export default {
  data() {
    return {
      list: [
        { name: '张三', age: 18 },
        { name: '李四', age: 20 },
        { name: '王五', age: 22 },
      ],
      editingIndex: -1,
    }
  },
  methods: {
    edit(index) {
      this.editingIndex = index
      this.$nextTick(() => {
        this.$refs.input.focus()
      })
    },
    save(index) {
      this.editingIndex = -1
    },
  },
}
</script>

在这个示例中，我们使用 `editingIndex` 变量来记录当前正在编辑的行的索引。当用户点击某一行时，我们将 `editingIndex` 设置为该行的索引，并将输入框显示出来。当用户从输入框移开时，我们将 `editingIndex` 设置为 -1，将输入框隐藏，并将输入框中的值保存到数据中。在 `edit` 方法中，我们使用 `this.$nextTick` 来确保在输入框显示出来后再将光标聚焦到输入框中。