vue实现用户信息表

Vue 实现用户信息表

数据准备

定义一个用户数据数组，包含用户的基本信息如姓名、年龄、性别等。数据可以存储在组件的 data 属性中或通过 API 从后端获取。

data() {
  return {
    users: [
      { id: 1, name: '张三', age: 25, gender: '男', email: 'zhangsan@example.com' },
      { id: 2, name: '李四', age: 30, gender: '女', email: 'lisi@example.com' },
      { id: 3, name: '王五', age: 28, gender: '男', email: 'wangwu@example.com' }
    ]
  }
}

表格渲染

使用 v-for 指令遍历用户数据，动态生成表格行。表头可以静态定义，表格内容通过循环渲染。

<table class="user-table">
  <thead>
    <tr>
      <th>ID</th>
      <th>姓名</th>
      <th>年龄</th>
      <th>性别</th>
      <th>邮箱</th>
    </tr>
  </thead>
  <tbody>
    <tr v-for="user in users" :key="user.id">
      <td>{{ user.id }}</td>
      <td>{{ user.name }}</td>
      <td>{{ user.age }}</td>
      <td>{{ user.gender }}</td>
      <td>{{ user.email }}</td>
    </tr>
  </tbody>
</table>

样式优化

为表格添加基础样式，提升可读性和美观性。可以通过 CSS 设置边框、间距和颜色。

.user-table {
  width: 100%;
  border-collapse: collapse;
}

.user-table th, .user-table td {
  border: 1px solid #ddd;
  padding: 8px;
  text-align: left;
}

.user-table th {
  background-color: #f2f2f2;
}

.user-table tr:nth-child(even) {
  background-color: #f9f9f9;
}

功能扩展

添加排序、筛选或分页功能，提升用户交互体验。例如，通过计算属性实现按年龄排序。

computed: {
  sortedUsers() {
    return this.users.sort((a, b) => a.age - b.age);
  }
}

动态操作

实现编辑或删除用户的功能。通过绑定事件和方法，动态更新数据。

<td>
  <button @click="editUser(user.id)">编辑</button>
  <button @click="deleteUser(user.id)">删除</button>
</td>

methods: {
  deleteUser(id) {
    this.users = this.users.filter(user => user.id !== id);
  },
  editUser(id) {
    // 编辑逻辑
  }
}

响应式更新

确保表格数据变化时视图自动更新。Vue 的响应式系统会自动处理数据变动，无需手动操作 DOM。

通过以上步骤，可以快速实现一个功能完善、样式美观的用户信息表。