主題目錄

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 處理方法

• 使用三個 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