翻页列表没有数据时,应用element-plus 组件el-pagination的current-change事件时,须要留神, 不晓得为什么
- 在onMounted中调接口获取数据
onMounted(async()=>{ await methods.init() });
- 给翻页组件减少事件
<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() },