vue前端实现表格数据——增查改删

在Vue中实现表格数据的增查改删功能，可以使用Vue的响应式特性和组件化方法。以下是一个简单的示例，展示了如何实现这些功能：

<template>
  <div>
    <table>
      <thead>
        <tr>
          <th>ID</th>
          <th>Name</th>
          <th>Age</th>
          <th>Action</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(item, index) in items" :key="item.id">
          <td>{{ item.id }}</td>
          <td>{{ item.name }}</td>
          <td>{{ item.age }}</td>
          <td>
            <button @click="editItem(index)">Edit</button>
            <button @click="deleteItem(index)">Delete</button>
          </td>
        </tr>
      </tbody>
    </table>
    <button @click="addItem">Add</button>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      items: [
        { id: 1, name: 'John Doe', age: 30 },
        { id: 2, name: 'Jane Smith', age: 25 },
        // ... more items
      ],
      nextId: 3, // Assuming IDs are unique
    };
  },
  methods: {
    addItem() {
      this.items.push({
        id: this.nextId++,
        name: '',
        age: null,
      });
    },
    editItem(index) {
      // Logic to edit item
    },
    deleteItem(index) {
      this.items.splice(index, 1);
    },
  },
};
</script>

在这个例子中，我们定义了一个Vue组件，它包括了一个表格来展示items数组中的数据。items数组中的每个元素都代表表格中的一行，并使用v-for指令进行渲染。每行后面的“Edit”和“Delete”按钮用于执行编辑和删除操作。“Add”按钮用于添加新的空白行，以便用户可以输入新数据。

编辑和删除功能需要在methods对象中实现。添加操作会向数组中添加一个新的空白项。编辑操作可以打开一个模态框或直接在表格中进行编辑，然后更新对应的行。删除操作则是使用splice方法从数组中移除指定索引的元素。