js+element实现分页效果

最新推荐文章于 2025-03-09 21:38:02 发布

utoui

最新推荐文章于 2025-03-09 21:38:02 发布

阅读量356

点赞数

分类专栏：笔记文章标签： vue.js html elementui

本文链接：https://blog.youkuaiyun.com/utoui/article/details/114107222

版权

笔记专栏收录该内容

26 篇文章

订阅专栏

博客介绍了Vue项目中的两个步骤。第一步是在data中处理数据，若出现问题可能是数据格式问题，在created()中获取数据库数据并使用slice方法；第二步涉及el-table。整体围绕Vue的数据处理和表格展示展开。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

第一步

data中：

data() {
return {
	tableData: [],  // 原本展示数据
	// 所有页面的数据
      totalPage: [],
      // 每页显示数量
      pageSize: 10,
      // 共几页
      pageNum: 1,
      // 当前显示的数据
      dataShow: [],
      // 默认当前显示第一页
      currentPage: 0
}
}

如果出现这种问题，是因为有数据写成如：dataShow:"",
在这里插入图片描述

在created()中获得数据库数据

created() {
this.axios.get('http://127.0.0.1:8000/win/').then((response) => {
      this.tableData = response.data.data //订单数据
      this.pageNum = Math.ceil(this.tableData.length / this.pageSize) || 1 //计算一共将数据分多少页
      console.log("一个共分了"+this.pageNum+"页")
      for (let i = 0; i < this.pageNum; i++) {
        //将数据库数据按每页10个分割
        this.totalPage[i] = this.tableData.slice(this.pageSize * i, this.pageSize * (i + 1))
      }
      //获得数据显示第一行
      this.dataShow = this.totalPage[this.currentPage]
      
    })
      })
}

.slice→arrayObject.slice(start,end)

在methods中：

methods:{
	//换页
    CurrentChange(val){
      console.log(`当前页: ${val}`);
      for (let i = 0; i < this.pageNum; i++) {
        //将数据库数据按每页10个分割
        this.totalPage[i] = this.tableData.slice(this.pageSize * i, this.pageSize * (i + 1))
      }
      this.dataShow = this.totalPage[`${val}`-1]//需要-1不然有bug
    }
}

第二步：

<!--分页-->
    <el-pagination
        background
        layout="prev, pager, next"
        :page-size="pageSize"
        @current-change="CurrentChange"
        :page-count="pageNum">
    </el-pagination>