elementUI动态获取数据列表展示并分页
HTML:
<div style="width:100%;height:100%;margin-left:50px">
<tp-table
:data="tableData" //接口获取的数据(分页后的数据)
style="width:100%;padding:0 10px;overflow-y:auto;overflow-x:auto;"
height="400">
<tp-table-column
prop="UserID"
label="手机号"
width="180"
>
</tp-table-column>
<tp-table-column
sortable
prop="CreateTimeStr"
label="访问时间"
width="180">
</tp-table-column>
<tp-table-column
prop="Action"
label="资产库名称"
width="180">
</tp-table-column>
<tp-table-column
prop="Ext4"
label="操作">
</tp-table-column>
</tp-table>
<div style="position: fixed;right: 10px;">
<tp-pagination
@size-change="handleSizeChange"//改变每页战术数据个数
@current-change="handleCurrentChange"//改变当前页
:current-page="currentPage"//当前页
:page-sizes="[10,20, 50, 100, 150,200]"//每页多少条可选
:page-size="pagesize"//当前每页多少条
layout="total, sizes, prev, pager, next, jumper"
:total="totalNum">
</tp-pagination>
</div>
</div>
分页操作的方法,更改当前页码和当前每页展示数据个数
method:
handleSizeChange(size) {
this.pagesize = size;
console.log(`每页 ${size} 条`);
this.LoadPageData()
},
handleCurrentChange(currentPage) {
this.currentPage = currentPage;
console.log(`当前页: ${currentPage}`);
this.LoadPageData()
},
接口异步获取数据:
LoadPageData:function () {
var that = this;
that.tableData=[]
var filter = JSON.stringify(postData)
this.$utils.sgApi.getDataAsync({
url:(FrameSGHost + "wrpframe-GetUserOpData&filter="+filter),
method:"get",
data:null,
sucCallbackFunc:(retData, textStatus) => {
if(retData.total>0){
that.totalNum = retData.total
that.tableData= retData.rows
}
}
})
},