使用element-plus 组件el-pagination的current-change事件

Posted 2021-09-03 CUI_PING

翻页列表没有数据时，使用element-plus 组件el-pagination的current-change事件时，需要注意， 不知道为什么

1. 在onMounted中调接口获取数据

onMounted(async()=>{
      await methods.init()
    });

2. 给翻页组件增加事件

<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()
        
      },