Vue3使用element plus 分页

1、引入分页组件：

<el-pagination

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

        :total="list.length"

        @size-change="handleSizeChange"

        @current-change="handleCurrentChange"

        :current-page="currentPage"

      />

2、data中初始化变量:

currentPage: 1, //默认页码为1

pagesize: 10, //默认一页显示10条

3、修改表格绑定的数据

:data="list.slice((currentPage - 1) * pagesize, currentPage * pagesize) "

4、methods中添加换页方法

handleSizeChange: function (size) {

      //一页显示多少条

      this.pagesize = size;

    },

    handleCurrentChange: function (currentPage) {

      //页码更改方法

      this.currentPage = currentPage;

    }