vue elementUI 分页 - Pagination - 前端分页
版本
vue 2.9.6
element-ui: 2.15.6
目标效果
Car.vue
点击查看代码
<template>
<div class="app">
<el-table size="small" :data="tableData.slice((currentPage-1)*pageSize, currentPage*pageSize)" highlight-current-row v-loading="loading" border element-loading-text="拼命加载中" style="width: 100%;">
<el-table-column prop="brand" label="品牌" width="180"></el-table-column>
<el-table-column prop="model" label="车型" width="180"></el-table-column>
<el-table-column prop="price" label="指导价"></el-table-column>
</el-table>
<div class="tabListPage">
<el-pagination
background
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="currentPage"
:page-sizes="pageSizes"
:page-size="100"
layout="total, sizes, prev, pager, next, jumper"
:total="totalCount">
</el-pagination>
</div>
</div>
</template>
<script>
export default {
data() {
return {
tableData: [],
currentPage: 1,
totalCount: 1,
pageSizes: [1, 2, 3, 4],
pageSize: 1
}
},
methods: {
getData() {
this.tableData = [{
brand: '一汽-大众奥迪',
model: '奥迪A4L',
price: '30.58-39.68万',
},{
brand: '阿尔法·罗密欧',
model: 'Giulia',
price: '37.98-158.00万',
},{
brand: '北京奔驰',
model: '奔驰C级',
price: '32.52-37.22万',
},{
brand: '华晨宝马',
model: '宝马3',
price: '29.39-40.99万',
},{
brand: '比亚迪',
model: '海豹',
price: '20万',
},{
brand: '东风本田',
model: '英仕派',
price: '17.99-25.59万',
},{
brand: '广汽本田',
model: '雅阁',
price: '16.98-25.98万',
},{
brand: '上汽通用别克',
model: '君威',
price: '19.68-24.98万',
},{
brand: '上汽通用别克',
model: '君越',
price: '21.98-28.98万',
},{
brand: '东风标致',
model: '标致508',
price: '15.97-22.47万',
},{
brand: '上汽通用五菱',
model: '宝骏RC-6',
price: '8.48-12.38万',
},{
brand: '一汽奔腾',
model: '奔腾B70',
price: '9.99-14.59万',
}]
this.totalCount = 12
},
handleSizeChange(val) {
this.pageSize = val
// this.currentPage = 1
console.log(`每页 ${val} 条`)
},
handleCurrentChange(val) {
this.currentPage = val
console.log(`当前页: ${val} `)
}
},
created: function() {
this.getData()
}
}
</script>
<style>
.page-box {
margin: 10px auto;
}
</style>
让记忆空白!