vue+elementui的分页功能

重点在于分页组件的@current-change="触发事件函数"

布局文件：

<!--表格-->
                <div>
                    <el-table
                            :data="result"
                            border
                            style="width: 100%">
                        <el-table-column
                                fixed
                                prop="id"
                                label="ID"
                                width="150">
                        </el-table-column>
                        <el-table-column
                                prop="name"
                                label="分区名称"
                                width="120">
                        </el-table-column>
                        <el-table-column
                                prop="description"
                                label="描述"
                                width="120">
                        </el-table-column>
                        <el-table-column
                                prop="level"
                                label="等级"
                                width="120">
                        </el-table-column>
                        <el-table-column
                                prop="picture"
                                label="图标"
                                width="150">
                        </el-table-column>
                        <el-table-column
                                prop="createTime"
                                label="添加时间"
                                width="150">
                        </el-table-column>
                        <el-table-column
                                prop="updateTime"
                                label="最近更新"
                                width="150">
                        </el-table-column>
                        <el-table-column
                                fixed="right"
                                label="操作"
                                width="100">
                            <template slot-scope="scope">
                                <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
                                <el-button type="text" size="small">编辑</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
                <!--分页-->
                <div style="padding-top: 10px">
                    <el-pagination
                            background
                            layout="prev, pager, next"
                            :total="1000"
                            @current-change="getProjectList">
                    </el-pagination>
                </div>

 其中的@current-change是当前页发生改变时触发的函数，因为<el-pagination>会自己把total，page-count，page-size等分页相关的参数传入（大概吧），所以不用在方法里面传参，即不用写成 @current-change="getProjectList（xx, xx, xx）"也可以完成分页功能。其中getProjectList代码如下：

            /***
             * @param page 当前页
             * @param limit 每页显示数目
             */
getProjectList(page = 1,limit = 2){//分页查询project数据
                const _this = this;
                this.$axios({
                    // 默认请求方式为get
                    method: 'get',
                    url: 'http://localhost:8001/projectservice/page/'+page+"/"+limit,
                    // 传递参数
                    params: {
                    },
                    // 设置请求头信息
                    headers: {
                    },
                    responseType: 'json'
                }).then(response => {
                    // 请求成功
                    _this.result = response.data.data.rows
                    _this.total = response.data.data.total
                }).catch(error => {
                    // 请求失败，
                    console.log(error)
                });
            }

效果如下：