<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 loaded components
number of pieces of page-sizes the option to display per page
number of the article options page-size page shows the
current-page current page
total total number of
size-change will be called upon to change the page shows the number of
current -change will be called upon to change the current page number
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);
}
}
};