VUE管理系统分页功能

<el-row class="list-card">
            <el-col :span="24">
                <el-card>
                    <el-button type="primary" size="mini" round style="margin-bottom: 6px;" @click="Registration()">
                        会员登记
                    </el-button>
                    <el-table :data="pageList" style="width: 100%" border stripe max-height="400">
                        <el-table-column type="selection" width="55">
                        </el-table-column>
                        <el-table-column fixed prop="memberName" label="姓名" width="120">
                        </el-table-column>
                        <el-table-column prop="memberNum" label="会员号" width="140">
                        </el-table-column>
                        <el-table-column prop="memberSex" label="性别" width="100">
                        </el-table-column>
                        <el-table-column prop="memberAge" label="年龄" width="100">
                        </el-table-column>
                        <el-table-column prop="date" label="注册日期" width="180">
                        </el-table-column>
                        <el-table-column prop="phone" label="电话号码" width="120">
                        </el-table-column>
                        <el-table-column prop="status" label="审核状态" width="120">
                        </el-table-column>
                        <el-table-column prop="memberAddr" label="住址" width="200">
                        </el-table-column>
                        <el-table-column fixed="right" label="操作" width="320">
                            <template slot-scope="scope">
                                <el-button type="warning" size="medium" @click="delMember(scope.row)">
                                    移除
                                </el-button>
                                <el-button type="primary" size="medium">
                                    审核
                                </el-button>
                                <el-button type="info" size="medium">
                                    查看
                                </el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                    <!--分页-->
                    <diV style="float: right;margin: 10px;">
                        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                            :current-page="DefaultcurrentPage"  :page-sizes="[10, 20, 30, 40]" :page-size="10"
                            layout="total, sizes, prev, pager, next, jumper" :total="this.tableData.length">
                        </el-pagination>
                    </diV>
                </el-card>
            </el-col>
        </el-row>
JS代码段
       data() {
            return {
                DefaultcurrentPage: 1,//当前页
                pageSize: 10,//默认页面数据条数
                pageList: [],//分页数组
                tableData: [],//存放后端数据数组
            }
        },
      mounted() {
            this.getList()
        },
      methods{
         getList() {
                this.axios.post('接口', {}).then(res => {
                    this.tableData = res.data
                    this.currentChangePage(this.tableData, 1);
                })
            },
             //分页
            handleSizeChange: function (pageSize) { // 每页条数切换
                this.pageSize = pageSize
                this.handleCurrentChange(this.DefaultcurrentPage);
            },
            handleCurrentChange: function (currentPage) {//页码切换
                this.DefaultcurrentPage= currentPage
                this.currentChangePage(this.tableData, currentPage)
            },
            currentChangePage(list, currentPage) {
                let from = (currentPage - 1) * this.pageSize;
                let to = currentPage * this.pageSize;
                this.pageList = [];
                for (; from < to; from++) {
                    if (list[from]) {
                        this.pageList.push(list[from]);
                    }
                }
            }
        }