# Element-UI Checkbox 踩的坑 --- ## 主題目錄 1. 什麼是 Element-UI ? 2. 處理需求遇到技術問題 3. Element-UI Checkbox 有哪些坑? 4. 處理方法 5. 結論 --- ##  - Element-UI 是一套基於 Vue 框架的 UI 套件 - [官方網站](https://element.eleme.io/#/zh-CN/component/checkbox) --- ## 處理需求遇到技術問題 - 需求: 動態渲染三層 Checkbox  ---  --- ## Element-UI Checkbox 踩到的坑 --- ### 1. el-Checkbox 陣列裡的若為物件則不會響應式更新 --- ## 失敗經驗 - el-Checkbox陣列使用物件: - 因為是用物件，可以用 checked 屬性來渲染畫面，會造成需要顧及畫面渲染邏輯與三層連動的判斷邏輯加上驗證邏輯，會使複雜層度大幅提高 ```javascript= 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 的邏輯 --- ### 解決方法 ```javascript= let checkboxObject = [ {label: 'label', value: 'value'}, ] ``` ```javascript= el-checkbox(:label="checkboxObject.value") {{ checkboxObject.label }} ``` --- ## 動態渲染三層 Checkbox 處理方法 ---  --- - 使用三個 change 事件來做控管 ```javascript= // 全選 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 : [] }, ``` --- ```javascript= // 遊戲大類 handleCategoryChange (boolen, index) { this.providerMapTag[index.num()] = boolen ? deepCopy(this.checkboxList[index]) : [] this.$set(this.isIndeterminateCategory, index, false) this.CheckAllJudge() this.providerMapTagVerify() }, ``` ```javascript= // 遊戲商 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](http://moa01.gakkixmasami.com/) --- ### 結語 - 必免陣列 Checkbox 陣列裡含有物件就不需處理響應式更新的問題，難度會大幅下降 - 使用事件來判斷每層相互之間的連動邏輯 --- # Q & A