js+element实现分页效果

第一步

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>

el-table