el-checkbox-group?的v-model無法綁定對象數組的問題解決
elementUI官方文檔中el-checkbox-group組件綁定的都為一維數組，真實業(yè)務中數據綁定往往是多個鍵值對的對象數組，本文主要解決這個問題。
如下代碼：
<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屬性綁定為數組的每一項元素，在chang事件selchange中就能獲取到被選中項目的全信息，包括value、label,此時會發(fā)現設置初始選中選項會設置不上，并且初始設入selTitles中的選項，頁面顯示并未選中，但勾選時第一次勾選不上，第二次才能勾選上，由此現象認為可能是elementui的bug，或者說人組件庫壓根就不支持el-checkbox-group組件綁定的對象數組，但每次選擇項目改變還需要轉換下數據實在是腦殼疼，所有就想著直接改組件庫底層代碼豈不快哉！
初始設入selTitles中的選項，勾選時第一次勾選不上，第二次才能勾選上，猜想可能數據已經設入被選項了，只是頁面未顯示選中，審查元素發(fā)現有個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
到此這篇關于解決el-checkbox-group 的v-model無法綁定對象數組的文章就介紹到這了,更多相關解決el-checkbox-group 的v-model無法綁定對象數組內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
這篇文章主要介紹了element--Diaolog彈窗打開之后渲染組件方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-01-01
這篇文章主要為大家詳細介紹了在Vue中如何實現自定義hooks(組合式)函數，文中的示例代碼講解詳細，感興趣的小伙伴可以跟隨小編一起學習一下2023-03-03
最近做時速云項目部署,需要將前端項目打成鏡像文件,下面這篇文章主要給大家介紹了關于Vue項目打包成Docker鏡像包的簡單步驟,需要的朋友可以參考下2023-10-10
表單聯動和級聯選擇是Vue.js中常見的功能，在下面的文章中，我們將討論如何在Vue.js中實現表單聯動和級聯選擇，感興趣的小伙伴可以了解一下2023-06-06
vue-pdf-embed是一個基于Vue.js的插件,專門用于在Vue應用中嵌入和展示PDF文件,本文將使用vue-pdf-embed實現PDF在線預覽功能,有需要的小伙伴可以參考一下2025-03-03
這篇文章主要介紹了vue.js 打包時出現空白頁和路徑錯誤問題及解決方法，本文給大家介紹的非常詳細，具有一定的參考借鑒價值,需要的朋友可以參考下2019-06-06
今天小編就為大家分享一篇解決vue的變量在settimeout內部效果失效的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08
這篇文章主要介紹了Vue使用自定義指令實現拖拽行為,結合實例形式分析了Vue使用自定義指令實現拖拽行為具體步驟、原理與操作注意事項,需要的朋友可以參考下2020-06-06
詳解vue2.0+vue-video-player實現hls播放全過程
這篇文章主要介紹了詳解vue2.0+vue-video-player實現hls播放全過程，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-03-03
Vue3的provide和inject實現多級傳遞的原理解析
Vue3中的provide和inject函數通過原型鏈實現數據的多級傳遞,父組件使用provide注入數據,子組件和后代組件通過inject獲取這些數據,在創(chuàng)建組件實例時,子組件會繼承父組件的provides屬性對象,介紹Vue3的provide和inject實現多級傳遞的原理,需要的朋友可以參考下2024-12-12