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 逻辑

利用侦听器 watch 控制分页

data() {
    return {
       tableData: [], // 每页显示的数据
       tableDataList: [], // 总数据
       pagesize: 10,
       page: 1
    }
},
created: {
	// 初始化的时候截取出第一页数据
	this.tableData = this.tableDataList.slice(0, 10)
},
watch: {
    // 当前页码
    page(newVal,oldVal) {
      this.tableData = this.tableDataList.slice((newVal-1) * this.pagesize, newVal * this.pagesize)
    },
    // 每页条数
    pagesize(newVal, oldVal) {
      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)

利用计算属性 computed 控制分页

data() {
    return {
       tableDataList: [], // 总数据
       pagesize: 10,
       page: 1
    }
},
computed: {
	// 使用计算出来的值，渲染表格数据
    tableDataComputed() {
        let data = this.tableDataList.slice((this.page - 1) * this.pagesize, this.page * this.pagesize)
        return data
    }
}
methods: {
    // 每页条数改变的时候
    handleSizeChange(val) {
      console.log(`${val} 条每页`);
      this.pagesize = val
    },
    // 当前页改变的时候
    handleCurrentChange(val) {
      console.log(`当前页码： ${val}`);
      this.page = val
    },
}