vue实现用户信息表

Vue 实现用户信息表

数据准备

在 Vue 组件的 data 或 setup 中定义用户信息数据。通常使用数组存储多个用户信息，每个用户是一个对象。

data() {
  return {
    users: [
      { id: 1, name: '张三', age: 25, email: 'zhangsan@example.com' },
      { id: 2, name: '李四', age: 30, email: 'lisi@example.com' }
    ]
  }
}

表格渲染

使用 v-for 指令循环渲染用户信息到表格中。表格结构包含表头和表体，表体通过 v-for 动态生成。

<table>
  <thead>
    <tr>
      <th>ID</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.email }}</td>
    </tr>
  </tbody>
</table>

添加样式

为表格添加基础样式，提升可读性和美观性。可以使用内联样式或外部 CSS 文件。

table {
  width: 100%;
  border-collapse: collapse;
}
th, td {
  border: 1px solid #ddd;
  padding: 8px;
  text-align: left;
}
th {
  background-color: #f2f2f2;
}

动态操作

实现添加、删除或编辑用户信息的功能。通过方法更新 users 数组，Vue 会自动重新渲染表格。

methods: {
  addUser() {
    this.users.push({
      id: this.users.length + 1,
      name: '新用户',
      age: 0,
      email: 'new@example.com'
    });
  },
  deleteUser(id) {
    this.users = this.users.filter(user => user.id !== id);
  }
}

表单绑定

通过 v-model 实现表单与数据的双向绑定，方便用户输入新信息或编辑现有信息。

<input v-model="newUser.name" placeholder="姓名">
<input v-model="newUser.age" placeholder="年龄" type="number">
<input v-model="newUser.email" placeholder="邮箱">
<button @click="addUser">添加用户</button>

完整示例

结合上述内容，完整的 Vue 组件示例如下：

<template>
  <div>
    <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.email }}</td>
          <td><button @click="deleteUser(user.id)">删除</button></td>
        </tr>
      </tbody>
    </table>
    <div>
      <input v-model="newUser.name" placeholder="姓名">
      <input v-model="newUser.age" placeholder="年龄" type="number">
      <input v-model="newUser.email" placeholder="邮箱">
      <button @click="addUser">添加用户</button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      users: [
        { id: 1, name: '张三', age: 25, email: 'zhangsan@example.com' },
        { id: 2, name: '李四', age: 30, email: 'lisi@example.com' }
      ],
      newUser: {
        name: '',
        age: 0,
        email: ''
      }
    }
  },
  methods: {
    addUser() {
      this.users.push({
        id: this.users.length + 1,
        ...this.newUser
      });
      this.newUser = { name: '', age: 0, email: '' };
    },
    deleteUser(id) {
      this.users = this.users.filter(user => user.id !== id);
    }
  }
}
</script>

<style>
table {
  width: 100%;
  border-collapse: collapse;
}
th, td {
  border: 1px solid #ddd;
  padding: 8px;
  text-align: left;
}
th {
  background-color: #f2f2f2;
}
</style>

进阶功能

可以根据需求扩展更多功能，如分页、排序、筛选等。使用计算属性或第三方库（如 Lodash）简化复杂操作。

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