如果只放el-pagination组件，只是一个静态的分页展示，还需要绑定数据列表，达到动态分页功能。
静态展示如下

对于el-pagination，配置代码如下：

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

其中最主要的几行代码如图：

对于currentPage、pageSize都要在数据中定义一下，如图

对于handleSizeChange、handleCurrentChange都要实现一下该函数

    handleSizeChange(val) {
      this.pageSize = val
    },
    handleCurrentChange(val) {
      this.currentPage = val
    },

接下来是最最关键的一步，需要绑定数据加载
对于需要动态加载的组件，进行绑定，比如说绑定到el-table或者el-card中，我的数据储存在carddata中，.slice就是用来分割数据的，根据当前页面的大小以及页面定位进行数据的展示。

<el-card v-for="item in carddata.slice((currentPage - 1) * pageSize, currentPage * pageSize)" :key="item.value">
</el-card>

然后就可以进行页面跳转啦！如图成功实现

然后点击第二页就可以加载出接下来的数据了！