ElementUI implements front-end paging

To write pagination according to his documents, the most important thing is how to deal with the data displayed in El table

<el-table :data="AllCommodityList.slice((currentPage-1)*pagesize,currentPage*pagesize)" border style="width: 100%">

The most important thing is to deal with the red mark above

Allcommoditylist is the background data, CurrentPage is the current page, the initial value is 0, PageSize is the current data to be displayed, the initial value is 10

The slice() method returns the selected data from an existing array

//1.Paging component
<el-pagination
    @size-change="handleSizeChange"
    @current-change="handleCurrentChange"
    :current-page="currentPage"
    :page-sizes="[10, 20, 30]"
    :page-size="pagesize"
    layout="total, sizes, prev, pager, next, jumper"
    :total=parseInt(total)>
  </el-pagination>

//2.control methods
    handleSizeChange(val) {
        this.pagesize = val;
    },
    handleCurrentChange(val) {
        this.currentPage = val;
    },

Read More: