Vue3+ElementPlus纯前端分页（手撕分页），无需修改后端

已于 2023-11-19 18:42:51 修改
阅读量1.6k 收藏 9
点赞数 4
文章标签： 前端 vue.js javascript typescript
于 2023-11-19 18:37:27 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_46407807/article/details/134493506
版权

前提：先把pagination安装上先

1、在script中加上

        

// 实现分页
const currentPage = ref(1);
const pageSize = ref(10);
const totalItems = computed(() => tableData.value.length);
const paginatedData = computed(() => {
    const start = (currentPage.value - 1) * pageSize.value;
    const end = start + pageSize.value;
    return tableData.value.slice(start, end);
});


const handleCurrentChange = (newPage) => {
    currentPage.value = newPage;
};

const handleSizeChange = (newSize) => {
    pageSize.value = newSize;
};

2.如果有查询的，调用查询后重置页码

currentPage.value = 1; // 重置页码

3.<el-table>中的数据由原本的tableData更换为分页处理后的:paginatedData

4.紧接着<el-table>标签下面加上el-pagination

<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                    :current-page="currentPage" :page-sizes="[10, 20, 30, 40]" :page-size="pageSize" :total="totalItems">
                </el-pagination>

修改前和修改后对比

修改前：

<template>
    <el-card class="box-card">
        <el-row>
            <el-col :span="5">
                <el-input v-model="searchVal" placeholder="请输入需要查询内容" @change="Search" />
            </el-col>
            <el-col :span="12">
                <el-button :disabled="!Sagency" type="primary" @click="Search">查询</el-button>
                <el-button :disabled="!Iagency" @click="open" type="primary">新增</el-button>
                <el-button type="primary" @click="handleExport">导出Excel</el-button>
            </el-col>
        </el-row>
        <br>
        <el-row>
            <el-col>
                <el-table :data="tableData" style="width: 100%;height: 65vh;" border ref="tb">
                    <el-table-column type="selection" width="55" />
                    <el-table-column prop="Ano" label="编号" width="150" />
                    <el-table-column prop="Aname" label="姓名" width="150" />
                    <el-table-column prop="Asex" label="性别" width="150" />
                    <el-table-column prop="Aphone" label="电话" width="150" />
                    <el-table-column prop="Aremark" label="备注" width="190" />

                    <el-table-column label="操作" align="center">
                        <template #default="scope">
                            <!-- 将这一行的数据都传出去 -->
                            <el-button :disabled="!Fagency" size="small" @click="handleEdit(scope.$index, scope.row)">修改</el-button>
                            <el-button :disabled="!Dagency" size="small" type="danger"
                                @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <!-- <el-pagination style="margin-top: 10px;" background layout="prev, pager, next" :total="total" /> -->
                <!-- <el-pagination style="margin-top: 10px;" background layout="prev, pager, next" :total="pageSize"
                    @current-change="handlePageChange" /> -->
                <el-pagination style="margin-top: 10px;" background layout="prev, pager, next" :total="total"
                    :current-page="parms.PageIndex" :page-size="pageSize" @current-change="handlePageChange" />
            </el-col>
        </el-row>
        <add :isShow="isShow" :info="info" @closeAdd="closeAdd" @success="success"></add>
    </el-card>
</template>
<script lang="ts" setup>
import { ElMessage, ElTable } from 'element-plus';
import { onMounted, Ref, ref, toRefs } from 'vue';
import Agency from '../../../class/Agency';
import { delAgency, getAgency } from '../../../http';
import add from './add.vue';
import useStore from '../../../store';
import { exportToExcel } from '../../../tool/report'

const store = useStore()
const total = ref(10)
const parms = ref({
    Id: 0,
    Ano: "",
    Aname: "",
    Asex: "",
    Aphone: "",
    Aremark: "",
    PageIndex: 2,
    PageSize: 10
})


// -------------------- 载入数据 --------------------
const tableData: Ref<Array<Agency>> = ref<Array<Agency>>([])
const load = async () => {
    console.log("load中：" + parms.value.Aname)
    let res = await getAgency(parms.value) as any
    // console.log("查询结果：" + res as Array<Agency>)
    tableData.value = res as Array<Agency>
}
// 查询
const searchVal = ref("")
const Search = async () => {
    parms.value.Aname = searchVal.value
    // console.log("parms.value.Aname:" + parms.value.Aname)
    await load()
}

onMounted(async () => {
    await load()
})





// -------------------- 新增、修改、删除逻辑 Start --------------------
const isShow = ref(false)
const open = () => {
    isShow.value = true
}
const closeAdd = () => {
    isShow.value = false
    info.value = new Agency()
}
const info: Ref<Agency> = ref<Agency>(new Agency());    //响应式对象
const handleEdit = (index: number, row: Agency) => {
    info.value = row
    index ++
    isShow.value = true
}
const success = async (message: string) => {
    isShow.value = false
    info.value = new Agency()
    ElMessage.success(message)
    await load()
}
const handleDelete = async (index: number, row: Agency) => {
    await delAgency(row.Id)
    index ++
    await load()
}

const tb = ref<InstanceType<typeof ElTable>>()

// -------------------- 设置分页 ----------------------
const pageSize = ref(10); // Number of records to display per page

// Handle page change
const handlePageChange = async (page: number) => {
    // parms.PageIndex = page;
    page ++;
    // page = 10;
    await load();
};


const { Permission } = toRefs(store);
const Dagency = ref(Permission.value.Dagency);
const Fagency = ref(Permission.value.Fagency);
const Iagency = ref(Permission.value.Iagency);
const Sagency = ref(Permission.value.Sagency);

// Excel
const handleExport = () => {
    const columnHeaders = ['经办人编号', '姓名', '性别', '电话', '备注'];
    exportToExcel(tableData.value, '经办人信息', columnHeaders);
};

</script>

修改后：

<template>
    <el-card class="box-card">
        <el-row>
            <el-col :span="5">
                <el-input v-model="searchVal" placeholder="请输入需要查询内容" @change="Search" />
            </el-col>
            <el-col :span="12">
                <el-button :disabled="!Sagency" type="primary" @click="Search">查询</el-button>
                <el-button :disabled="!Iagency" @click="open" type="primary">新增</el-button>
                <el-button type="primary" @click="handleExport">导出Excel</el-button>
            </el-col>
        </el-row>
        <br>
        <el-row>
            <el-col>
                <el-table :data="paginatedData" style="width: 100%;height: 65vh;" border ref="tb">
                    <el-table-column type="selection" width="55" />
                    <el-table-column prop="Ano" label="编号" width="150" />
                    <el-table-column prop="Aname" label="姓名" width="150" />
                    <el-table-column prop="Asex" label="性别" width="150" />
                    <el-table-column prop="Aphone" label="电话" width="150" />
                    <el-table-column prop="Aremark" label="备注" width="190" />

                    <el-table-column label="操作" align="center">
                        <template #default="scope">
                            <!-- 将这一行的数据都传出去 -->
                            <el-button :disabled="!Fagency" size="small" @click="handleEdit(scope.$index, scope.row)">修改</el-button>
                            <el-button :disabled="!Dagency" size="small" type="danger"
                                @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>

                <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                    :current-page="currentPage" :page-sizes="[10, 20, 30, 40]" :page-size="pageSize" :total="totalItems">
                </el-pagination>
            </el-col>
        </el-row>
        <add :isShow="isShow" :info="info" @closeAdd="closeAdd" @success="success"></add>
    </el-card>
</template>
<script lang="ts" setup>
import { ElMessage, ElTable } from 'element-plus';
import { onMounted, Ref, ref, toRefs } from 'vue';
import Agency from '../../../class/Agency';
import { delAgency, getAgency } from '../../../http';
import add from './add.vue';
import useStore from '../../../store';
import { exportToExcel } from '../../../tool/report'
import { computed } from 'vue';
const store = useStore()
const total = ref(10)
const parms = ref({
    Id: 0,
    Ano: "",
    Aname: "",
    Asex: "",
    Aphone: "",
    Aremark: "",
    PageIndex: 2,
    PageSize: 10
})


// -------------------- 载入数据 --------------------
const tableData: Ref<Array<Agency>> = ref<Array<Agency>>([])
const load = async () => {
    console.log("load中：" + parms.value.Aname)
    let res = await getAgency(parms.value) as any
    // console.log("查询结果：" + res as Array<Agency>)
    tableData.value = res as Array<Agency>
}
// 查询
const searchVal = ref("")
const Search = async () => {
    parms.value.Aname = searchVal.value
    // console.log("parms.value.Aname:" + parms.value.Aname)
    await load()
    currentPage.value = 1; // 重置页码
}

onMounted(async () => {
    await load()
})





