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

你可以使用 Vue 的指令 `v-if` 和 `v-show` 来实现表格点击变为输入框，和光标移动输入框变为文本框的功能。

首先，你需要在表格中添加一个点击事件监听器，将其绑定到一个方法上。在这个方法中，你可以使用 `v-if` 指令来切换表格单元格和输入框的显示状态。当表格单元格被点击时，将其隐藏并显示输入框；当输入框失去焦点时，将其隐藏并显示表格单元格。

接下来，你需要在输入框中添加一个输入事件监听器，将其绑定到另一个方法上。在这个方法中，你可以使用 `v-show` 指令来切换输入框和文本框的显示状态。当用户在输入框中开始输入时，将其隐藏并显示文本框；当用户在文本框中点击时，将其隐藏并显示输入框。

下面是一个简单的示例代码：

<template>
  <table>
    <tbody>
      <tr>
        <td v-if="!editing" @click="startEditing">{{ value }}</td>
        <td v-show="editing"><input type="text" v-model="inputValue" @blur="stopEditing" /></td>
      </tr>
    </tbody>
  </table>
</template>

<script>
export default {
  data() {
    return {
      editing: false,
      value: '点击输入',
      inputValue: '',
    };
  },
  methods: {
    startEditing() {
      this.editing = true;
    },
    stopEditing() {
      this.editing = false;
      this.value = this.inputValue;
    },
  },
};
</script>

在这个示例中，我们首先定义了一个 `editing` 变量来表示当前单元格是处于编辑状态还是非编辑状态。在单元格被点击时，我们将 `editing` 设置为 `true`，从而显示输入框。在输入框失去焦点时，我们将 `editing` 设置为 `false`，同时将输入框中的值赋给 `value`，从而显示文本框。

注意，在这个示例中，我们使用了 `v-model` 指令来实现响应式数据绑定。这样，当用户在输入框中输入内容时，`inputValue` 的值会自动更新，而当我们将 `inputValue` 的值赋给 `value` 时，`value` 的值也会自动更新。