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