element ui 上一页下一页_elementUI实现分页

分页的两种方式。前端分页，后端分页。两种方式各有个的优缺点吧。

前端分页：后台只需将数据返回，不需要做过多处理，前端一次请求拿到所有数据后做分页处理。但数据量不能太大，因为前端是先一次性加载所有数据，然后在做分页处理。在数据量多的情况下，加载相对应的会变慢。所有在前端做分页时要先考虑一下后期的数据量。

后端分页：因为是后端分页，前端在每点击一次分页时，便向后台请求一次数据。其实就是避免前端一次性从数据库获取大量数据

一、在elementUI中将表格、分页引入自己的页面中

@size-change="handleSizeChange"

@current-change="handleCurrentChange"

:current-page="currentPage"

:page-sizes="[100, 200, 300, 400]"

:page-size="100"

layout="total, sizes, prev, pager, next, jumper"

:total="400">

export default {

data() {

return {

tableData: [{

date: '2016-05-02',

name: '王小虎',

address: '上海市普陀区金沙江路 1518 弄'

}, {

date: '2016-05-04',

name: '王小虎',

address: '上海市普陀区金沙江路 1517 弄'

}, {

date: '2016-05-01',

name: '王小虎',

address: '上海市普陀区金沙江路 1519 弄'

}, {

date: '2016-05-03',

name: '王小虎',

address: '上海市普陀区金沙江路 1516 弄'

}],

// 默认显示第一条

currentPage:1

}

},

methods: {

handleSizeChange(val) {

console.log(`每页 ${val} 条`);

},

handleCurrentChange(val) {

console.log(`当前页: ${val}`);

}

},

}

实现一个简单表格，在做分页时，数据尽可能在10-20条，方便演示

二、分页部分(分页分前端分页与后端分页)

前端分页(在一的基础上添加分页功能)

@current-change="handleCurrentChange"

:current-page="currentPage"

:page-sizes="pageSizes"

:page-size="PageSize" layout="total, sizes, prev, pager, next, jumper"

:total="totalCount">

export default {

data(){

return {

// 总数据

tableData:[],

// 默认显示第几页

currentPage:1,

// 总条数，根据接口获取数据长度(注意：这里不能为空)

totalCount:1,

// 个数选择器(可修改)

pageSizes:[1,2,3,4],

// 默认每页显示的条数(可修改)

PageSize:1,

}

},

methods:{

getData(){

// 这里使用axios，使用时请提前引入

axios.post(url,{

orgCode:1

},{emulateJSON: true},

{

headers:{"Content-Type": "application/x-www-form-urlencoded;charset=utf-8",}

}

).then(reponse=>{

console.log(reponse)

// 将数据赋值给tableData

this.tableData=data.data.body

// 将数据的长度赋值给totalCount

this.totalCount=data.data.body.length

})

},

// 分页

// 每页显示的条数

handleSizeChange(val) {

// 改变每页显示的条数

this.PageSize=val

// 注意：在改变每页显示的条数时，要将页码显示到第一页

this.currentPage=1

},

// 显示第几页

handleCurrentChange(val) {

// 改变默认的页数

this.currentPage=val

},

},

created:function(){

this.getData()

}

}

后端分页(在一的基础上添加分页功能)

@current-change="handleCurrentChange"

:current-page="currentPage"

:page-sizes="pageSizes"

:page-size="PageSize" layout="total, sizes, prev, pager, next, jumper"

:total="totalCount">

export default {

data(){

return {

// 总数据

tableData:[],

// 默认显示第几页

currentPage:1,

// 总条数，根据接口获取数据长度(注意：这里不能为空)

totalCount:1,

// 个数选择器(可修改)

pageSizes:[1,2,3,4],

// 默认每页显示的条数(可修改)

PageSize:1,

}

},

methods:{

// 将页码，及每页显示的条数以参数传递提交给后台

getData(n1,n2){

// 这里使用axios，使用时请提前引入

axios.post(url,{

orgCode:1,

// 每页显示的条数

PageSize:n1,

// 显示第几页

currentPage:n2,

},{emulateJSON: true},

{

headers:{"Content-Type": "application/x-www-form-urlencoded;charset=utf-8",}

}

).then(reponse=>{

console.log(reponse)

// 将数据赋值给tableData

this.tableData=data.data.body

// 将数据的长度赋值给totalCount

this.totalCount=data.data.body.length

})

},

// 分页

// 每页显示的条数

handleSizeChange(val) {

// 改变每页显示的条数

this.PageSize=val

// 点击每页显示的条数时，显示第一页

this.getData(val,1)

// 注意：在改变每页显示的条数时，要将页码显示到第一页

this.currentPage=1

},

// 显示第几页

handleCurrentChange(val) {

// 改变默认的页数

this.currentPage=val

// 切换页码时，要获取每页显示的条数

this.getData(this.PageSize,(val)*(this.pageSize))

},

},

created:function(){

this.getData(this.PageSize,this.currentPage)

}

}

注：后台分页等待验证

问题

当前端分页时，页面上的弹框会将已经勾选的数据清空，拿不到已被勾选的数据。这个问题还需要解决，希望各位大神的帮助！！