vue+elementUI动态获取数据列表展示并分页

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
                  }
                 
              }
          })
          },