How to use paging component element-ui in

Paging component inside the property more, take a look at the following official to have which properties

<el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage4"
      :page-sizes="[100, 200, 300, 400]"
      :page-size="100"
      layout="total, sizes, prev, pager, next, jumper"
      :total="400">
    </el-pagination>

@ Size-change = "handleSizeChange" This means that the number of data per page pagesize monitor, a function is defined in the methods of

handleSizeChange(newSize){
      // 将最新的页面条数传递到queryInfo中
      this.queryInfo.pagesize=newSize
      // 重新刷新渲染页面数据
      this.getgoodsList()
    }

queryInfo page attribute is defined in the content object data
@ current-change = "handleCurrentChange" the current page number, if changes occur to trigger the function
:current-page="queryInfo.pagenumcurrently rendered page number "should be bound to queryInfo in pagenum

:page-sizes="[100, 200, 300, 400]"

Indicate how many pieces of data can be displayed per page

:page-size="100"

Current data indicate how many page impressions

layout="total, sizes, prev, pager, next, jumper"

Indicate which components need to function, the function does not need to delete the line corresponding English

:total="total"

total should be bound to the current total number of pieces of data in the data

Released five original articles · won praise 0 · Views 67

Guess you like

Origin blog.csdn.net/weixin_46144394/article/details/104517638