elementui

input输入框

表单验证-数值型相关注意事项

• input默认输入值为字符串，rules中type: 'number'的验证无效，即使设置input的type为number也无法验证通过（保留疑问）
• 设置input的type为number并不能保证输入值为数字，因为这个类型接受e为数值
• ‘12’ > 11 || '12' > '11'都是成立的，受益于强制转换，方便输入值和限制值之间的比较

DatePicker日期选择器

• 表单中同时存在必填项和message，会导致日期选择器选择后再次点击选中相同日期时出现必填项提醒（解决方法，使用validator代替message）

From表单

• 表单的验证函数有2中传入方式。1、在rules内联，这种方式由于Validator调用对象不是vue实例，所以无法访问其下绑定的data等。2、把Validator方法写在methods中，这样可以正常访问到vue实例绑定的所有值。例如

rules:{
    remark:[
        {
            validator: this.remarkValidator,
            trigger: 'blur'
        }
    ]
},

methods:{
    remarkValidator(rule, value, callback) {
        this.remark
    }
}

Transfer穿梭框

• 在IE9下，穿梭框的滚动列表滚动时无法触发实时渲染。可以修改穿梭框组件，给滚动列表的checkbox-grounp组件监听原生scroll事件，当滚动时改变列表内项的样式，强制浏览器重新渲染。

  mounted() {
    function scroll(e) {
      let items = e.currentTarget.children
      for (let i = 0; i < items.length; i++) {
        let random = Math.random()
        items[i].style.height = `${30 + random}px`
      }
    }
    if (navigator.userAgent.indexOf('MSIE 9') !== -1) {
      this.$refs.scroll.$el.onscroll = scroll
    }
  }