vue3+elementplus的表格展示和分页实战

最新推荐文章于 2025-06-02 00:03:01 发布

xiejava1018

最新推荐文章于 2025-06-02 00:03:01 发布

阅读量2.1k

点赞数 14

CC 4.0 BY-SA版权

分类专栏：前端开发文章标签： vue.js elementui 前端

本文链接：https://blog.csdn.net/fullbug/article/details/141786372

文章目录

Element Plus 是一个基于 Vue 3 的现代化 UI 组件库，旨在帮助开发者快速构建美观且功能丰富的 Web 应用程序。它提供了大量的 UI 组件，如按钮、表单、表格、弹出框、标签页、树形控件等，涵盖了 Web 应用开发中常见的大多数场景。本文通过一个实例来说明vue3+elementplus查询、展示和分页实战。

一、Element Plus的安装使用

要开始使用 Element Plus，首先需要在项目中安装它。如果你正在使用 Vue 3 的项目，可以通过 npm 或 yarn 安装 Element Plus：

npm install element-plus

然后可以在Vue 项目中全局引入 Element Plus：

import {
   
    createApp } from 'vue'
import App from './App.vue'

// 导入路由
import Router from './components/tools/Router'
// 导入ElementPlus
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import * as ElementPlusIconsVue from '@element-plus/icons-vue'

const app = createApp(App)
// 遍历ElementPlusIconsVue中的所有组件进行祖册
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
   
   
    // 向应用实例中全局注册图标组件
    app.component(key, component)
}
app.use(ElementPlus) // 使用ElementPlus
app.use(Router); // 使用路由
app.mount('#app')

二、el-table 表格组件

el-table 是Element Plus 中的一个重要组件，用于展示列表数据。可以通过组件来定义表格中的每一列，包括列标题、列宽、对齐方式等,可以结合 el-pagination 可以实现分页功能。示例代码如下：

<el-table
            ref="multipleTable"
            :data="postList"
            tooltip-effect="dark"
            style="width: 100%"
            fit
            :pagination="pagination"
            @selection-change="handleSelectionChange" >
                <el-table-column
                type="selection"
                width="55">
                </el-table-column>
                <el-table-column
                label="ID"
                width="100"
                prop="id">
                </el-table-column>
                <el-table-column
                label="标题"
                width="450"
                prop="title">
                </el-table-column>
                <el-table-column
                label="是否置顶"
                width="100"
                prop="isTop">
                </el-table-column>
                <el-table-column
                label="热度"
                width="100"
                prop="viewsCount">
                </el-table-column>
                <el-table-column
                label="发布时间"
                width="200"
                prop="pubTime">
                </el-table-column>
                <el-table-column
                label="操作"
                >