草庐IT

vue：element ui分页改变pageSize，触发两次回调请求

前端小白jyj 2024-04-05 原文

1.描述：

        使用element pagination组件时，如果你的currentPage在靠后的页数，这时改变pageSize，那么可能导致size-change和current-change事件同时被触发，如果你的数据请求直接或间接使用这两个事件回调进行，且没有进行任何处理，那么自然便会发送两次网络请求。

2.代码解决：

我只需要一个分页事件，因此没有直接使用size-change和current-change，而是集中放在了一个自定义事件pagination里。但是其他场景思路也是完全一样的。

以下是伪代码：

<template>
  <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-size="pageSize"
        :total="total"
        :page-sizes="[10, 20, 30, 50, 200, 1000, 2000]"
        layout="total, sizes, prev, pager, next, jumper"
        background
  >
</template>

<script>
data() {
    return {
      //把currentPage、pageSize保存在pagination对象里
      pagination: {
        currentPage: this.currentPage,
        pageSize: this.pageSize,
    }
  };
},

props: {
    currentPage: String,
    pageSize: String
}

watch: {
  pagination: {
      handler({currentPage, pageSize}) {
        //如果当前页超出最大页数，则不emit事件
        let maxPage = Math.ceil(this.total / pageSize)
        if (currentPage > maxPage) return
        this.$emit('pagination', {currentPage, pageSize})
      },
    deep: true
  }
},

methods: {
  handleSizeChange(pageSize) {
      this.pagination.pageSize = pageSize
      this.$emit("sizeChange", pageSize);
  },

    handleCurrentChange(currentPage) {
      this.pagination.currentPage = currentPage
      this.$emit("currentChange", currentPage);
  },
}
</script>

3.分析：

        这个问题本不应该存在的，其他组件库都是把分页事件放在一个pagination事件里，这不是什么难事，如果你了解pagination组件封装的话。比如quasar自带的组件库、antd：

 element却没有一个这样的事件，且分出size-change和current-change这两个事件来也没有太大意义，因为这两个事件不会比一个pagination事件能多干什么事情。但这也不是什么大问题。

        出现这个问题，是因为改变了pageSize，最大页数（下面叫maxPage）也会改变。

        这分两种情况，一种是pageSize变小，这显然不会有什么坏的影响，element对于这种情况做的是保持currentPage不变。

        另一种情况，是pageSize变大，即maxPage变小，这时如果currentPage没有超出maxPage，那么element对于这种情况做的是也是保持currentPage不变。但是如果currentPage超出了maxPage，那么element就会把maxPage赋值给currentPage，同时size-change和current-change这两个事件都会触发。

        所以你最好不要在size-change和current-change这两个事件的回调里都发请求，而是封装一下，只$emit一个类似于“pagination”这样的event。

        现在的问题在于，如何在出现pageSize变大这种情况下，利用size-change和current-change这两个事件，拿到currentPage、pageSize，但只emit一次pagination event。

        关键在于，改变pageSize，maxPage也随之改变了，所以需要判断是否要改变currentPage，因为可能出现currentPage大于maxPage的情况，这是不对的，所以只需要判断下if (currentPage > maxPage) return即可

pageSizeelementxff0ccurrentPagexff0vue.jsuijavascript

