Vue-动态分页

最新推荐文章于 2023-03-08 15:10:25 发布

～Phoenix

最新推荐文章于 2023-03-08 15:10:25 发布

阅读量1.8k

点赞数 2

分类专栏： Vue

本文链接：https://blog.csdn.net/weixin_39332529/article/details/106755621

版权

本文详细介绍了如何在Vue.js项目中实现动态分页功能，包括使用axios获取数据、计算总页数、点击页码切换页面等步骤，同时讨论了分页组件的设计和优化策略。

摘要由CSDN通过智能技术生成

<!-- Table表格 -->
<el-table
    class="table-form"
    :data="tableData.slice((currentPage4-1)*pageSize,currentPage4*pageSize)"
</el-table>
<!-- 分页 -->
<el-pagination
    class="paging"
    @size-change="handleSizeChange"
    @current-change="handleCurrentChange"
    :current-page="currentPage4"
    :page-sizes="[10,20,30,40,50]"
    :page-size="pageSize"
     layout="total, sizes, prev, pager, next, jumper"
     :total="tableData.length"
></el-pagination>

export default {
  data() {
    const data = [];
    return {
	 //页码
	 currentPage4: 1,
	 //分页下默认显示10条每页
	 pageSize: 10,
};
	methods: {
       //每页显示的条数
    handleSi