vue.js table编辑

<template>
  <table>
    <tr v-for="(row, rowIndex) in tableData" :key="rowIndex">
      <td v-for="(cell, cellIndex) in row" :key="cellIndex">
        <span v-if="!editingCell" @click="editCell(rowIndex, cellIndex)">{{ cell }}</span>
        <input v-else v-model="tableData[rowIndex][cellIndex]" @blur="finishEdit" />
      </td>
    </tr>
  </table>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    const tableData = ref([
      ['John', 'Doe', 'john@example.com'],
      ['Jane', 'Doe', 'jane@example.com']
    ]);
    const editingCell = ref(null);

    function editCell(rowIndex, cellIndex) {
      editingCell.value = { rowIndex, cellIndex };
    }

    function finishEdit() {
      editingCell.value = null;
    }

    return {
      tableData,
      editingCell,
      editCell,
      finishEdit
    };
  }
};
</script>