1.基础分页
HTML
<el-table v-loading="loading" :data="tableData">
<el-table-column prop="date" label="日期" width="180">
</el-table-column>
<el-table-column prop="name" label="姓名" width="180">
</el-table-column>
<el-table-column prop="address" label="地址">
</el-table-column>
</el-table>
<div class="block">
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="selectParams.currentPage"
:page-sizes="[10, 20, 30, 40]" :page-size="selectParams.pageSize"
layout="total, sizes, prev, pager, next, jumper"
:total="tableData.length">
</el-pagination>
</div>
<el-table v-loading="loading" :data="tableData">
<el-table-column prop="date" label="日期" width="180">
</el-table-column>
<el-table-column prop="name" label="姓名" width="180">
</el-table-column>
<el-table-column prop="address" label="地址">
</el-table-column>
</el-table>
<div class="block">
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="selectParams.currentPage"
:page-sizes="[10, 20, 30, 40]" :page-size="selectParams.pageSize"
layout="total, sizes, prev, pager, next, jumper"
:total="tableData.length">
</el-pagination>
</div>
Script
js
export default {
data() {
return {
selectParams: {
currentPage: 1,
pageSize: 10,
},
loading: false,
tableData: [{
date: '2016-05-02',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}, {
date: '2016-05-04',
name: '王小虎',
address: '上海市普陀区金沙江路 1517 弄'
}]
}
},
methods: {
getTableData() {
this.loading = true
setTimeout(() => {
this.loading = false
}, 1000)
},
handleSizeChange(val) {
console.log(`每页 ${val} 条`);
this.selectParams.pageSize = val
this.getTableData()
},
handleCurrentChange(val) {
console.log(`当前页: ${val}`);
this.selectParams.currentPage = val
this.getTableData()
}
}
}
export default {
data() {
return {
selectParams: {
currentPage: 1,
pageSize: 10,
},
loading: false,
tableData: [{
date: '2016-05-02',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}, {
date: '2016-05-04',
name: '王小虎',
address: '上海市普陀区金沙江路 1517 弄'
}]
}
},
methods: {
getTableData() {
this.loading = true
setTimeout(() => {
this.loading = false
}, 1000)
},
handleSizeChange(val) {
console.log(`每页 ${val} 条`);
this.selectParams.pageSize = val
this.getTableData()
},
handleCurrentChange(val) {
console.log(`当前页: ${val}`);
this.selectParams.currentPage = val
this.getTableData()
}
}
}