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]
}
}
},
1. 页面使用分页组件
<div class="lefthome">
<div sty
阅读背景：
前端VUE Element分页使用
来源：互联网
分享到：
