element-ui

input輸入框

表單驗證-數值型相關注意事項

• input默認輸入值爲字符串，rules中type: 'number'的驗證無效，即便設置input的type爲number也沒法驗證經過（保留疑問）
• 設置input的type爲number並不能保證輸入值爲數字，由於這個類型接受e爲數值
• ‘12’ > 11 || '12' > '11'都是成立的，受益於強制轉換，方便輸入值和限制值之間的比較

DatePicker日期選擇器

• 表單中同時存在必填項和message，會致使日期選擇器選擇後再次點擊選中相同日期時出現必填項提醒（解決方法，使用validator代替message）

From表單

• 表單的驗證函數有2中傳入方式。一、在rules內聯，這種方式因爲Validator調用對象不是vue實例，因此沒法訪問其下綁定的data等。二、把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
    }
  }