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、当我调用后台的方法时，当后台给我们传入的值是多个的时候我们可以在计算中先定义

这里我们写在<template>中，

             <div v-if="activeName=='first'">
                    <div class="block" style="text-align:right;">
                        <el-pagination @size-change="sizeChange" @current-change="currentChange" :current-page="1" :page-sizes="[10, 20, 30, 40]" :page-size="page.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="page.totalRecords">
                        </el-pagination>
                    </div>
                </div>

我们将我们用的数据首先定义一下放到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.自己定义的一个方法名();
    }