Elemet-ui表格+分页

1前端控制分页

:data=“tableData.slice((currentPage-1)pageSize,currentPagepageSize)” 现在是没对接数据之前由前端来控制分页
:total=“tableData.length” 表格长度自己计算

/**
* ceshi.vue
*
* ceshi
*
* @author  自己名字
*/
<template>
    <div>
            <!--表格-->
            <div style="margin-top: 10px;">
                <el-table
                        :data="tableData.slice((currentPage-1)*pageSize,currentPage*pageSize)"
                        style="width: 100%"
                        height="528"
                        :header-cell-style='styleObj'>
                    <el-table-column
                            prop="date"
                            label="日期"
                            width="180">
                    </el-table-column>
                    <el-table-column
                            prop="name"
                            label="姓名"
                            width="180">
                    </el-table-column>
                    <el-table-column
                            prop="address"
                            label="地址">
                    </el-table-column>
                </el-table>
            </div>
            <!--分页-->
            <div class="block">
              <el-pagination
                      align='center'
                      @size-change="handleSizeChange"
                      @current-change="handleCurrentChange"
                      :current-page="currentPage"
                      :page-sizes="[1,5,10,20]"
                      :page-size="pageSize"
                      layout="total, sizes, prev, pager, next, jumper"
                      :total="tableData.length">
              </el-pagination>
            </div>
    </div>
</template>

<script>
    export default {
        name: "组件名字",
        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-01',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 15219 弄'
                }, {
                    date: '2016-05-01',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 15319 弄'
                }, {
                    date: '2016-05-01',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 15419 弄'
                }, {
                    date: '2016-05-01',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1519 弄'
                }, {
                    date: '2016-05-01',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 15519 弄'
                }, {
                    date: '2016-05-01',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 15519 弄'
                }, {
                    date: '2016-05-01',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 15519 弄'
                }, {
                    date: '2016-05-03',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 15166 弄'
                }],
                currentPage: 1, // 当前页码
                total: 20, // 总条数
                pageSize: 5, // 每页的数据条数
                styleObj: {
                    color:'rgba(0,0,0,0.8)',
                    background:'#CED4D9',
                    fontSize:'14px',
                    fontFamily: "PingFangSC-Medium",
                    fontWeight:500,
                }
            }
        },
        methods: {
            handleSizeChange(val) {
                console.log(`每页 ${val} 条`);
                this.currentPage = 1;
                this.pageSize = val;
            },
            handleCurrentChange(val) {
                console.log(`当前页: ${val}`);
                this.currentPage = val;
            },
        },
    }
</script>

2后台分页

这里需要改成 :data="tableData"直接渲染不需要前端进行分页控制了
:total=“total” ，:total设置表格数据的长度 total是我这边后台返回给我的数据长度直接赋值上去就ok

/**
* ceshi.vue
*
* ceshi
*
* @author  自己名字
*/
<template>
    <div>
            <!--表格-->
            <div style="margin-top: 10px;">
                <el-table
                        :data="tableData"
                        id="out-table"
                        style="width: 100%"
                        height="528"
                        :header-cell-style='styleObj'>
                    <el-table-column type="index" label="序号" align="center" width="50"></el-table-column>
                    <el-table-column prop="createUserName" label="创建人" align="center" width="80"></el-table-column>
                    <el-table-column prop="createDate" label="创建时间" align="center" width="100"></el-table-column>
                </el-table>
            </div>
            <!--分页-->
            <div class="block">
            <el-pagination
                    align='center'
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="currentPage"
                    :page-sizes="[1,5,10,20]"
                    :page-size="pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total">
            </el-pagination>
            </div>
    </div>
</template>

<script>
    export default {
        name: "组件名字",
        data(){
            return {
                tableData: [],
                sizeForm:{
                    region:''
                },
                currentPage: 1, // 当前页码
                total: 5, // 总条数 前端先随便写一个~传空的会报错
                pageSize: 5, // 每页的数据条数
                styleObj: {
                    color:'rgba(0,0,0,0.8)',
                    background:'#CED4D9',
                    fontSize:'14px',
                    fontFamily: "PingFangSC-Medium",
                    fontWeight:500,
                },
            }  
        },
        methods: {
            //分页 
            handleSizeChange(val) {
             //   console.log(`每页 ${val} 条`)
                this.currentPage = 1;
                this.pageSize = val; //每页显示的条数
                this.List()
            },
            handleCurrentChange(val) {
               //  console.log(`当前页: ${val}`)
                this.currentPage = val;
                this.List()
            },
            //列表
            List(){
                 this.$axios({
                        url:'地址',
                        method: 'post',
                        data: {
                            param:JSON.stringify({
                                companyId:this.$cookie.get('currentCompanyId') , //公司ID
                                keyword:this.Findkeyword, //搜索关键字
                                cooperationStatus:this.pullDownValue, //合作状态
                                companyType:'', //企业类型：1个体，2企业
                                sqlBeginDate:'', //起始时间
                                sqlEndDate:'', //结束时间
                                createUserName:'' //创始人
                            })
                             , pageParam:({
                                pageIndex:this.currentPage-1, //第几页
                                pageSize:this.pageSize //每页几条
                            })
                            // , pageParam:JSON.stringify({
                            //     pageIndex:0,
                            //     pageSize:20
                            // })
                        },
                        headers:{
                            Authorization:this.$cookie.get('token')
                        }
                        }).then(result =>{
                            if(result.data.code == '000000'){ //成功
                                this.tableData = result.data.data //表格数组
                                this.total = result.data.total //表格数据长度
                            }else if(result.data.code == '100000'){ //失败
                                alert(result.data.message)
                            }  
                        }).catch((error)=>{
                            alert('请求失败')
                        //    console.log(error)
                        });
            },
        },
        created(){
            var $cookie = this.$cookie;
            this.$cookie.get('token')  
            this.getDictItemsByCodes()
            this.List()
        }
    }
</script>

有个问题我一直不明白我这边后台需要接受的json对象要转换成字符串但是呢我遇到下面的问题了
param对象被转成了字符串 没问题
pageParam对象如果转换成字符串axios请求就会报错但是我这边后台说这两个对象必须转换成字符串 所以我很纳闷为什么
有大佬看出其中的问题没（本人一直认为是后台的问题！！！！）可以留言 mua~

pageParam对象转换成字符串就出现下面报错信息 不转换的话数据啥都ok