vue table 代码

以下是一个基本的 Vue.js 表格组件示例代码：

<template>
  <div>
    <table>
      <thead>
        <tr>
          <th>ID</th>
          <th>Name</th>
          <th>Email</th>
          <th>Actions</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="user in users" :key="user.id">
          <td>{{ user.id }}</td>
          <td>{{ user.name }}</td>
          <td>{{ user.email }}</td>
          <td>
            <button @click="editUser(user)">Edit</button>
            <button @click="deleteUser(user)">Delete</button>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      users: [
        { id: 1, name: 'John Doe', email: 'johndoe@example.com' },
        { id: 2, name: 'Jane Doe', email: 'janedoe@example.com' },
        { id: 3, name: 'Bob Smith', email: 'bobsmith@example.com' }
      ]
    };
  },
  methods: {
    editUser(user) {
      // Code to edit user
    },
    deleteUser(user) {
      // Code to delete user
    }
  }
};
</script>

这是一个简单的静态表格，其中包含一个 `users` 数组，该数组包含三个用户对象。在模板中，我们使用 `v-for` 指令遍历 `users` 数组并创建表格行。每行都有一个 `Edit` 和 `Delete` 按钮，这些按钮分别调用组件中的 `editUser` 和 `deleteUser` 方法。你需要自行实现这些方法，以便在用户单击这些按钮时执行相应的操作。