Element Plus表格与分页组件

Element Plus表格与分页组件详解

最新推荐文章于 2025-10-07 08:15:15 发布

原创最新推荐文章于 2025-10-07 08:15:15 发布 · 1.1k 阅读

25 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #javascript #开发语言

Web开发专栏收录该内容

164 篇文章

订阅专栏

Element Plus表格与分页组件

在后台管理系统等各类应用场景中，我们常常面临展示大量数据的挑战。想象一下，当有成百上千条数据需要呈现时，如何能让它们既清晰又高效地展示给用户呢？这时候，Element Plus的表格（Table）与分页（Pagination）组件就成为了我们的得力助手。

表格负责将数据以结构化的形式呈现，而分页则把大量数据拆分到不同页面，避免一次性加载过多数据导致页面卡顿。二者结合，构成了数据展示的经典方案。

接下来，本文将带领大家从零开始，全面掌握这两个组件的用法，从基础操作到实际应用，助力打造美观且高效的数据展示页面。

表格组件（Table）：让数据展示既清晰又专业

表格组件的核心价值与应用场景

表格是展示结构化数据的理想形式。无论是企业后台系统中的用户列表、订单记录，还是电商平台的商品信息管理，表格都扮演着至关重要的角色。例如，在企业的员工管理页面，通过表格可以清晰地展示员工的姓名、职位、入职时间等信息；在电商平台的订单查询页面，表格能够呈现订单编号、下单时间、订单金额等关键数据。

基础用法：从“容器 + 列”搭建最简单的表格

核心标签：
<el - table>：作为表格的容器，通过:data属性与数据源进行绑定。例如:data="tableData"，这里的tableData就是存储表格数据的变量。
<el - table - column>：用于定义表格的每一列。prop属性绑定数据字段，比如prop="name"，表示该列展示数据对象中name字段的值；label属性设置表头文字，如label="姓名"。
代码示例：

<template>
  <el - table :data="tableData">
    <el - table - column prop="date" label="日期" width="180"></el - table - column>
    <el - table - column prop="name" label="姓名" width="180"></el - table - column>
    <el - table - column prop="address" label="地址"></el - table - column>
  </el - table>
</template>
<script setup>
const tableData = [
  { date: '2023 - 01 - 01', name: '张三', address: '北京市' },
  { date: '2023 - 01 - 02', name: '李四', address: '上海市' }
]
</script>

关键点：需要注意的是，tableData必须是一个数组，数组中的每个对象的键名要与<el - table - column>标签中的prop属性对应，这样才能正确展示数据。

样式美化：斑马纹、边框与对齐方式的设置

斑马纹：为了提升表格的可读性，可以给<el - table>添加stripe属性，即<el - table stripe>。这样表格的奇数行和偶数行背景色会交替显示，让用户在查看数据时更加清晰。
边框：添加border属性，如<el - table border>，可以为表格添加边框，使表格结构更加清晰，便于用户区分不同的单元格。
对齐方式：
内容对齐：通过align属性来控制列内容的对齐方式。例如，align="center"可以让列内容居中显示，让表格看起来更加整齐。
表头对齐：使用header - align属性设置表头文字的对齐方式。比如header - align="right"，可使表头文字右对齐。

为了让大家更直观地感受不同样式的差异，这里可以想象一下没有斑马纹、边框和对齐设置的表格，数据看起来可能会比较密集，不够清晰；而添加了这些样式后，表格会更加美观、易读。

高级功能：固定表头/列、内容溢出处理

固定表头：当表格数据较多时，为了方便用户查看表头信息，可以设置height属性，例如height = "400"。这样在滚动表格内容时，表头会保持固定不动，始终显示在页面上，方便用户对照表头查看数据。
固定列：对于一些关键列，比如“操作”列，我们希望它始终可见。这时可以给<el - table - column>添加fixed属性，fixed = "left"表示固定在左侧，fixed = "right"则固定在右侧。
内容溢出处理：当单元格内容过长时，为了避免文字截断影响信息展示，可以添加show - overflow - tooltip属性。这样当鼠标悬停在单元格上时，会显示完整的文本内容。

实战示例：动态绑定数据并自定义表格内容

场景：在实际开发中，我们通常需要从接口获取数据并展示，同时可能需要对部分内容进行格式化，比如将时间戳转换为日期字符串，或者根据状态码显示对应的状态文字。
步骤：
定义响应式数据：使用ref定义响应式数据tableData，初始值为一个空数组，即const tableData = ref([])。
异步获取数据：在onMounted钩子函数中调用接口获取数据，并将返回的数据赋值给tableData.value。例如：

import { onMounted } from 'vue';
import axios from 'axios';
onMounted(async () => {
  const res = await axios.get('/api/data');
  tableData.value = res.data;
});

自定义列内容：通过formatter属性格式化数据。比如，将时间戳转为日期字符串：

<el - table - column prop="createTime" label="创建时间" :formatter="formatTime"></el - table - column>
<script setup>
const formatTime = (row) => {
  return new Date(row.createTime).toLocaleString();
}
</script>

必知API：常用属性与事件解析

常用属性：
max - height：用于限制表格的最大高度，当表格内容超出此高度时，会出现滚动条，方便用户查看超出部分的数据。
highlight - current - row：添加该属性后，当用户点击某一行时，该行会高亮显示，便于用户定位当前操作的行数据。
常用事件：
row - click：当用户点击表格中的某一行时，会触发该事件。通常可以在这个事件处理函数中实现跳转详情页等功能，比如获取该行数据的ID，作为参数传递给详情页路由。
selection - change：如果表格中有复选框（需添加type = "selection"的列），当用户勾选或取消勾选复选框时，会触发此事件。通过该事件可以获取当前选中的行数据，便于进行批量操作。

