Vue分页组件

    <el-pagination
            @size-change="sizeChange"
            @current-change="currentPage"
            :current-page="page"
            :page-sizes="[6, 12, 18, 24]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
        >
        </el-pagination>

理解:

   分页
   属性：
     @size-change="sizeChange"  每页显示条数改变时触发
     @current-change="currentPage"  当前页码改变时触发
     :current-page="page"  当前在第几页上
     :page-sizes="[6, 12, 18, 24]"  每页显示多少条的选项
     :page-size="pageSize"  每页显示多少条
     layout="total, sizes, prev, pager, next, jumper"  页码栏的布局
     :total="total" 数据的总条数

数据控制变量

```javascript
    export default {

sizeChange(val) {
            this.pageSize = val;
            this.getData();
            // console.log(`每页 ${val} 条`);
        },
    currentPage(val) {
            this.page = val;
            this.getData();
            // console.log(`当前页: ${val}`);
        },

    }

data() {
    return {
        pageSize: 6, //每页显示多少条
        page: 1, //当前在第几页上
        total: 0, //数据总条数
    };
},

}