关于前端:使用elementplus-组件elpagination的currentchange事件

翻页列表没有数据时,应用element-plus 组件el-pagination的current-change事件时,须要留神, 不晓得为什么

  1. 在onMounted中调接口获取数据
onMounted(async()=>{
      await methods.init()
    });
  1. 给翻页组件减少事件
<el-pagination
      class="margin-20-20"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :pager-count="5"
      :page-sizes="[12, 24, 48, 76]"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total">
    </el-pagination>
//@current-change 绑定的事件
handleCurrentChange(val) {
        state.currentPage = val
        methods.selectData()
        
      }, 

问题是: 不晓得为什么, 调接口申请了两次, 且第二次走的是handleCurrentChange, 当前页没有扭转, val是null, 把null赋给currentPage,后盾提醒不能为null

解决的方法是:
val(即以后的页码)为null 示意没有变动,没有变动时就不去申请

handleCurrentChange(val) {
        if(val===null){
          return
        }
        state.currentPage = val
        methods.selectData()
        
      }, 

评论

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

这个站点使用 Akismet 来减少垃圾评论。了解你的评论数据如何被处理