changed 5 years ago
Published Linked with GitHub

Element-UI Checkbox 踩的坑


主題目錄

  1. 什麼是 Element-UI ?

  2. 處理需求遇到技術問題

  3. Element-UI Checkbox 有哪些坑?

  4. 處理方法

  5. 結論


  • Element-UI 是一套基於 Vue 框架的 UI 套件

  • 官方網站


處理需求遇到技術問題

  • 需求: 動態渲染三層 Checkbox
    沒錯! 綁三層 第一層全選 第二層遊戲大類 第三層遊戲商 他們都需要互相作連動

思考圖


Element-UI Checkbox 踩到的坑


1. el-Checkbox 陣列裡的若為物件則不會響應式更新


失敗經驗

  • el-Checkbox陣列使用物件:

    • 因為是用物件,可以用 checked 屬性來渲染畫面,會造成需要顧及畫面渲染邏輯與三層連動的判斷邏輯加上驗證邏輯,會使複雜層度大幅提高
    ​​​​el-Checkbox (全選) ​​​​el-Checkbox-group (遊戲大類group) ​​​​ el-Checkbox (遊戲大類) ​​​​ el-Checkbox-group (遊戲商group) ​​​​ el-Checkbox (遊戲商)

解決方法

  1. el-Checkbox陣列避免使用物件
  2. 使用 el-Checkbox 的属性 checked 回傳 Boolean 值來渲染畫面

el-Checkbox 綁定的值為label 而不是 value


失敗經驗

  • 畫面上的 label 會等於 el-Checkbox 的 value 導致間接 API 的難度增加,需要額外增加轉換 value 的邏輯

解決方法

let checkboxObject = [ {label: 'label', value: 'value'}, ]
el-checkbox(:label="checkboxObject.value") {{ checkboxObject.label }}

動態渲染三層 Checkbox 處理方法


計算平台html


  • 使用三個 change 事件來做控管
// 全選 handleCheckAllChange (boolen) { this.providerMapTag = boolen ? deepCopy(this.checkboxList) : { 1: [], 2: [], 3: [], 4: [], 5: [], 6: [] } this.checkCategory = boolen ? { 1: true, 2: true, 3: true, 4: true, 5: true, 6: true } : { 1: false, 2: false, 3: false, 4: false, 5: false, 6: false } this.isIndeterminateAll = false this.isIndeterminateCategory = { 1: false, 2: false, 3: false, 4: false, 5: false, 6: false } this.detailForm.providerMapTag = boolen ? true : [] },

// 遊戲大類 handleCategoryChange (boolen, index) { this.providerMapTag[index.num()] = boolen ? deepCopy(this.checkboxList[index]) : [] this.$set(this.isIndeterminateCategory, index, false) this.CheckAllJudge() this.providerMapTagVerify() },
// 遊戲商 handleOptionsChange (value, index) { let checkedCount = value.length let isAll = checkedCount === this.checkboxList[index].length let notAll = checkedCount > 0 && checkedCount < this.checkboxList[index].length this.$set(this.checkCategory, index, isAll) this.$set(this.isIndeterminateCategory, index, notAll) this.CheckAllJudge() this.providerMapTagVerify() },

全選的樣式判斷


Demo


結語

  • 必免陣列 Checkbox 陣列裡含有物件就不需處理響應式更新的問題,難度會大幅下降
  • 使用事件來判斷每層相互之間的連動邏輯

Q & A

坑!到處都是坑

Select a repo