vue+element前后台实现分页功能

Question

问题描述

实现分页的时候报错

相关代码

<el-pagination
background
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="currentPage"
:page-sizes="[2, 20, 30, 50,100]"
:page-size="pagesize"
layout="total, sizes,prev, pager, next, jumper"
:total="tableData.length">
</el-pagination>

data() {
return {
  total: 1000, //默认数据总数
  pagesize: 4, //每页的数据条数
  currentPage: 1, //默认开始页面
  }
  }
  methods: {
  async getList() {
  this.paginationShow = false
  let param = {
    pageNo: this.currentPage, //第几页
    pageSize: this.pagesize, //每页多少条
    prohibit: 1
  };

  let res = await cdService.getAllData(param);
  if (res) {
     
    this.loading = false;
    this.total = res.data.totalRecord;
    this.tableData = res.data;
    this.paginationShow = true;
    console.log(res, "res1111111111111212121");
    console.log(res.data.totalRecord, "res.data.totalRecord");
  }
  console.log(res.data, "res1111111111111");
},
handleSizeChange(val) {
  console.log(`每页 ${val} 条`);
  this.pageSize = val;
  this.currentPage = 1;
  this.getList();
},
handleCurrentChange(val) {
  console.log(`当前页: ${val}`);
  this.currentPage = val;
  this.getList();
},
}
  

Answer 1

这个已解决，是因为之前参照网上的在:data=table后面绑定了

把table后面的删掉就可以了

Answer 2

这是我之前做的 没遇到过你的问题 你可以看一下!是否有参考意义
你可以好好检查一下你写的 是否有写错的 比如 currentPage4啊 这种

Answer 3

提示 current_change 没定义，看看哪里引用了这个方法。

Answer 4

没看到你报错的那个方法啊，
贴一个我自己经常写的方法， 希望能帮到你、

<el-pagination
    background
    layout="total, prev, pager, next"
    @current-change="(value) => {return handleSearch('pagination', value)}"
    :current-page="para.pageIndex"
    :total="list.total">
</el-pagination>

<script>
import { product } from '../api'
export default {
  name: 'product',
  data () {
    return {
      para: {
        pageIndex: 1,
        pageSize: 10,
      },
      list: { //  用户信息
        data: [], //  数据
        total: 0 //  总数
      },
    }
  },
  mounted() {
    this.getlist()
  },
  methods: {
    getlist () {
      product(this.para).then(res => {
        console.log(res)
      })
    },
    handleSet () {

    },
    handleSearch (obj, val) {
      switch (obj) {
        case 'pagination': //  分页
          this.para.pageIndex = val
          this.list()
          break
      }
    },
  },
}
</script>

Answer 5

你有这玩意？

Answer 6

handleCurrentChange(val) {
  console.log(`当前页: ${val}`);
  this.currentPage4 = val;
  this.getList();
},

报错是因为你在data没初始化定义，这里直接用，当然报错啦