Ant design vue BUG+数据处理汇总

说明

近期用ant design vue 做管理系统，遇到很多奇形怪状的bug以及特殊处理的数据，特地集合一下。

TypeError: checkboxGroup.sValue.indexOf is not a function

indexOf只能用于字符串，将变量用toString()方法转一下就好。

Warning: [antdv: DatePicker] value provides invalidate moment time. If you want to set empty value

时间变量类型出错，提示你要用moment类型

values.start = moment(values.start).format('YYYY-MM-DD HH:mm:ss')

Expected to return a value in “searchField” computed

在computed中没有返回return，或是条件语句未写完整。

Invalid prop: custom validator check failed for prop “pagination“.

• pagination 其实就是分页属性设置，其实出现 Invalid prop: custom validator check failed for prop “XXXX”. 就是说的这个分页属性拿到的值类型不兼容。比如说它 需要的是 number 类型的参数 ，你传的值可能是 string 类型或者 undefined ，所以报错.
• 代码中 通过后端接口请求数据，然后根据数据条数获取 totalCount（总条数）并计算totalPage （总页数），但是后端出现问题，前端并没有接收到类似的条数 ，所以得到两个值都是 undefined ，所以控制台产生好几个这种错误
• 由于后端接口逻辑错误，导致没有返回修改 count（总条数），解决的办法是修改后端代码，让其正常返回需要的数据。

TypeError: Cannot read properties of undefined (reading ‘slice’)

不能直接用slice截取，在截取之前要用三元表达式。

时间处理

从表单传过来的数据需要单独处理

• 判断是否存在，在this.form.getFieldDecorator转成moment类型

  if (record.startTime) {
    this.form.getFieldDecorator('start', { initialValue: moment(record.startTime, 'YYYY-MM-DD HH:mm:ss') })
  }
  

• data定义一个变量，将moment值赋给这个变量，便于在改变值时都进行moment处理

  this.startTimeString = moment(record.startTime).format('YYYY-MM-DD HH:mm:ss')
  

上报数据，表单上编辑时间也需要进行moment处理

• 在@change方法中，将其转成moment类型

  handelStartTime(date) {
    this.startTimeString = moment(date).format('YYYY-MM-DD HH:mm:ss')
  },
  

• 提交表单数据时也要处理，判断是否为Invalid date，再将data上的值赋给对应的值

  if (this.startTimeString == 'Invalid date') {
  this.startTimeString = null
  }
  values.start = this.startTimeString
  

• 在退出表单时，要将data上定义的变量清空

• 利用this.form.getFieldDecorator，将表单上的数据也清空

  this.startTimeString = ''
  this.form.getFieldDecorator('start', { initialValue: null })