vue+ElementUI 分页

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

现在写的Vue+ElementUI是自己写的是文档上的死数据，所以在分页上自己分割了一下，如果有接口话，会方便一点，使用的是分页的完整功能。都差不多啦！撸起来

<template>
<div>
<el-table :data="tableData.slice((limitePage.page-1)*limitePage.limit,limitePage.limit*limitePage.page)" border style="width: 100%">
<el-table-column fixed prop="date" label="日期" width="150">
</el-table-column>
<el-table-column prop="name" label="姓名" width="120"> </el-table-column>
<el-table-column prop="province" label="省份" width="120">
</el-table-column>
<el-table-column prop="city" label="市区" width="120"> </el-table-column>
<el-table-column prop="address" label="地址" width="300"> </el-table-column>
<el-table-column prop="zip" label="邮编" width="120"> </el-table-column>
<el-table-column fixed="right" label="操作" width="100">
<template slot-scope="scope">
<el-button @click="handleClick(scope.row)" type="text" size="small"
v-if="scope.row.date != '2016-05-02'"
>查看</el-button
>
<el-button type="text" size="small">编辑</el-button>
</template>
</el-table-column>
</el-table>
<div class="block">
<span class="demonstration"></span>
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="limitePage.page"
:page-sizes="[2, 4]"
:page-size="limitePage.limit"
layout="total, sizes, prev, pager, next, jumper"
:total="tableData.length"
>
</el-pagination>
</div>
</div>
</template><script>
export default {
data() {
return {
tableData: [
{
date: "2016-05-03",
name: "王小虎",
province: "上海",
city: "普陀区",
address: "上海市普陀区金沙江路 1518 弄",
zip: 200333
},
{
date: "2016-05-02",
name: "王小虎",
province: "上海",
city: "普陀区",
address: "上海市普陀区金沙江路 1518 弄",
zip: 200333
},
{
date: "2016-05-04",
name: "王小虎",
province: "上海",
city: "普陀区",
address: "上海市普陀区金沙江路 1518 弄",
zip: 200333
},
{
date: "2016-05-01",
name: "王小虎",
province: "上海",
city: "普陀区",
address: "上海市普陀区金沙江路 1518 弄",
zip: 200333
},
],
limitePage:{
limit:2,
page:1
}
};
},
methods: {
handleClick(row) {
console.log(row);
},
handleSizeChange(val) {
this.limitePage.limit = val;
},
handleCurrentChange(val) {
this.limitePage.page = val
}
}
};
</script><style>
</style>