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();
},