方法一:双数组
-
在获取全部列表数据的接口上,将返回的数据赋值到
dataList
和renderList
两个数组中dataList
:是存储所有数据的数组
renderList
:是页面渲染的数组// 获取列表数据 async getList () { const { data: res } = await this.$http.get('list', { params: this.queryInfo }) // 数据赋值 this.renderList= this.dataList = res.data this.total = res.total this.handlePaging() } // 搜索 async search() { if (this.inputValue.replace(/(^\s*)|(\s*$)/g, '') !== '') { const { data: res } = await this.$http.get('search', { params: { inputValue: this.inputValue } }) this.renderList= this.dataList = res.data this.total = res.total this.inputValue = '' this.handlePaging() } else { this.getList () this.inputValue = '' } }
-
通过分页属性的变化实现对数组的分隔
pagenum
:页码,现在第几页
pagesize
:每页显示多少条数据// 通过 slice()方法分割数组 handlePaging() { const startLine = (this.queryInfo.pagenum - 1) * this.queryInfo.pagesize const endLine = this.queryInfo.pagenum * this.queryInfo.pagesize this.SceneryList = this.dataList.slice(startLine, endLine) }, // 每页显示数据条数变化时调用 handleSizeChange(newSize) { this.queryInfo.pagesize = newSize this.handlePaging() }, // 页码变化时调用 handleCurrentChange(newPage) { this.queryInfo.pagenum = newPage this.handlePaging() },