Vue.js-分页功能在实际前后台交互时的写法（详细版）
这里所说的一下功能是基于vue.js,element UI，vuex
一、很多项目都会有分页的功能：现在我们要实现一个分页的功能，
http://element-cn.eleme.io/#/zh-CN/component/pagination
在element官网中，找到这个后，怎么与实际的后台数据结合使用，
下面的这些代码涉及到的功能有：
1、调用后台方法，实现数据调用，将后台String类型的数据装换成json格式的字符串，
2、接收到后台数据后，将数据存入到数组中，
3、因为数组不能像对象一样在引用到里面的数据的时候，对象名.里面的内容
4、所以当我们想要得到数组中的东西的时候，我们就要用到es6中的forEach来遍历数据
5、当我调用后台的方法时，当后台给我们传入的值是多个的时候我们可以在计算中先定义
这里我们写在中，
我们将我们用的数据首先定义一下放到data中
export default {
name: 'workweibo_list',
data() {
return {
tableData: [],
page: {
pageNo: 1, //当前页
pageSize: 10, //每页条数, 默认10条
totalRecords: 0, //总条数
totalPages: 0, //总页数
}, //已完成项目翻页
}
},这个值是后台给我们传入的值，我们可以将这个值先放到基
computed: {
params() {
let param = {
pageNo: this.page.pageNo,
pageSize: this.page.pageSize,
xmrq: this.rqDate,
}
//拷贝，
return Object.assign({}, param);
},
}, methods: {
...mapActions({
_后台方法名(自己命名): TYPES.后台方法名,//前面的命名规则因个人习惯命名
}),
//获取工作日志列表
自己定义一个方法名() {
this._后台方法名(自己命名).(this.params).then(result => {
// 一般后天用字符串，前段用json所以这里涉及到字符串的转换
//这个语法就将后台传来的字符串转换成前段可以截取的json
let data = JSON.parse(result);
// 看后台的返回值，一般出现0就是成功，出现500就是失败了
if (data.status == 0) {//上面自己定义的一个数组将这个数组接收我们后台传入的数据
this.tableData = data.result.list;//这个地方不一定有list,要看数据反馈的是否有层级
this.tableData.forEach(item => {
item.RQ = item.RQ.substr(0, 10)
})
this.page.totalRecords = data.result.totalRecords;//分页
}
})
},
//翻页
sizeChange(val) {
this.page.pageSize = val;
this.自己定义一个方法名();
},
currentChange(val) {
this.page.pageNo = val;
this.自己定义一个方法名();
},
},可以让这个在页面初始化的时候显示出来
mounted() {
this.自己定义的一个方法名();
}