// -------------------- 新增、修改、删除逻辑 Start --------------------
const isShow = ref(false)
const open = () => {
    isShow.value = true
}
const closeAdd = () => {
    isShow.value = false
    info.value = new Agency()
}
const info: Ref<Agency> = ref<Agency>(new Agency());    //响应式对象
const handleEdit = (index: number, row: Agency) => {
    info.value = row
    index ++
    isShow.value = true
}
const success = async (message: string) => {
    isShow.value = false
    info.value = new Agency()
    ElMessage.success(message)
    await load()
}
const handleDelete = async (index: number, row: Agency) => {
    await delAgency(row.Id)
    index ++
    await load()
}

const tb = ref<InstanceType<typeof ElTable>>()


const { Permission } = toRefs(store);
const Dagency = ref(Permission.value.Dagency);
const Fagency = ref(Permission.value.Fagency);
const Iagency = ref(Permission.value.Iagency);
const Sagency = ref(Permission.value.Sagency);

// Excel
const handleExport = () => {
    const columnHeaders = ['编号', '姓名', '性别', '电话', '备注'];
    exportToExcel(tableData.value, '经办人信息', columnHeaders);
};



// 实现分页
const currentPage = ref(1);
const pageSize = ref(10);
const totalItems = computed(() => tableData.value.length);
const paginatedData = computed(() => {
    const start = (currentPage.value - 1) * pageSize.value;
    const end = start + pageSize.value;
    return tableData.value.slice(start, end);
});


const handleCurrentChange = (newPage) => {
    currentPage.value = newPage;
};

const handleSizeChange = (newSize) => {
    pageSize.value = newSize;
};


</script>

