Invalid prop: custom validator check failed for prop “pagination“.(ant design中的stable报错)

在使用ant-design中的stable插件时, 报了这个错, 后来找到原因, 是调用loadData时, 接口查询的页码参数和插件的参数不一致导致的.

/components/Table/index.js页面

注意! 此修改是全局性的, 要注意和后端统一格式

原插件中的代码:

loadData (pagination, filters = this.filters, sorter = this.sorter) {
      this.filters = filters
      this.sorter = sorter
      this.localLoading = true
      const parameter = Object.assign({
        pageNum: (pagination && pagination.current) ||
          this.showPagination && this.localPagination.current || this.pageNum,
        pageSize: (pagination && pagination.pageSize) ||
          this.showPagination && this.localPagination.pageSize || this.pageSize
      },
      ......
}

修改后:

loadData (pagination, filters = this.filters, sorter = this.sorter) {
      this.filters = filters
      this.sorter = sorter
      this.localLoading = true
      const parameter = Object.assign({
        page: (pagination && pagination.current) ||
          this.showPagination && this.localPagination.current || this.pageNum,
        page_size: (pagination && pagination.pageSize) ||
          this.showPagination && this.localPagination.pageSize || this.pageSize
      },
      ......
}

要注意, 插件中的这两项要和你接口参数中的分页参数保持一致↑

调用的vue页面代码(此调用代码是否需要调整取决于后端返回的参数):

  data() {
    return {
	  loadData: parameter => {
	    const requestParameters = Object.assign({}, parameter, this.queryParam)
	    return this.$http.get('/api/admin/serial/list', {
	      params: requestParameters
	    }).then(res => {
	      // 原例子是没有result 的, 直接返回的是res.data, 
	      // 这里需要和/components/Table/index.js中loadData的以下参数保持一致
	      /**
	      result.then(r => {
	          this.localPagination = this.showPagination && Object.assign({}, this.localPagination, {
	            current: r.pageNo, // 返回结果中的当前分页数
	            total: r.totalCount, // 返回结果中的总记录数
	            ...
	      })
	      */
	      const result = {
	        'data': res.data,
	        'pageNo': requestParameters.page,
	        'totalCount': res.total
	      }
	      return result//res.data
	    })
	  },
	}
  }