场景:
在分页中可以编辑数据,如果切换到第二页所选数据就会丢失。
最简单的方式就是有一个加载更多的按钮来解决这个问题。
场景大概样式:
- 定义页码规范。
(其中,total代表总页数,pageNo代表当前页,PageSize代表一页的条数,pageSizeOpts代表一页可以显示的条数)
- 定义点击nextPage事件
- 点击加载内容,当前页码累加1
this.page.pageNo = this.page.pageNo + 1
- 渲染数据(即调用接口)时,调用的数据进行累加加载,此时使用concat合并数组,比如获得的数据是 data
async getData() {
// 此时模拟接口写法
const data = await getDataList()
// this.prod.pramas 刚开始加载的数据
const dataList = this.prod.pramas.concat(data)
}
PS: concat() 方法是合并两个或多个数组,找他不会更改现有的数组,而是返回一个新的数组