elementUI官方文檔中el-checkbox-group組件綁定的都為一維數組，真實業務中數據綁定往往是多個鍵值對的對象數組，本文主要解決這個問題。
如下代碼：
<el-checkbox-group class="title-list" v-model="selTitles" @change='selchange'
> <el-checkbox class="titles" v-for='(allItem, allItemIndex) in allTitles' :label="allItem" :key="allItem.value">{{allItem.lable}}</el-checkbox> </el-checkbox-group>
data () {
return {
selTitles: [{
value: 'sex',
lable: '性別'
},{
value: 'status',
lable: '檢查狀態'
},], // 已選擇列
allTitles: [
{
value: 'status',
lable: '檢查狀態'
},
{
value: 'name',
lable: '姓名',
},
{
value: 'sex',
lable: '性別'
},
{
value: 'age',
lable: '年齡'
}
], // 全部列
};
}
直接將el-checkbox的lable屬性綁定為數組的每一項元素，在chang事件selchange中就能獲取到被選中項目的全信息，包括value、label,此時會發現設置初始選中選項會設置不上，並且初始設入selTitles中的選項，頁面顯示並未選中，但勾選時第一次勾選不上，第二次才能勾選上，由此現象認為可能是elementui的bug，或者說人組件庫壓根就不支持el-checkbox-group組件綁定的對象數組，但每次選擇項目改變還需要轉換下數據實在是腦殼疼，所有就想着直接改組件庫底層代碼豈不快哉！
初始設入selTitles中的選項，勾選時第一次勾選不上，第二次才能勾選上，猜想可能數據已經設入被選項了，只是頁面未顯示選中，審查元素發現有個is-checked控制頁面顯示選中，於是捋到了源碼中的如下代碼：
更改步驟
1、從github上獲取elementUI源碼，安裝依賴，
2、將上圖兩個組件（packages\checkbox\src\目錄中）中畫紅框代碼換為如下代碼即可
return this.model.indexOf(this.label) > -1 || JSON.stringify(this.model).indexOf(JSON.stringify(this.label)) > -1;
3、運行命令：npm run dist,將生成的lib包替換項目node-module的elementui 文件夾中的lib
ok,接下來就可以隨心所欲了！