vue3实现可编辑表格

<template>
  <div>
    <table>
      <thead>
        <tr>
          <th>Name</th>
          <th>Email</th>
          <th>Action</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(row, index) in rows" :key="index">
          <td>
            <input v-model="row.name" :disabled="!row.editable" />
          </td>
          <td>
            <input v-model="row.email" :disabled="!row.editable" />
          </td>
          <td>
            <button @click="editRow(index)" v-if="!row.editable">Edit</button>
            <button @click="saveRow(index)" v-if="row.editable">Save</button>
            <button @click="deleteRow(index)">Delete</button>
          </td>
        </tr>
      </tbody>
    </table>
    <button @click="addRow">Add Row</button>
  </div>
</template>

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

export default {
  setup() {
    const rows = ref([
      { name: 'John Doe', email: 'john@example.com', editable: false },
      { name: 'Jane Smith', email: 'jane@example.com', editable: false },
    ]);

    const addRow = () => {
      rows.value.push({ name: '', email: '', editable: true });
    };

    const editRow = (index) => {
      rows.value[index].editable = true;
    };

    const saveRow = (index) => {
      rows.value[index].editable = false;
    };

    const deleteRow = (index) => {
      rows.value.splice(index, 1);
    };

    return {
      rows,
      addRow,
      editRow,
      saveRow,
      deleteRow,
    };
  },
};
</script>

使用Vue 3的ref函数来创建一个响应式的rows数组，该数组包含了表格的数据。每一行都有一个editable属性，用于控制该行是否可编辑。

使用v-for指令在表格中渲染每一行，并使用v-model指令绑定每个输入框的值到rows数组中的对应属性。

在每一行中，使用条件渲染来显示不同的按钮，根据editable属性的值来判断是显示“Edit”按钮还是“Save”按钮。

点击“Add Row”按钮会在rows数组中添加一个空的行，点击“Edit”按钮会将对应行的editable属性设置为true，点击“Save”按钮会将editable属性设置为false，点击“Delete”按钮会从rows数组中删除对应行。