分页可编辑每页条数

效果图

一页想多少条，pageSize可随意自定义编辑， 然后按下回车键确认！！！

第一步

在src > compoments > 写一个组件

代码如下

<template>
  <!-- 全局分页功能 -->
  <div class="content">
    <el-pagination
      :total="total"
      :current-page="currentPage"
      :page-size="pageSize"
      background
      small
      layout="prev, pager, next, jumper"
      @current-change="handleCurrentChange"
    />
    <div class="edit">
      <el-input v-model="pageSizes" placeholder="条数/页"  @keyup.enter.native="editPageSizes"/>
    </div>
    <div class="total-box">
     共 {{total}} 条
    </div>
  </div>
</template>

<script>
export default {
  name: 'PaginationPaging',
  props: {
    total: {
      type: Number, // 总条数
      default: 0
    },
    currentPage: {
      type: Number, // 当前页
      default: 1
    },
    pageSize: {
      type: Number, // 每页的条数
      default: 20
    }
  },
  data() {
    return {
      pageSizes: ''
    }
  },
  methods: {
    // 当前页事件
    handleCurrentChange(val) {
      this.$emit('currentChange', val)
    },
    // 用户自定义每页条数需要的触发事件
    editPageSizes() {
      this.$emit('editPagesizes', Number(this.pageSizes))
    }
  }
}
</script>

<style lang="scss" scoped>
.content {
  display: flex;
  justify-content: flex-end;
  
  ::v-deep.edit {
    height: 30px;
    width: 60px;
    margin-top: 2px;
    margin-left: 20px;
    display: flex;
    justify-content: space-around;
    .el-input__inner {
      height: 26px !important;
      height: 30px;
      width: 60px;
      text-indent: 0em;
      font-size: 12px;
      padding: 0;
      text-align: center;
    }
    .el-button {
      height: 26px;
    }
  }
  .total-box {
    display: inline;
    padding: 7px 7px 0;
  }
}
</style>

第二步

在整个项目的main.js文件里面加上这两段代码

// 引入分页组件
import Pagination from '@/components/Pagination'
// 注册分页组件
Vue.component('pagination', Pagination)

第三步

在随便哪个 点vue 文件里面， 直接可以使用

<template>
  <pagination 
  :total="pageTotal" 
  :current-page="pageNo" 
  :pageSize="pageSize"
  size="pageSize" 
  @currentChange="handleCurrentChange" 
  @editPagesizes="editPageSizes"/>
</template>
<script>
export default { 
  data() {
    return {
      pageNo: 1,
      pageSize: 20,
      pageTotal: 0,
    }
  },
  methods: {
    // 修改当前页事件
    handleCurrentChange(pageNo) {
      this.pageNo = pageNo
      console.log("我是第几页",this.pageNo);
    },
    // 修改分页的每页的条数
    editPageSizes(val) {
      this.pageSize = val
      console.log("我是多少条",this.pageSize);
    }
  }
}
</script>

说明

在input里面输入想要的条数， 按下回车键， 可实现效果。也可以根据自己的需要，改成失焦触发事件。