有关vue：element ui分页改变pageSize，触发两次回调请求的更多相关文章

  1. ruby-on-rails - Rails HTML 请求渲染 JSON - 2

    在我的Controller中，我通过以下方式在我的index方法中支持HTML和JSON:respond_todo|format|format.htmlformat.json{renderjson:@user}end在浏览器中拉起它时，它会自然地以HTML呈现。但是，当我对/user资源进行内容类型为application/json的curl调用时(因为它是索引方法)，我仍然将HTML作为响应。如何获取JSON作为响应？我还需要说明什么？ 最佳答案 您应该将.json附加到请求的url，提供的格式在routes.rb的路径中定义。这

  2. ruby - 触发器 ruby​​ 中 3 点范围运算符和 2 点范围运算符的区别 - 2

    请帮助我理解范围运算符...和..之间的区别，作为Ruby中使用的“触发器”。这是PragmaticProgrammersguidetoRuby中的一个示例:a=(11..20).collect{|i|(i%4==0)..(i%3==0)?i:nil}返回:[nil,12,nil,nil,nil,16,17,18,nil,20]还有:a=(11..20).collect{|i|(i%4==0)...(i%3==0)?i:nil}返回:[nil,12,13,14,15,16,17,18,nil,20] 最佳答案 触发器(又名f/f)是

  3. ruby - 如何在 Rails 4 中使用表单对象之前的验证回调？ - 2

    我有一个服务模型/表及其注册表。在表单中，我几乎拥有服务的所有字段，但我想在验证服务对象之前自动设置其中一些值。示例:--服务Controller#创建Action:defcreate@service=Service.new@service_form=ServiceFormObject.new(@service)@service_form.validate(params[:service_form_object])and@service_form.saverespond_with(@service_form,location:admin_services_path)end在验证@ser

  4. ruby-on-rails - Rails - 乐观锁定总是触发 StaleObjectError 异常 - 2

    我正在学习Rails，并阅读了关于乐观锁的内容。我已将类型为integer的lock_version列添加到我的articles表中。但现在每当我第一次尝试更新记录时，我都会收到StaleObjectError异常。这是我的迁移:classAddLockVersionToArticle当我尝试通过Rails控制台更新文章时:article=Article.first=>#我这样做:article.title="newtitle"article.save我明白了:(0.3ms)begintransaction(0.3ms)UPDATE"articles"SET"title"='dwdwd

  5. ruby - 有人可以帮助解释类创建的 post_initialize 回调吗 (Sandi Metz) - 2

    我正在阅读SandiMetz的POODR，并且遇到了一个我不太了解的编码原则。这是代码:classBicycleattr_reader:size,:chain,:tire_sizedefinitialize(args={})@size=args[:size]||1@chain=args[:chain]||2@tire_size=args[:tire_size]||3post_initialize(args)endendclassMountainBike此代码将为其各自的属性输出1,2,3,4,5。我不明白的是查找方法。当一辆山地自行车被实例化时，因为它没有自己的initialize方法

  6. ruby-on-rails - 如何在 Rails Controller Action 上触发 Facebook 像素 - 2

    我有一个ruby​​onrails应用程序。我按照facebook的说明添加了一个像素。但是，要跟踪转化，Facebook要求您将页面置于达到预期结果时出现的转化中。即，如果我想显示客户已注册，我会将您注册后转到的页面作为成功对象进行跟踪。我的问题是，当客户注册时，在我的应用程序中没有登陆页面。该应用程序将用户带回主页。它在主页上显示了一条消息，所以我想看看是否有一种方法可以跟踪来自Controller操作而不是实际页面的转化。我需要计数的Action没有页面，它们是ControllerAction。是否有任何人都知道的关于如何执行此操作的gem、文档或最佳实践？这是进入布局文件的像素

  7. jquery - 我的 jquery AJAX POST 请求无需发送 Authenticity Token (Rails) - 2

    rails中是否有任何规定允许站点的所有AJAXPOST请求在没有authenticity_token的情况下通过？我有一个调用Controller方法的JqueryPOSTajax调用，但我没有在其中放置任何真实性代码，但调用成功。我的ApplicationController确实有'request_forgery_protection'并且我已经改变了config.action_controller.consider_all_requests_local在我的environments/development.rb中为false我还搜索了我的代码以确保我没有重载ajaxSend来发送

  8. 计算机毕业设计ssm+vue基本微信小程序的小学生兴趣延时班预约小程序 - 2

    项目介绍随着我国经济迅速发展,人们对手机的需求越来越大,各种手机软件也都在被广泛应用,但是对于手机进行数据信息管理,对于手机的各种软件也是备受用户的喜爱小学生兴趣延时班预约小程序的设计与开发被用户普遍使用,为方便用户能够可以随时进行小学生兴趣延时班预约小程序的设计与开发的数据信息管理,特开发了小程序的设计与开发的管理系统。小学生兴趣延时班预约小程序的设计与开发的开发利用现有的成熟技术参考,以源代码为模板,分析功能调整与小学生兴趣延时班预约小程序的设计与开发的实际需求相结合,讨论了小学生兴趣延时班预约小程序的设计与开发的使用。开发环境开发说明：前端使用微信微信小程序开发工具：后端使用ssm：VU

  9. ruby-on-rails - Rake 任务仅调用一次时执行两次 - 2

    我写了一个非常简单的rake任务来尝试找到这个问题的根源。namespace:foodotaskbar::environmentdoputs'RUNNING'endend当在控制台中执行rakefoo:bar时，输出为:RUNNINGRUNNING当我执行任何rake任务时会发生这种情况。有没有人遇到过这样的事情？编辑上面的rake任务就是写在那个.rake文件中的所有内容。这是当前正在使用的Rakefile。requireFile.expand_path('../config/application',__FILE__)OurApp::Application.load_tasks这里

  10. ruby - 改变替换的大小写 - 2

    我有以下内容:text.gsub(/(lower)(upper)/,'\1\2')我可以将\2替换为大写吗？类似于:sed-e's/\(abc\)/\U\1/'这在Ruby中可行吗？ 最佳答案 查看gsub文档:str.gsub(模式){|匹配|block}→new_str在block形式中，当前匹配字符串作为参数传入，$1、$2、$`、$&、$'等变量将被适当设置。block返回的值将替换为每次调用的匹配项。"alowerupperb".gsub(/(lower)(upper)/){|s|$1+""+$2.upcase}

随机推荐