iview 表格渲染表单校验踩坑集锦

1. iview中表单验证中datepicker组件type为datetime验证

在进行校验时有时会有因为datepicker的验证问题在

this.$refs.xx.validate((flag) => {console.log(flag)})

如果其他的验证有问题会返回false 如果都通过验证则flag没值，打印不出来, 逻辑简单的如下，必填 + 大于当前时间可以这么做

time: [
  {
     required: true,
     message: '截止日期必填',
     type: 'date',
     trigger: 'blur'
   },
   {
     validator: (rule, value, callback) => {
       const TIMESTAMP = Date.parse(value)
       const NOWDATE = Date.parse(new Date())
       TIMESTAMP >= NOWDATE ? callback() : callback(new Error('不可早于当前时间!'))
     }
   }
]

如果逻辑复杂的话还是写在datepicker组件的@on-change事件里进行判定

2.iview 中表格表头渲染filters/指定数据

在我们渲染表格的时候，有时候后端返回的数据可能有的值为1/0,告诉你1显示"是", 0 显示"否", 这时候可以用

官方的方法 filters

还可以使用render方法，如下

columns: [
  {
    title: '是否办卡了',
    key: 'is_card',
    render: (h, params) => {
      return h('div', {
    }, params.row.is_card ? '是' : '否')
  }
]

大体介绍一下render的用法

render: (h, params) =>  {
  // 中间可以插入逻辑, 就比如刚才的那个逻辑
  let val = params.row.is_card ? '是' : '否'
  // 渲染的元素 
  // [] 为此标签为父元素 中间可以继续写需要渲染的元素
  // {} 为该元素的属性, style(样式)/props(属性值)/on(事件)
  return h('元素标签', []/{}, '元素标签显示的值val')
}

3.iview表单校验时InputNumber组件问题

InputNumber标签首先由一个问题他的默认值为0

在为InputNumber标签进行表单验证时做必填时触发方法'blur' 'change'都会有问题

number: {
  required: true,
  message: '数字必填哦',
  trigger: 'blur' / 'change'
}

你改变了inputNumber的值的时候他还是回提醒你没有必填，这时把~~trigger~~这属性删了就ok

让他根据自己的逻辑去判断，就可以判断成功

4.iview中form表单重置问题resetFields

正常的使用环境, 就进行重置了重置数据重置报错

this.$refs.xxxform.resetFields()

resetFields这个方法是根据this.$refs.xxxform下fields属性通过循环来resetField()来实现的

如果我们要实现部分表单重置可以使用这个属性,(除了prop为name的都进行重置)

this.$refs.xxxform.fields.forEach(function (e) {
  if (e.prop == 'name') {
    e.resetField()
  }
})

完事~