大家无需死记硬背这些属性和事件，在实际使用时，查阅Element Plus官网的“属性”和“事件”表格就能快速找到所需信息。

分页条组件（Pagination）：大数据时代的“减负神器”

分页组件的作用：为什么需要分页？

当数据量过大，例如达到1000条甚至更多时，一次性加载所有数据会导致页面加载缓慢，甚至出现卡顿现象，严重影响用户体验。分页组件的作用就是将大量数据拆分到多个页面，每次只加载当前页面的数据，从而提升页面性能和用户体验。

初识分页：从官网示例看分页的基本结构

打开Element Plus官网，找到“数据展示”板块下的“Pagination 分页”。观察完整的分页条，我们可以看到它包含总条数、每页条数选择、页码按钮、上一页/下一页按钮以及跳转输入框等元素。

基础代码示例：

<el - pagination
  v - model:current - page="currentPage"
  v - model:page - size="pageSize"
  :page - sizes="[10, 20, 30, 40]"
  :total="total"
></el - pagination>
<script setup>
const currentPage = ref(1); // 当前页码
const pageSize = ref(10); // 每页条数
const total = ref(100); // 总条数
</script>

核心属性：控制分页外观与行为的关键参数

v - model:current - page：通过双向绑定当前页码，这是一个必选属性。它会实时同步当前页码的变化，方便我们在代码中获取和更新当前页码。
v - model:page - size：双向绑定每页显示的条数，同样是必选属性。它能让我们动态控制每页展示的数据量。
:page - sizes：用于定义每页条数的可选值，如[10,20,30]，这些值会以下拉框的形式呈现给用户，让用户可以根据自己的需求选择每页显示的条数。
:total：表示总数据条数，这也是必选属性，通常由后端返回。通过这个属性，分页组件可以准确计算出总页数。
layout：通过一个字符串来控制分页组件的布局，指定各个元素的显示顺序。例如"total, sizes, prev, pager, next, jumper"，分别对应总条数、条数选择、上一页、页码、下一页、跳转。
size：可以控制分页组件的大小，有large、default、small三种可选值，满足不同场景下的视觉需求。background属性无需值，添加后会给分页按钮添加背景色。

关键事件：监听页码与每页条数的变化

size - change：当用户选择不同的每页条数（pageSize）时，会触发该事件，事件的参数为新的pageSize值。在这个事件处理函数中，我们通常需要重新请求数据，将新的pageSize和当前页码（一般设为1）作为参数传递给接口，以获取对应的数据。
current - change：当页码（currentPage）发生变化时，会触发此事件，参数为新的currentPage值。同样，我们需要在这个事件中重新请求数据，将新的currentPage和当前pageSize作为参数传递给接口。
用法示例：

<el - pagination
  ...
  @size - change="handleSizeChange"
  @current - change="handleCurrentChange"
></el - pagination>
<script setup>
const handleSizeChange = (newSize) => {
  console.log('每页条数变为：', newSize);
  // 通常需要重新请求数据，参数包含newSize和currentPage = 1
};
const handleCurrentChange = (newPage) => {
  console.log('当前页码变为：', newPage);
  // 重新请求数据，参数包含newPage和当前pageSize
};
</script>

本地化配置：让分页组件显示中文

问题：默认情况下，分页组件的一些文本可能显示为英文，如“Go to”“Total”等，这在中文环境下不太友好，需要将其配置为中文。
解决步骤：
在main.js中引入中文语言包：

import { createApp } from 'vue';
import ElementPlus from 'element - plus';
import zhCn from 'element - plus/dist/locale/zh - cn.mjs'; // 引入中文包
import App from './App.vue';

createApp(App)
 .use(ElementPlus, { locale: zhCn }) // 配置语言
 .mount('#app');

配置完成后，分页组件的文本就会变为“前往”“共 xxx 条”等中文表述，提升用户体验。

综合案例：表格 + 分页联动实现数据高效展示

需求

展示一个用户列表，支持分页加载，用户可以切换每页条数和页码。

实现步骤

定义响应式数据：

const tableData = ref([]); // 表格数据
const currentPage = ref(1); // 当前页
const pageSize = ref(10); // 每页条数
const total = ref(0); // 总条数

编写获取数据的函数（结合axios）：

const getTableData = async () => {
  const res = await axios.get('/api/user/list', {
    params: {
      page: currentPage.value,
      size: pageSize.value
    }
  });
  tableData.value = res.data.records; // 当前页数据
  total.value = res.data.total; // 总条数
};

在onMounted中初始化加载数据：onMounted(getTableData)
绑定表格和分页组件：

<el - table :data="tableData" border>
  <!-- 定义列... -->
</el - table>
<el - pagination
  v - model:current - page="currentPage"
  v - model:page - size="pageSize"
  :page - sizes="[10,20,30]"
  :total="total"
  @size - change="getTableData" // 条数变化时重新加载
  @current - change="getTableData" // 页码变化时重新加载
></el - pagination>

关键点

当分页组件的页码或每页条数发生变化时，会自动更新currentPage或pageSize的值。此时，由于@size - change和@current - change事件绑定了getTableData函数，所以会重新调用该函数，根据新的currentPage和pageSize值向接口请求对应页的数据，从而实现表格数据的更新，完成表格与分页的联动。