Element，‘饿了吗’，一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库，使用这个分页组件遇到的坑记录一下。
组件：
代码语言：javascript复制 <el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="currentPage"
:page-sizes="[5,10,20]"
:page-size="10"
layout="total, sizes, prev, pager, next, jumper"
:total="total">
</el-pagination>js代码：
代码语言：javascript复制 data() {
return {
list: [],
total: 0, // 总记录数
currentPage: 1, // 当前页
pageSize: 10, // 每页大小
searchMap: {}, // 查询条件
dialogFormVisible: false, // 编辑窗口是否可见
pojo: {}, // 编辑表单绑定的实体对象
id: '' // 当前用户修改的ID
}
}方法代码:
代码语言：javascript复制 fetchData() {
userApi.search(this.currentPage, this.pageSize, this.searchMap).then(response => {
this.list = response.data.rows
this.total = response.data.total
})
},
handleSizeChange(val) {
//改变每页显示的条数的时候 自动触发
this.pageSize = val; //动态改变每页大小
userApi.search(this.currentPage, val, this.searchMap).then(response => {
this.list = response.data.rows
this.total = response.data.total
})
},
handleCurrentChange(val) {
// 当前页码改变之后，触发这个函数
this.currentPage = val; //动态改变当前页
userApi.search(val, this.pageSize, this.searchMap).then(response => {
this.list = response.data.rows
this.total = response.data.total
})
}时间戳转成普通时间方法代码：
代码语言：javascript复制 timestampToTime (row, column) {
var date = new Date(row.regdate) //时间戳为10位需*1000，时间戳为13位的话不需乘1000
var Y = date.getFullYear() '-'
var M = (date.getMonth() 1 < 10 ? '0' (date.getMonth() 1) : date.getMonth() 1) '-'
var D = date.getDate() ' '
var h = date.getHours() ':'
var m = date.getMinutes() ':'
var s = date.getSeconds()
return Y M D h m s
}使用：
代码语言：javascript复制 <el-table-column prop="regdate" label="注册日期" :formatter="timestampToTime"></el-table-column>
<el-table-column prop="updatedate" label="修改日期" :formatter="timestampToTime"></el-table-column>总结：特别要注意每次切换页码和展示量的时候，要动态修改对应页码，不然会出现切换页码还是展示默认10条数据量，代码有注释，可以看（//动态改变当前页）
