elementUI的el-pagination分页

<el-pagination  :current-page="pagination.currentPage"
                                @size-change="handleSizeChange"
                                @current-change="handleCurrentChange"
                                :page-sizes="pagination.pageSizes"
                                :page-size="pagination.pageSize"
                                layout="total, sizes, prev, pager, next, jumper"
                                :total="pagination.total"></el-pagination>

data() {
            return {
                pagination: {
                  total: 0, // 总页数
                  currentPage: 1, // 当前页数
                  pageSize: 20, // 每页显示多少条
                  pageSizes:[10,20,30,40], // 每页显示多少条
                },
             }
}

methods: {
          handleSizeChange(val) {
            console.log(`每页 ${val} 条`);
          },
          //当前页码改变时触发的函数，即你点击 1 ， 2 ， 3 ，它就跳到相应的数据页
          handleCurrentChange(val) {
            console.log(`当前页: ${val}`);
          },
 }

@size-change：当每页显示的条数发生改变是触发，即：原先显示5条/页，现在改成了10条/页
@current-change：当前页码改变时触发的函数，即你点击 1 ， 2 ， 3 ，它就跳到相应的数据页

:page-sizes：上图中的每页显示的条数2/4/6/8/10的选项设置，这些2,4,6…其实是在:page-sizes属性中定义的。

:page-size：每页显示的数据的条数。当我们点击@size-change事件，然后从:page-sizes中选择相应的条数，element会将我们选中的条数赋值给属性:page-size，然后去后台查询数据。

:total 分页导航中显示的总条数。是在后台查询数据后才赋值的

layout：表示需要显示的内容，用逗号分隔，布局元素会依次显示。prev表示上一页，next为下一页，pager表示页码列表，除此以外还提供了jumper和total，size和特殊的布局符号->，->后的元素会靠右显示，jumper表示跳页元素