Vue + Element Plus 实现用户信息表格展示与分页功能

一、项目搭建与技术栈

本次项目基于 Vue 框架，搭配 Element Plus 组件库进行开发。Vue 是一款轻量级、渐进式的 JavaScript 框架，以其简洁的 API 和高效的响应式系统深受开发者喜爱。Element Plus 则是一套为 Vue 3 设计的桌面端组件库，提供了丰富且美观的组件，能极大提升开发效率。

项目初始化使用了 Vue CLI，通过命令行快速搭建起基础项目结构。在 package.json 中可以看到项目依赖，主要包括 vue 和 element - plus 等。

二、项目核心代码解析

1. main.js 初始化配置

在 main.js 中，首先从 vue 引入 createApp 方法，用于创建 Vue 应用实例。然后引入根组件 App（来自 ./App.vue）以及 Element Plus 相关资源：

import { createApp } from 'vue'
import App from './App.vue'
import ElementPlus from 'element - plus'
import 'element - plus/dist/index.css'
import * as ElementPlusIconsVue from '@element - plus/icons - vue'

const app = createApp(App)
// 注册Element Plus
app.use(ElementPlus)
// 注册图标（带统一前缀）
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
  app.component(`el - icon - ${key.toLowerCase()}`, component)
}
app.mount('#app')

这里先创建了 Vue 应用实例，接着通过 app.use(ElementPlus) 注册了 Element Plus 组件库，使其能在整个项目中使用。同时，遍历 Element Plus 图标组件并注册，方便在模板中使用图标。

2. App.vue 核心逻辑

模板部分（template）

<template>
  <el - table :data="tableData" style="width: 100%">
    <el - table - column fixed prop="username" label="用户名" width="148" />
    <el - table - column prop="email" label="邮箱" width="120" />
    <el - table - column prop="phone" label="手机号" />
    <el - table - column prop="address" label="地址" />
    <el - table - column prop="age" label="年龄" />
    <el - table - column prop="gender" label="性别" />
    <el - table - column prop="createdAt" label="创建时间" />
    <el - table - column prop="updatedAt" label="修改时间" />
    <el - table - column fixed="right" label="Operations" width="120">
      <template #default>
        <el - button link type="primary" size="small" @click="handleClick">Detail</el - button>
        <el - button link type="primary" size="small">Edit</el - button>
      </template>
    </el - table - column>
  </el - table>
  <el - pagination background layout="prev, pager, next" :total="260" :page - size="10" @current - change="page" />
</template>

这里使用了 Element Plus 的 el - table 组件来展示用户信息表格，通过 :data 绑定数据源 tableData。定义了多个 el - table - column 子组件来设置表格列，包括用户名、邮箱、手机号等信息列，以及操作列（Operations）。操作列中包含 Detail 和 Edit 按钮，Detail 按钮绑定了 handleClick 方法（虽未在提供代码中看到具体实现，但可用于查看详情逻辑）。同时，使用 el - pagination 组件实现分页功能，设置了总数据量 total 为 260，每页显示数量 page - size 为 10，并绑定了 @current - change 事件到 page 方法（用于处理页码切换逻辑）。

脚本部分（script）

<script lang="ts" setup>
import { ref, onMounted } from 'vue'
import axios from 'axios'

const tableData = ref([])
const total = ref(0)
const page = (pageNum: number) => {
  axios.get('http://113.45.160.83:8888/find', { params: { pageNum } }).then((resp) => {
    tableData.value = resp.data.records
    console.log(resp.data)
    console.log(pageNum)
  })
}

onMounted(() => {
  axios.get('http://113.45.160.83:8888/find').then((resp) => {
    tableData.value = resp.data.records
    console.log(resp.data)
  })
})
</script>

在脚本中，使用 Vue 3 的组合式 API，通过 ref 定义了响应式数据 tableData（用于存储表格数据）和 total（用于存储总数据量，这里未完整展示设置逻辑）。page 方法用于处理分页请求，当页码切换时，通过 axios 发送 GET 请求到指定接口（http://113.45.160.83:8888/find），并传递页码参数 pageNum，获取对应页码的数据后更新 tableData。onMounted 生命周期钩子在组件挂载后发送一次请求获取初始数据并更新 tableData。

三、项目展示与效果

项目运行后，在浏览器中访问 localhost:5173，可以看到一个展示用户信息的表格，表格包含用户名、邮箱、手机号等多列信息，并且底部有分页导航。分页导航支持快速切换页码，当前页码高亮显示，用户可以方便地浏览不同页的用户信息。

四、总结与展望

通过本次项目实践，成功使用 Vue 和 Element Plus 实现了用户信息表格展示与分页功能。在开发过程中，Element Plus 组件的易用性和 Vue 响应式系统及组合式 API 带来了良好的开发体验。后续可以进一步完善功能，如增加数据编辑保存逻辑（对应 Edit 按钮功能）、优化表格样式、增加搜索过滤功能等，提升系统的实用性和用户体验。