vue怎么使用elementUI分頁實現(xiàn)切換頁面時返回頁面頂部

這篇文章主要講解了“vue怎么使用elementUI分頁實現(xiàn)切換頁面時返回頁面頂部”，文中的講解內(nèi)容簡單清晰，易于學(xué)習(xí)與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學(xué)習(xí)“vue怎么使用elementUI分頁實現(xiàn)切換頁面時返回頁面頂部”吧！

使用elementUI分頁實現(xiàn)切換頁面時返回頁面頂部

原理

給elementUI分頁組件的切換頁面時觸發(fā)事件（在這里就是handleCurrentChange函數(shù)）添加一個跳轉(zhuǎn)到頁頂?shù)姆椒纯伞?/p>

實現(xiàn)

<!-- 分頁組件 -->
<el-pagination
 @current-change="handleCurrentChange"
 >
</el-pagination>

//跳到頁頂
scrollTop(selector) {
  let element = selector && document.querySelector(selector) || window;
  element.scrollTo(0, 0);
},
handleCurrentChange(val) {
    ...
    this.scrollTop()
}

element-ui分頁el-pagination的坑

1.所有的信息都必須的動態(tài)的

<el-pagination
  class="pull-right clearfix"
  @size-change="handleSizeChange"
  @current-change="handleCurrentChange"
  :current-page.sync="pageNo"
  :page-sizes="pageSizesList"
  :page-size="pageSize"
  layout="total, sizes, prev, pager, next, jumper"
  :total="totalDataNumber">
</el-pagination>

2.數(shù)據(jù)在data里面

pageNo: 1,
pageSize: 10,
pageSizesList: [10, 15, 20, 30, 50],
tableData: [],//返回的結(jié)果集合
totalDataNumber: 0,//數(shù)據(jù)的總數(shù),

3.這是重中之重，認(rèn)真我的認(rèn)證

this.$http({
  method: 'POST',
  url: '/api/Acs/QueryAccessLog',
  data: requestData
}).then(function (resp) {
  console.log(resp);
  if (resp.data.Data.Result.length > 0) {
    likeThis.tableData = resp.data.Data.Result;
    likeThis.totalDataNumber = resp.data.Data.Total;
    likeThis.listLoading=false;
  } else {
    likeThis.tableData = [];
    likeThis.totalDataNumber = 0;
  }
})

//改變每頁顯示數(shù)量
handleSizeChange(val){
  var likeThis=this;
  var pageSize = `${val}`;
  this.pageNo=1
  this.pageSize= parseInt(pageSize);
  console.log('pageSize: '+pageSize);
  this.$nextTick(() =>
    this.getAndDraw(1,pageSize,function (resp) {
      likeThis.totalDataNumber = resp.data.Data.Total;
    })
  )
},

     //改變頁碼
      handleCurrentChange(val){
        var pageSize=this.pageSize;
//        this.pageNo=pageNo;
        console.log('pageSize:'+this.pageSize)
        this.getAndDraw(parseInt(pageNo),parseInt(pageSize));
      },

感謝各位的閱讀，以上就是“vue怎么使用elementUI分頁實現(xiàn)切換頁面時返回頁面頂部”的內(nèi)容了，經(jīng)過本文的學(xué)習(xí)后，相信大家對vue怎么使用elementUI分頁實現(xiàn)切換頁面時返回頁面頂部這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是億速云，小編將為大家推送更多相關(guān)知識點的文章，歡迎關(guān)注！