使用ant-design-vue分页时报错:[Vue warn]: Invalid prop: custom validator check failed for prop “pagination“

ant-design-vue项目中使用Pagination 分页还是比较常用的,经常在list列表或者table表格中使用到
使用过程中可能会遇到的问题:
1.动态赋值total时,会出现下图错误;现象:取决于你后端请求是否有数据,有数据(不会报错),否则会报错
控制台报错信息:
请添加图片描述
解决办法

// 向后台发起请求
 getAction(url, params).then((res) => {
        if (res.success) {
          console.log(res.result)
          this.listData = res.result.records
          //当后端没有数据时,控制台打印,发现total是undefined会报pagination插值错误
          if (this.listData) {//解决:判断有数据才给total赋值
            this.pagination.total = res.result.total
          }
        } else {
          this.$message.error(res.message)
        }
        this.loading = false
      }).finally(() => {
        this.loading = false
      })

2.onShowSizeChange:pageSize 变化的回调,切换每页显示多少条后,当前页无法回到第一页

//原因:升级antd版本,原来的pageNo已被舍弃改用了current
data(){
     return {
     /* 分页参数 */
       pagination: {
        size: "small",
        current: 1,
        pageSize: 4,
        total: 0,
        showQuickJumper: true,//是否可以快速跳转至某页
        pageSizeOptions: ["4", "6", "10"],//指定每页可以显示多少条
        showSizeChanger: true,//是否可以改变 pageSize
        showTotal: (total, range) => {//用于显示数据总量和当前数据顺序
          return " 共" + total + "条"
        },
        onShowSizeChange: (current, pageSize) => this.onSizeChange(current, pageSize),
        onChange:(page,pageSize)=> this.onPageChange(page, pageSize)
        },
      }
  },
methods: {
 	 //页码改变的回调,参数是改变后的页码及每页条数
    onPageChange(page, pageSize) {
      this.pagination.current = page
      this.loadData()//数据信息列表
    },
    //pageSize 变化的回调
    onSizeChange(current, pageSize) {
      this.pagination.current = 1
      this.pagination.pageSize = pageSize
      this.loadData()
    },
}

最后,放一张效果图吧
在这里插入图片描述

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
a-range-picker报错"Invalid prop: custom validator check failed for prop 'value'."是因为组件的value属性未通过自定义验证器的检查。 根据引用,当出现这个错误,首先要找到报错的组件,然后检查是否绑定了值,并且要确保绑定的数据类型与验证器一致。 引用中提到,在使用ant Design Vue中的日期区间选择器,也出现了相同的错误。在该情况下,经过检查发现日期选择器的绑定值是一个数组。这表明,在使用a-range-picker,我们需要将值绑定为一个数组,否则无法匹配。因此,我们需要检查我们的a-range-picker组件的值是否是一个数组。 综上所述,要解决a-range-picker报错"Invalid prop: custom validator check failed for prop 'value'."的问题,我们需要确保该组件绑定了值,并且该值的数据类型是一个数组。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* [element-ui 报错Invalid prop: custom validator check failed for prop “index“.](https://blog.csdn.net/SmartJunTao/article/details/124093054)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] - *2* *3* [【Ant Desgin ARange BUG】ARangePicker组件报错Invalid prop: custom validator check failed for prop ...](https://blog.csdn.net/qq_44933075/article/details/121988631)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值