实现含有分页与搜索页面的方法

方法一：双数组

1. 在获取全部列表数据的接口上，将返回的数据赋值到 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 = ''
   	}
   }
   

2. 通过分页属性的变化实现对数组的分隔

   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()
   },