12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061 |
- <!--
- props:{
- size: 当前页的页数,
- sizes: 下拉的条数,
- total: 总条数,
- currentPage: 当前页
- }
- @change 发生改变
- -->
- <template>
- <div class="block">
- <el-pagination
- @size-change="handleSizeChange"
- @current-change="handleCurrentChange"
- :current-page.sync="page.currentPage"
- :page-sizes="page.sizes"
- :page-size="page.size"
- :layout=" isSmall ? 'total, sizes, prev, pager, next, jumper' : 'prev, pager, next'"
- :total="page.total">
- </el-pagination>
- </div>
- </template>
- <script>
- export default {
- name: "pagination",
- props: {
- page: {
- type: Object
- },
- isSmall:{
- type:Boolean,
- default: true
- }
- },
- methods: {
- //当前条数发生改变
- handleSizeChange(val) {
- this.page.size = val;
- this.page.currentPage = 1;
- this.change()
- },
- //当前页发生改变
- handleCurrentChange(val) {
- this.page.currentPage = val;
- this.change()
- },
- //发生改变
- change() {
- this.$emit("change");
- }
- }
- };
- </script>
- <style>
- .el-pagination button, .el-pagination span:not([class*=suffix]) {
- vertical-align: middle;
- }
- .block{
- /* margin-top: 5px; */
- }
- </style>
|