快捷導(dǎo)航

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

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

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

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

如下代碼：

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

初始設(shè)入selTitles中的選項(xiàng)，勾選時(shí)第一次勾選不上，第二次才能勾選上，猜想可能數(shù)據(jù)已經(jīng)設(shè)入被選項(xiàng)了，只是頁面未顯示選中，審查元素發(fā)現(xiàn)有個(gè)is-checked控制頁面顯示選中，于是捋到了源碼中的如下代碼：

更改步驟

1、從github上獲取elementUI源碼，安裝依賴，

2、將上圖兩個(gè)組件（packages\checkbox\src\目錄中）中畫紅框代碼換為如下代碼即可

return this.model.indexOf(this.label) > -1 || JSON.stringify(this.model).indexOf(JSON.stringify(this.label)) > -1;

3、運(yùn)行命令：npm run dist,將生成的lib包替換項(xiàng)目node-module的elementui 文件夾中的lib

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

您可能感興趣的文章: