element ui分页查询

<div class="table-pagination">
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage"
          :page-sizes="[5, 10, 15,20]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper"
          :total="totalCount">
        </el-pagination>
      </div>

:page-sizes="[5, 10, 15,20]" 

 [5, 10, 15,20]表示四个选项，每页显示多少条。这四个值自己看着给啊发😉

 data() {

    return {

      pageSize:5,//一页总共显示几条数据

      totalCount:1 ,//总的数据

     currentPage:1 ,//前往第几页

       }

} 

   loadData() {

      let params = {

        colunms: this.pageSize,//一页总共显示几条数据

        pages: this.currentPage //页数

      }

      getAction(this.url.list,, params).then(res => {

         蓝色背景这个是我的接口啊，这里记着要写你自己的接口哟

        console.log('获取数据:', res)

        this.tableData = res.data.list

        this.totalCount = res.data.total

       这里就要看后台怎么给你的数据显示

      })

    },

    handleSizeChange(val) {

      console.log(`每页`,val);

      this.pageSize = val

      this.loadData()

    },如果实在分不清楚那个是每页显示的数据，那个是多少页，先在这俩个方法打log哟

    handleCurrentChange(val) {

      console.log(`当前页:`,val);

      this.currentPage = val

      this.loadData()

  },

这个是效果哟