Element-ui 中的分页

<el-table ref="multipleTable" tooltip-effect="dark" border :data="dataList" style="width:100%">
<el-table-column type="selection" > </el-table-column>
<el-table-column type="index"> </el-table-column>
<el-table-column prop="id" label="ID" > </el-table-column>
<el-table-column prop="a" label="标题1" > </el-table-column>
<el-table-column prop="b" label="标题1" > </el-table-column>
<el-table-column prop="c" label="标题1" > </el-table-column>
<el-table-column prop="d" label="标题1" > </el-table-column>
</el-table>
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="currentPage"
:page-sizes="[5, 10, 20, 40]"
:page-size="per_page"
layout="total, sizes, prev, pager, next, jumper"
:total="total">
</el-pagination>

 

layout 加载的组件
page-sizes 每页显示的条数的选项
page-size 每页显示的条数的选项
current-page 当前的页码
total 总条数
size-change 更改每页显示条数时会被调用
current-change 更改当前页码时会被调用

 

export default {
data(){
return{
dataList :[],
total:0,
currentPage:1,
per_page:5,
}
},
mounted(){
this.getList()
},
methods:{
getList(){
var params = {
pagesize: this.per_page,
page: this.currentPage,
};
sendRecoed(params).then(res=>{
if(!res.code)
{
this.dataList = res.data.data;
console.log(res.data.total);
this.total = res.data.total;
this.per_page = res.data.per_page;
this.currentPage = res.data.current_page;
}
});
},
handleSizeChange(val){
this.per_page = val;
},
handleCurrentChange(val)
{
this.currentPage = val;
console.log(val);
}

}
};

 

转载于:https://www.cnblogs.com/dphper/p/11273096.html