前端VUE Element分页使用

1. 页面使用分页组件

            <div class="lefthome">
                
                <div style="margin-top: 10px">
                    <el-table
                            border
                            :cell-style="{padding: '0'}"
                            :row-style="{height: '55px'}"
                            :data="tableDataFeedingStrategy"
                            style="width: 100%;margin: 0 auto;">
                        <el-table-column
                                property="feedingPolicyTitle"
                                label="饲喂名称"
                                width="168">
                            <template slot-scope="scope">
                                <input type="text" style="width: 100%"
                                       v-model="scope.row.feedingPolicyTitle"/>
                            </template>
                        </el-table-column>
                       
                        <el-table-column
                                property="dataReadTimeStr"
                                label="读取数据时间/每天"
                                width="190">
                            <template slot-scope="scope">
                                <el-time-select
                                        class="borderClear"
                                        v-model="scope.row.dataReadTimeStr"
                                        :picker-options="{
                                        start: '00:00',
                                        step: '00:01',
                                        end: '23:59' }"
                                        placeholder="时间">
                                </el-time-select>
                                <el-switch class="ma_right"
                                           v-model="scope.row.dataReadEnable"
                                           active-color="#13ce66"
                                           inactive-color="#e88a8a">
                                </el-switch>
                            </template>
                        </el-table-column>    
                    </el-table>
                </div>
                <div style="margin-top: 15px">
                    <el-pagination
                            background
                            @size-change="pageSizeChange"
                            @current-change="pageCurrentChange"
                            :current-page="pageForm.current"
                            :page-sizes="pageForm.pageSizes"
                            :page-size="pageForm.pageSize"
                            layout="total, sizes, prev, pager, next, jumper"
                            :total="pageForm.total">
                    </el-pagination>
                </div>
            </div>

2.data声明分页数据

data() {
	return {
		tableDataFeedingStrategy: [],
		pageForm: {
			total: null, // 总条目数
			pages: null,  // 总页数
			current: 1, // 当前的页码
			pageSize: 10, // 每页显示条目个数
			pageSizes: [5, 10, 15, 20, 30, 40, 50]
		}
	}
},

3.请求后台数据及分页调用事件

getParams() {
	console.log("执行请求全部数据")
	allFeedingStrategy('get', {
		uid: this.userId,
		current: this.pageForm.current, //传给后台的页数
		size: this.pageForm.pageSize, //传给后台的每页要显示的总数
		feedingPolicyTitle: ''
	}).then(res => {
		if (res.code == 200) {
			this.tableDataFeedingStrategy = res.data.records;
			let pages = res.data.pages - 0;
			let total = res.data.total - 0;
			this.pageForm.pages = pages;
			this.pageForm.total = total;
		} else {
			this.$message.error(res.desc)
		}
	})
},

4.分页配置事件

            /************分页**********/
            pageSizeChange(val) {
                this.pageForm.pageSize = val;
                this.getParams();
            },
            pageCurrentChange(val) {
                this.pageForm.current = val;
                this.getParams();
            },