当前位置：首页 > VUE

vue实现用户信息表

2026-03-06 18:24:28VUE

Vue 实现用户信息表

数据准备

在 Vue 的 data 或 setup 中定义用户信息数组，包含必要的字段如 id、name、age、email 等。

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

表格渲染

使用 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 或框架（如 Bootstrap）美化表格，增强可读性。

vue实现用户信息表

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

动态操作

实现新增、删除或编辑功能，通过方法更新数据。

methods: {
  addUser() {
    this.users.push({ id: 3, name: '王五', age: 28, email: 'wangwu@example.com' });
  },
  deleteUser(id) {
    this.users = this.users.filter(user => user.id !== id);
  }
}

表单绑定

使用 v-model 实现表单输入与数据的双向绑定，方便新增或编辑用户。

vue实现用户信息表

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

响应式更新

确保数据变化后视图自动更新，Vue 的响应式系统会处理这一点。

组件化（可选）

将表格拆分为独立组件，提升代码复用性和可维护性。

Vue.component('user-table', {
  props: ['users'],
  template: `
    <table>
      <!-- 表格内容 -->
    </table>
  `
});

标签: 用户信息 vue

分享给朋友：

vue实现列表显示

Vue 实现列表显示的方法在 Vue 中实现列表显示通常使用 v-for 指令，结合数组或对象数据渲染动态列表。以下是几种常见的实现方式。基本列表渲染通过 v-for 指令遍历数组，动态生成列…

vue穿梭框组件实现

实现基础穿梭框组件在Vue中实现穿梭框组件，可以使用<el-transfer>（Element UI）或手动实现。以下是手动实现的核心逻辑： <template> &l…

vue实现分类

Vue实现分类功能的方法使用v-for和计算属性通过计算属性对数据进行分类处理，结合v-for渲染分类后的列表。示例代码： <template> <div>…

vue实现tag

Vue 实现标签（Tag）功能在 Vue 中实现标签（Tag）功能可以通过多种方式完成，以下是一些常见的方法和实现步骤：使用动态组件和 v-for 通过 v-for 指令动态渲染标签列表，结合样…

vue实现批量

Vue 实现批量操作的方法在 Vue 中实现批量操作通常涉及选择多个项目并执行统一处理，例如批量删除、批量更新等。以下是几种常见实现方式：表格多选批量操作使用 el-table 配合复选框实现…

vue实现必填

Vue 实现表单必填验证的方法在Vue中实现表单必填验证可以通过多种方式完成，以下是几种常见的方法：使用HTML5原生属性最简单的必填验证可以通过HTML5的required属性实现： &l…

vue实现用户信息表