vue3+ts实现表格的增删改查（一）

使用了Vue 3的Composition API和TypeScript来实现表格的增删改查功能。

<template>
  <div>
    <table>
      <thead>
        <tr>
          <th>ID</th>
          <th>Name</th>
          <th>Actions</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(item, index) in items" :key="index">
          <td>{{ item.id }}</td>
          <td>{{ item.name }}</td>
          <td>
            <button @click="editItem(index)">Edit</button>
            <button @click="deleteItem(index)">Delete</button>
          </td>
        </tr>
      </tbody>
    </table>
    <form @submit.prevent="addItem" v-if="showForm">
      <input type="text" v-model="newItem.name" placeholder="Name" required />
      <button type="submit">Add</button>
    </form>
    <form @submit.prevent="updateItem" v-if="showForm && editIndex !== null">
      <input type="text" v-model="newItem.name" placeholder="Name" required />
      <button type="submit">Update</button>
    </form>
    <button @click="showForm = true">Add Item</button>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';

interface Item {
  id: number;
  name: string;
}

const items = ref<Item[]>([
  { id: 1, name: 'Item 1' },
  { id: 2, name: 'Item 2' },
  { id: 3, name: 'Item 3' },
]);

const newItem = ref<Item>({ id: 0, name: '' });
const editIndex = ref<number | null>(null);
const showForm = ref(false);

const addItem = () => {
  newItem.value.id = items.value.length + 1;
  items.value.push({ ...new.value });
  newItem.value.name = '';
  showForm.value = false;
};

const editItem = (index: number) => {
  editIndex.value = index;
  newItem = { ...items.value[index] };
  showForm.value = true;
};

const updateItem = () => {
  if (editIndex.value !== null) {
    items.value[editIndex.value] = { ...newItem.value };
    newItem.value.name = '';
    editIndex.value = null;
    showForm.value = false;
  }
};

const deleteItem = (index: number) => {
  items.value.splice(index, 1);
};

</script>

• items是一个响应式的数组，存储了表格的数据。
• newItem是一个响应式的对象，用于存储新增或编辑的数据。
• editIndex是一个响应式的变量，用于记录当前正在编辑的数据的索引。
• showForm是一个响应式的变量，控制表单的显示与隐藏。

在模板中，使用v-for指令遍历items数组，并使用v-model指令将输入框与newItem.name绑定。通过点击"Add Item"按钮，可以显示添加数据的表单。通过点击"Edit"按钮，可以显示编辑数据的表单，并将编辑的数据填充到输入框中。通过点击"Delete"按钮，可以删除对应的数据。

在脚本部分，定义了addItem、editItem、updateItem和deleteItem等方法来处理表单的提交、编辑、更新和删除操作。

• 在addItem方法中，给newItem对象的id属性赋予一个新的值，并将其添加到items数组中。

• 在editItem方法中，将正在编辑的数据的索引赋值给editIndex变量，并将对应的数据填充到newItem对象中。

• 在updateItem方法中，根据editIndex变量更新items数组中对应的数据。在deleteItem方法中，使用splice方法从items数组中删除对应的数据。