element-ui 分页组件添加确定按钮，实现点击按钮后翻页功能

╰+攻爆jí腚メ 2021-07-25 23:35 1350阅读 1赞

# 分页组件 #

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70]  
测试那边提出的需求就是：分页组件后面添加一个button，用于实现翻页功能。

其实不添加功能，直接输入页码回车也是可以翻页的。

## element-ui中的分页组件 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70 1]  
查看文档后，发现element-ui并没有提供这样的功能，从网上也看到了一些其他的解决办法：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70 2]  
他的解决方法就是：给`pagination`分页组件添加要给`ref`属性，然后通过`this.$refs.xxx`的形式进行获取，然后修改其中的值。

<div class="flex-space mt-15" style="display:flex;height:40px;align-items:center;">
          <el-pagination background v-on:size-change="handleSizeChange" ref="pagination"  v-on:current-change="handleCurrentChange" v-bind:current-page="input.PageIndex" v-bind:page-sizes="[10, 20, 30, 40,50]"  v-bind:page-size="input.PageSize" layout="total, sizes, prev, pager, next, jumper" v-bind:total="ReceiptData.TotalCount">
          </el-pagination>
          <el-button type="primary" size="mini" style="margin-left:10px;" round>确定</el-button>
    </div>

html结构如上所：  
此时我发现，输入页码后，点击确定按钮，直接可以实现翻页功能，也就是说：`pagination`分页组件，在输入页码后，回车/点击其他地方都是可以触发翻页功能的。也就是说这个确定按钮不用绑定任何事件即可。

这个按钮只是个引导性的标签，有没有都是可以的，，，测试那边通过，功能实现就ok了。。。。。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70]: /images/20210725/9e869f8fab6d465b994be4f90e519087.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70 1]: /images/20210725/7d7d2c4d99b5414b94b6a59d664519b8.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70 2]: /images/20210725/6f6f318d8d3946939ad265100f4f016e.png