vue项目实战-电商后台管理系统

以下是一个简化的Vue项目实例，展示了如何创建一个电商后台管理系统的用户列表页面。

<template>
  <div class="user-list">
    <h1>用户列表</h1>
    <table>
      <thead>
        <tr>
          <th>用户名</th>
          <th>邮箱</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="user in users" :key="user.id">
          <td>{{ user.name }}</td>
          <td>{{ user.email }}</td>
          <td>
            <button @click="editUser(user.id)">编辑</button>
            <button @click="deleteUser(user.id)">删除</button>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      users: [
        // 假定的用户数据，实际应用中应该通过API获取
        { id: 1, name: '张三', email: 'zhangsan@example.com' },
        { id: 2, name: '李四', email: 'lisi@example.com' },
        // ...更多用户数据
      ]
    };
  },
  methods: {
    editUser(userId) {
      // 处理编辑用户的逻辑，例如跳转到编辑页面
      console.log('编辑用户', userId);
    },
    deleteUser(userId) {
      // 处理删除用户的逻辑，例如发送删除请求到服务器
      console.log('删除用户', userId);
    }
  }
};
</script>
 
<style scoped>
.user-list table {
  width: 100%;
  border-collapse: collapse;
}
 
.user-list th,
.user-list td {
  border: 1px solid #ddd;
  padding: 8px;
}
 
.user-list button {
  background-color: #4CAF50;
  color: white;
  padding: 8px 16px;
  border: none;
  cursor: pointer;
}
 
.user-list button:hover {
  background-color: #45a049;
}
</style>

这个简单的Vue组件展示了如何创建一个用户列表，并为每个用户提供编辑和删除的按钮。在实际应用中，编辑和删除功能需要与后端服务的API进行交互。这个例子也展示了如何通过Vue的v-for指令来循环渲染列表数据，以及如何使用@click事件处理器来处理用户的点击事件。