vue3实现表格单元格可编辑

在Vue 3中，您可以使用组件和事件处理来实现可编辑的表格单元格。以下是一个简单的例子：

<template>
  <table>
    <tr v-for="(row, rowIndex) in rows" :key="rowIndex">
      <td v-for="(cell, cellIndex) in row" :key="cellIndex">
        <div v-if="editIndex === rowIndex && editField === cellIndex">
          <input
            type="text"
            :value="cell"
            @input="updateValue($event.target.value, rowIndex, cellIndex)"
            @blur="stopEdit(rowIndex, cellIndex)"
          />
        </div>
        <div v-else @click="startEdit(rowIndex, cellIndex)">
          {{ cell }}
        </div>
      </td>
    </tr>
  </table>
</template>
 
<script>
import { ref } from 'vue';
 
export default {
  setup() {
    const rows = ref([
      ['Row 1 Cell 1', 'Row 1 Cell 2'],
      ['Row 2 Cell 1', 'Row 2 Cell 2'],
    ]);
    const editIndex = ref(null);
    const editField = ref(null);
 
    function startEdit(rowIndex, cellIndex) {
      editIndex.value = rowIndex;
      editField.value = cellIndex;
    }
 
    function stopEdit() {
      editIndex.value = null;
      editField.value = null;
    }
 
    function updateValue(value, rowIndex, cellIndex) {
      rows.value[rowIndex][cellIndex] = value;
    }
 
    return {
      rows,
      editIndex,
      editField,
      startEdit,
      stopEdit,
      updateValue,
    };
  },
};
</script>

在这个例子中，我们使用了一个二维数组 rows 来表示表格的行和单元格。editIndex 和 editField 用于跟踪当前正在编辑的单元格。startEdit 方法设置编辑状态，stopEdit 方法停止编辑，updateValue 方法在输入值改变时更新单元格的值。

在模板中，我们有一个 v-for 循环来遍历 rows 数组，并为每个单元格创建一个 div 容器。如果单元格是当前可编辑的，我们会显示一个 input 元素，否则显示单元格的文本内容。单元格被点击时，会触发 startEdit 方法，该方法设置当前单元格为可编辑状态。编辑完成后，输入框会失去焦点，触发 blur 事件，调用 stopEdit 方法结束编辑状态。