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

47次阅读

共计 719 个字符,预计需要花费 2 分钟才能阅读完成。

翻页列表没有数据时,应用 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()}, 

正文完
 0