励志35岁去越南躺平的造砖核动黑马程序猿
关注
  • 4
    点赞
  • 踩
  • 9
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
VUE3 +elementplus 分页功能实现
Grizzy的博客
07-17 5485
实现分页非常简单，获取当前页的页数，从而将页数与后端的接口相对应，从而获取数据，数据总量也需要从后端的接口中获得。
vue3+elementPlus后台管理系统
08-19
Vue3 + ElementPlus 后台管理系统是一个基于Vue.js最新版本（Vue3）和ElementPlus UI库构建的高效、易用的后台管理平台。Vue3带来了许多改进和优化，包括Composition API、Suspense、Teleport等新特性，提升了开发...
element-plus-分页
everyStudy的博客
08-22 2293
element-plus-分页
若依前端Vue3模板——自定义主题+炫彩主题
qq_51532249的博客
06-27 1万+
详细记录了若依前端Vue3模板自定义主题样式的步骤。
[Vue3]大事件--分页处理
最新发布
weixin_40874076的博客
05-17 215
【代码】[Vue3]大事件--分页处理。
Vue 3和Element组件库的分页功能实现
chen520的博客
07-02 5090
Vue 3是一个灵活的JavaScript框架，采用虚拟DOM和响应式数据的概念，使开发者能够高效地构建用户界面。Element作为一套基于Vue.js的UI组件库，提供了丰富的UI组件和美观的样式，无论是数据展示还是用户交互都能发挥巨大作用。为了使用Vue 3和Element，需要正确安装和配置它们。Vue 3是一个用于构建用户界面的JavaScript框架，它具有更高的运行时性能和更好的开发体验。
vue3实现简单易懂分页
weixin_47683973的博客
10-21 1427
这里封装了一个函数，方法比较死板，而且页面还是固定的五页方法，还是有较多的bug，后续会慢慢改变，也是对我这个初学者的小挑战。下面就是方法，点击使页面变化，虽然代码较多，但是我感觉还是对初学者还是易懂的。2.这里面使用组件通信的父传子，子传父。分别传的是事件和数据。也可以修改总数量，直接在页面的搜索框输入数字即可。默认先设置总数量为60条。组件的父传子以及子传父。
Vue3实现Pagination分页组件（一）基础实现
u013486889的博客
09-29 2665
Vue3实现Pagination分页组件（一）基础实现 - 爱码帮™分享编程知识和开发经验
使用vue+Element实现分页功能
weixin_53068161的博客
07-18 3679
使用vue+Element实现分页功能前言一、案例代码展示及效果二、分页功能模块解释1.引入分页组件2.结合slice()和PageSize 、currentPage 参数对遍历数据实现分页 前言 提示：在数据处理和展示时，我们常常对需要数据进行分页展示，故本文主要介绍基于vue3和element-plus实现的分页功能 提示：以下是本篇文章正文内容，下面案例可供参考 一、案例代码展示及效果 主要代码： <template> <div class="body"> <di
vue3前端调用后端接口实现分页，搜索
Wx001214的博客
04-26 1112
el-button v-else v-if="scope.row.cardStatus == '1'" plain size="small" link> 已过期 </el-button><el-table-column prop="totalEffectiveDate" label="剩余有效天数"></el-table-column><el-table-column prop="address" label="操作" width="300px"><el-form-item label="车牌号码">
基于Vue3 +ElementPlus的智慧社区前台管理界面源码.zip
08-29
基于Vue3 +ElementPlus的智慧社区前台管理界面源码.zip基于Vue3 +ElementPlus的智慧社区前台管理界面源码.zip基于Vue3 +ElementPlus的智慧社区前台管理界面源码.zip基于Vue3 +ElementPlus的智慧社区前台管理界面源码...
vue实现前端分页完整代码
10-15
主要为大家详细介绍了vue实现前端分页完整代码，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
基于vue3+elementPlus的后台管理系统模板
02-18
Vue3和ElementPlus是当前前端开发领域中备受瞩目的技术栈。Vue3是Vue.js的最新版本，带来了诸多性能优化和开发体验改进，而ElementPlus则是一个基于Vue3的组件库，提供了丰富的UI组件，使得开发者能够快速构建出美观...
vue3+ts+vuerouter+pinia+elementplus+ts环境模板搭建及vite打包优化
05-12
vue3+ts+vuerouter+pinia+elementplus+ts环境模板搭建及vite打包优化vue3+ts+vuerouter+pinia+elementplus+ts环境模板搭建及vite打包优化vue3+ts+vuerouter+pinia+elementplus+ts环境模板搭建及vite打包优化vue3+ts+...
Vue3+elementplus搭建通用管理系统实例
10-30
使用HBuilderX开发实现管理系统常见功能，包括登录界面、找回密码界面、通用表格、动态表单、动态详情页、系统常用功能（系统配置、角色管理、用户管理、菜单管理、权限管理等），提供开发过程视频、相关文档、源码...
vue3+emelenui实现前端分页功能—最简单
qq_63656102的博客
09-10 768
在一些后台管理系统或者博客管理系统中分页功能是很常见的一种服务，因为总不可能把很多数据放在一块，那样阅读起来很麻烦，所以需要分页。也是前后端中最为常见的一个功能。先看一下分页场景的模拟。
vue3前端分页
xu568110526的博客
10-23 122
【代码】vue3前端分页。
简单分页：前端vue3后端springboot
m0_71837135的博客
05-29 131
springboot分页
Vue3+Element-Plus 实现表单中数据分页的效果 三三
热门推荐
build2024
12-23 1万+
最终效果： 1. 使用的组件 Pagination 分页组件 <el-pagination v-model:currentPage="currentPage4" :page-sizes="[100, 200, 300, 400]" :page-size="100" layout="total, sizes, prev, pager, next, jumper" :total="400" @size-change="handleSizeChange" @current..
你可以使用vue3 + elementplus使用分页器写一个例子吗
04-20
当然可以！以下是一个简单的使用Vue3和ElementPlus分页器的例子： ``` <template> <div> <el-pagination :page-size="pageSize" :total="total" layout="prev, pager, next" :currentPage="currentPage" @current-change="handleCurrentChange" :hide-on-single-page="true" ></el-pagination> </div> </template> <script> import { ref } from 'vue'; import { ElPagination } from 'element-plus'; export default { components: { ElPagination, }, setup() { // 分页器每页显示的数据条数 const pageSize = ref(10); // 分页器总共的数据条数 const total = ref(100); // 当前页数 const currentPage = ref(1); // 处理分页器页码变化的方法 const handleCurrentChange = (newPage) => { currentPage.value = newPage; }; return { pageSize, total, currentPage, handleCurrentChange, }; }, }; </script> ``` 这个例子使用了Vue3的Composition API，用`ref`定义了分页器每页显示的数据条数、总共的数据条数和当前页数。然后使用`ElPagination`组件来渲染分页器，绑定`pageSize`、`total`、`currentPage`和`handleCurrentChange`等属性和事件，来实现分页器的功能。注意，我们在模板中使用了`:hide-on-single-page="true"`来让当数据只有一页时隐藏分页器。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值