快捷導航

el-checkbox-group?的v-model無法綁定對象數(shù)組的問題解決

更新時間：2023年05月23日 08:26:52 作者：大白蘿卜

elementUI官方文檔中el-checkbox-group組件綁定的都為一維數(shù)組，本文主要介紹了解決el-checkbox-group?的v-model無法綁定對象數(shù)組，感興趣的可以了解一下

elementUI官方文檔中el-checkbox-group組件綁定的都為一維數(shù)組，真實業(yè)務(wù)中數(shù)據(jù)綁定往往是多個鍵值對的對象數(shù)組，本文主要解決這個問題。

如下代碼：

<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:?'檢查狀態(tài)'
????????},],?//?已選擇列
??????allTitles:?[
????????{
??????????value:?'status',
??????????lable:?'檢查狀態(tài)'
????????},
????????{
??????????value:?'name',
??????????lable:?'姓名',
????????},
????????{
??????????value:?'sex',
??????????lable:?'性別'
????????},
????????{
??????????value:?'age',
??????????lable:?'年齡'
????????}
??????],?//?全部列
????};
??}

直接將el-checkbox的lable屬性綁定為數(shù)組的每一項元素，在chang事件selchange中就能獲取到被選中項目的全信息，包括value、label,此時會發(fā)現(xiàn)設(shè)置初始選中選項會設(shè)置不上，并且初始設(shè)入selTitles中的選項，頁面顯示并未選中，但勾選時第一次勾選不上，第二次才能勾選上，由此現(xiàn)象認為可能是elementui的bug，或者說人組件庫壓根就不支持el-checkbox-group組件綁定的對象數(shù)組，但每次選擇項目改變還需要轉(zhuǎn)換下數(shù)據(jù)實在是腦殼疼，所有就想著直接改組件庫底層代碼豈不快哉！

初始設(shè)入selTitles中的選項，勾選時第一次勾選不上，第二次才能勾選上，猜想可能數(shù)據(jù)已經(jīng)設(shè)入被選項了，只是頁面未顯示選中，審查元素發(fā)現(xiàn)有個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

到此這篇關(guān)于解決el-checkbox-group 的v-model無法綁定對象數(shù)組的文章就介紹到這了,更多相關(guān)解決el-checkbox-group 的v-model無法綁定對象數(shù)組內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: