分页实现 ＜th-pagination＞

 

 <th-pagination :total="logTotalNum" show-total :current="logPageIndex" :page-size="logPageSize" @on-change="operationLog" ></th-pagination>

在data里面定义我们要用到的东西

data(){
    return{
      totalNum: 0,
      pageSize: 10,
      pageIndex: 1,
   }
}

3,属性：

show-sizer=""
//改变page-size,例如一页展示多少条
show-elevator=""
//电梯，可以快速切换到某一页

4.事件

@on-change="getTableData"

 getTableData(index) {
      this.pageIndex = index;
      this.isLoading = true;
      searchBossdataList({
        operationName: JSON.parse(localStorage.getItem('authority_user')).loginName,
        shopId: this.formItem.shopId,
        exempt: this.formItem.exempt,
        pageIndex: this.pageIndex,
        pageSize: this.pageSize
      }).then(res => {
        this.tableData = res.data.list || [];
        this.totalNum = res.data.total;
        this.isLoading = false;
      }).catch(() => {
        this.isLoading = false;
      });
    },
就是每次我们页码切换就重新请求那一页的数据



 @on-page-size-change="pageSizeChange"

//这个是我们切换一页展示多少条数据的事件
pageSizeChange(pageSize) {
      console.log('多少条每页');
      this.pageSize = pageSize;
      this.getTableData(1);
    },

其中searchBossdataList，是查询表单数据的接口！

样式

.th-pagination{
  margin-top: 20px;
  text-align: right;
}