vue 表格增删查改完整代码

Vue.js表格的增删查改操作通常涉及到前端的数据绑定、事件处理以及状态管理。这里提供一个基本的Vue项目示例，包含了表格显示、添加新行、删除行和编辑行的功能。假设我们有一个简单的数据模型`User`：

<template>
  <div id="app">
    <table>
      <thead>
        <tr>
          <th>ID</th>
          <th>Name</th>
          <th>Email</th>
          <th>Actions</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(item, index) in users" :key="index">
          <td>{{ item.id }}</td>
          <td>{{ item.name }}</td>
          <td>{{ item.email }}</td>
          <td>
            <button @click="edit(index)">Edit</button>
            <button @click="deleteItem(index)">Delete</button>
          </td>
        </tr>
      </tbody>
      <tfoot>
        <tr>
          <td><input v-model="newUser.id" type="text" placeholder="ID"></td>
          <td><input v-model="newUser.name" type="text" placeholder="Name"></td>
          <td><input v-model="newUser.email" type="email" placeholder="Email"></td>
          <td><button @click="addUser">Add User</button></td>
        </tr>
      </tfoot>
    </table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      newUser: { id: '', name: '', email: '' },
      users: [
        { id: 1, name: 'John Doe', email: 'john@example.com' },
        // 更多用户...
      ],
    };
  },
  methods: {
    addUser() {
      this.users.push(this.newUser);
      this.newUser = {};
    },
    edit(index) {
      // 这里可以触发模态框或者直接修改当前行的值
    },
    deleteItem(index) {
      this.users.splice(index, 1);
    },
  },
};
</script>

在这个例子中：
- `v-for`指令用于渲染每个用户行。
- 新增用户表单是在tfoot部分，`@click`事件触发`addUser`方法将新数据添加到数组中。
- 编辑功能未详细实现，你可以通过点击编辑按钮打开一个模态框来进行编辑操作。
- 删除功能通过`splice`方法从数组中移除指定索引的项。

注意这只是一个基础示例，实际应用可能需要配合Vuex进行状态管理，如需使用axios或其他库进行服务器交互，请按需补充。