element-ui的分页只有固定的页数选择,我们可以对其进行封装,变成自定义输入进行分页.
    效果如下:
    image.png
    代码如下:

    1. <template>
    2.   <div class="sui-pagination">
    3.     <div class="page-input">
    4.       <span>每页显示</span>
    5.       <el-input
    6.         class="small"
    7.         style="padding:0 5px;"
    8.         type="number"
    9.         min="0"
    10.         v-model.number="inputNum"
    11.         @keyup.enter.native="setPage"
    12.       ></el-input>
    13.       <span>条，输入后按回车键</span>
    14.     </div>
    15.     <el-pagination
    16.       :background="true"
    17.       :current-page="params.pageNo"
    18.       layout="total, prev, pager, next, jumper"
    19.       :page-size="params.pageSize"
    20.       :total="total"
    21.       @current-change="handleCurrentChange"
    22.       @size-change="handleSizeChange"
    23.       style="text-align:right;"
    24.     ></el-pagination>
    25.   </div>
    26. </template>
    28. <script>
    29. export default {
    30.   name:"sui-pagination",
    31.   props:{
    32.     total:{
    33.       type:Number,
    34.       default:0
    35.     },
    36.     params: {
    37.       type:Object,
    38.       default:{
    39.         pageNo:1,
    40.         pageSize:10
    41.       }
    42.     }
    43.   },
    44.   data() {
    45.     return {
    46.       inputNum: 10, // 默认输入的条数
    47.     }
    48.   },
    49.   methods: {
    50.     setPage(event) {
    51.       let num = event.target.value
    52.       let re = /^[0-9]+$/ // 做一下数据过滤
    53.       let state = re.test(num)
    54.       if (state) {
    55.         this.handleSizeChange(num);
    56.       } else {
    57.         this.handleSizeChange(this.inputNum);
    58.       }
    59.     },
    60.     handleCurrentChange(val) {
    61.       this.$emit('change', {
    62.         pageNo:val,
    63.         pageSize:this.params.pageSize
    64.       })
    65.     },
    66.     handleSizeChange(val) {
    67.       this.$emit('change', {
    68.         pageNo:this.params.pageNo,
    69.         pageSize:val
    70.       })
    71.     }
    72.   },
    73. }
    74. </script>
    76. <style  lang="scss" scoped>
    77. .sui-pagination {
    78.   display: flex;
    79. }
    80. .page-input {
    81.   display: inline-block;
    82.   display: flex;
    83.   align-items: center;
    84.   margin:15px 35px 0px 0px;
    85.   > span {
    86.     display: inline-block;
    87.     color: #8a8e98;
    88.     font-size: 14px;
    89.     user-select: none;
    90.     white-space: nowrap;
    91.   }
    92.   .small {
    93.     width: 78px;
    94.     padding: 0 5px;
    95.   }
    96. }
    97. </style>

    使用方法:

    1. <sui-pagination 
    2.   class="width-47" 
    3.   :total="total" 
    4.   :params="params" 
    5.   @change="pageChanges">
    6. </sui-pagination>
    8. params:{
    9.     pageNo:,
    10.   pageSize:,
    11.   ...
    12. }
    14. total:总数
    16. pageChanges(params) {
    17.   this.params.pageNo = params.pageNo;
    18.   this.params.pageSize = params.pageSize;
    19.   this.fetchData(); // 执行接口分页查询
    20. },