在 el-pagination触发两次

### 解析 `el-pagination` 组件触发两次的原因 当使用 Element UI 的 `el-pagination` 组件时，可能会遇到在切换分页条数或者跳转页面时发生两次请求的情况。这一现象通常由以下几个原因引起： - **事件冒泡**：如果存在全局监听器（例如 Enter 键），这些监听器可能会影响 `el-pagination` 中的输入框行为，从而导致重复提交[^2]。 - **内部逻辑处理不当**：组件内部对于某些操作可能存在冗余调用，特别是在状态更新过程中未能有效控制请求时机。 为了防止此类情况的发生并确保每次交互只触发展望一次请求，可以采取如下措施来优化代码实现方式： #### 方法一：调整全局监听条件 针对因全局监听引发的问题，在设置键盘快捷键或其他形式的全局监听时增加特定的选择器判断，避免误触发 `el-pagination` 内部控件的行为。具体来说就是在绑定 enter 事件时加上对目标元素类名的验证，比如确认当前聚焦的是不是属于 pagination 部分内的 input 输入框。 ```javascript document.addEventListener('keydown', function(event){ const targetClassList = event.target.classList; if (event.key === 'Enter' && !targetClassList.contains('is-in-pagination')) { // 只有不在pagination区域才响应enter按键 handleCustomAction(); } }); ``` #### 方法二：自定义分页大小变更方法 通过覆盖默认的 pageSize 改变函数来自行管理何时发送数据获取请求。可以在修改每页显示数量之后延迟一定时间再发起实际的数据加载动作，以此减少不必要的即时查询次数。 ```vue <template> <!-- ... --> <el-pagination @size-change="handleSizeChange" :page-size.sync="pageSize"> </el-pagination> </template> <script> export default { data() { return { loading: false, timeoutId: null, // ... }; }, methods: { handleSizeChange(newSize) { clearTimeout(this.timeoutId); this.loading = true; this.timeoutId = setTimeout(() => { fetchData({ size: newSize }).then(response => { updateData(response.data); this.loading = false; }); }, 300); // 设置适当延时以等待用户完成选择 } } }; </script> ``` 上述策略能够有效地缓解由于快速连续点击或者其他因素造成的多次请求问题，同时也提高了用户体验的一致性和流畅度。