共计 719 个字符,预计需要花费 2 分钟才能阅读完成。
翻页列表没有数据时,应用 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()},
正文完