div部分
<el-table
? :data="tableData.slice((currentPage-1)*pagesize,currentPage*pagesize)"?
綁定數(shù)據(jù)確定關(guān)系
? style="width:100%"
? :default-sort = "{prop: 'date', order: 'descending'}"
>
? <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>
分頁
<el-pagination class="fy"
? ? ? ? ? ? ? layout="prev, pager, next"
? ? ? ? ? ? ? @current-change="current_change"
? ? ? ? ? ? ? :total="total"
? ? ? ? ? ? ? background
>
</el-pagination>
VUEJS部分
vue {
data{
total:1000,//默認(rèn)數(shù)據(jù)總數(shù)
pagesize:9,//每頁的數(shù)據(jù)條數(shù)
currentPage:1,//默認(rèn)開始頁面}
tableData: [{
? date: '2016-05-02',
? name: '王小虎',
? address: '上海市普陀區(qū)金沙江路 1518 弄'
}, {
? date: '2016-05-04',
? name: '王小虎',
? address: '上海市普陀區(qū)金沙江路 1517 弄'
}, {
? date: '2016-05-01',
? name: '王小虎',
? address: '上海市普陀區(qū)金沙江路 1519 弄'
}, {
? date: '2016-05-03',
? name: '王小虎',
? address: '上海市普陀區(qū)金沙江路 1516 弄'
}],
methods:{
created:function(){
? this.total=this.tableData.length;
},
current_change:function(currentPage){
? this.currentPage = currentPage;
},
}
}
