vue前端分页

vue-easytable 后端一次行将数据返回来，前端实现分页。当然后端分页做起来更容易些。前端分页一次性拿到所有数据，要根据 pageIndex和 pageSize以及 total通过前端计算来决定每一页展示哪些数据<div class="mt20 mb20 bold" style="margin-top:10px;"><v-pagination v-on:page-chan

吾乃冠军

9445人浏览 · 2020-07-31 19:33:14

吾乃冠军 · 2020-07-31 19:33:14 发布

vue-easytable 后端一次性将数据返回来，前端实现分页。当然后端分页做起来容易，同事客户体验更加佳。前端分页一次性拿到所有数据，要根据 pageIndex和 pageSize以及 total通过前端计算来决定每一页展示哪些数据

         <div class="mt20 mb20 bold" style="margin-top:10px;">
             <v-pagination @page-change="pageChange" @page-size-change="pageSizeChange" :total="total" size='small' :page-size="pageSize" :layout="['prev', 'pager', 'next']"></v-pagination>
         </div>


export default{
	data(){
		return{
            list: null,			//table当前展示的数据
            total:0,			//总条数
            pageIndex: 1,		//当前页数
            pageSize: 10,		//一页展示10条
            tableData: [],		//一次性请求的所有数据	
		}
	},
	methods: {
         pageChange:(pageIndex) {
             var _this = this;
             if (_this.tableData) {
                 if (pageIndex) {
                     _this.pageIndex = pageIndex;
                 }
                 _this.list = _this.tableData.slice(
                   (_this.pageIndex - 1) * _this.pageSize,
                   _this.pageIndex * _this.pageSize
                 );
                 console.log(_this.list);
             } else {}
         },
        getTableData(){
        	_this.$http.post('/api/task/GetOfficialTaskListByCondition',params)
		    .then(res =>{
			 // 请求接口成功之后,获取列表所有数据
	             _this.tableData = res.data.result;
	             _this.total = res.data.result.length;
	             _this.list = _this.tableData.slice(
	                   (_this.pageIndex - 1) * _this.pageSize,
	                    _this.pageIndex * _this.pageSize
	             );	
			})
		    .catch(error =>{})	             	  
		} 	
	}
}