elementUI的el-pagination分页

忘是亡心i 2023-07-13 08:28 13阅读 0赞

<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表示跳页元素