[JavaScript知识库]vue + element-ui 前端实现分页效果，便于用户浏览

在项目中，后端可能不支持分页，请求回来数据很多，放到页面中不利于浏览查找，因此前端可以做一个伪分页效果

代码

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

js 逻辑

data() {
    return {
       tableData: [], // 每页显示的数据
       tableDataList: [], // 总数据
       pagesize: 10,
       page: 1
    }
},
created: {
	// 初始化的时候截取出第一页数据
	this.tableData = this.tableDataList.slice(0, 10)
},
watch: {
    // 当前页码
    page(newVal,oldVal) {
      console.log(newVal,oldVal);
      if(newVal * 1 > oldVal * 1) {
        this.tableData = this.tableDataList.slice((newVal-1) * this.pagesize, newVal * this.pagesize)
      }else{
        this.tableData = this.tableDataList.slice((newVal-1) * this.pagesize, newVal * this.pagesize)
      }
    },
    // 每页条数
    pagesize(newVal, oldVal) {
      if(newVal * 1 > oldVal * 1) {
        this.tableData = this.tableDataList.slice((this.page-1) * newVal, this.page * newVal)
      }else{
        this.tableData = this.tableDataList.slice((this.page-1) * newVal, this.page * newVal)
      }
    }
},
methods: {
    // 每页条数改变的时候
    handleSizeChange(val) {
      console.log(`${val} 条每页`);
      this.pagesize = val
    },
    // 当前页改变的时候
    handleCurrentChange(val) {
      console.log(`当前页码： ${val}`);
      this.page = val
    },
}

如果有删除按钮，在删除事件里添加

this.tableData = this.tableDataList.slice((this.page - 1) * this.pagesize, this.page * this.pagesize)