ElementPlusError: [ElPagination] 你使用了一些已被废弃的用法,请参考 el-pagination 的官方文档

使用element table出现这个错误好几回了,今天把它记录一下,并把错误原因复盘一遍。具体如下:

错误截图

在这里插入图片描述

原因

其实这个错误挺迷的,我把各种情况都测试了一遍,最后发现是因为给 翻页参数 total 传值错误导致的

总结结论:

其实使用element其它组件传值不当时,也会出现这样的错误。所以,以后遇到这样的问题,都可以统一先看一遍组件的传值,先排除这一个可能,再检查其它的问题。

情况分析

具体情况是这样的:

  • 假设res是调用接口获取到的返回值,我们这样给total赋值的(Vue3):total.value = res?.data.total
  • 但实际情况是,后端没有按照我们的约定返回结果,data对象里面没有total字段,所以给total赋值错误。并最终导致了使用翻页组件报错

解决办法:

  • 给total赋值时,兼容了没有值的情况,使用这样的方式赋值:total.value = res?.data.total || 0。这样,total要么取data对象里的值,要么为0。

这样修改后,就没有再报错了。

我们来看一下,这两种情况有什么区别呢?我们将total和typeof total打印出来:

console.log('total = ', total.value)
console.log('total type: ', typeof total.value)
  • res?.data.totaltotal = undefined, typeof total = undefined

在这里插入图片描述

  • res?.data.total || 0total = 0, typeof total = number

在这里插入图片描述
可以看出,是因为前一种方法给组件传了undefined类型,所以报错;而后一种传的是number类型,组件就不会报错。就这了~

  • 14
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 3
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值