ElementUI的CheckBox多選框數(shù)據(jù)回顯方式
更新時間：2024年04月30日 08:43:23 作者：梁山教父
這篇文章主要介紹了ElementUI的CheckBox多選框數(shù)據(jù)回顯方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
ElementUI的CheckBox多選框數(shù)據(jù)回顯
我們經(jīng)常需要進(jìn)行多選框checkbox的數(shù)據(jù)回顯
例如上圖
需要回顯已選的數(shù)據(jù)。
因為ElementUi已經(jīng)對代碼進(jìn)行了封裝，如下代碼示例：
<el-checkbox-group v-model="assignRole.roleIdList" @change="handleCheckedCitiesChange">
<el-checkbox v-for="role in allRole" :label="role.id" :key="role.id">{{role.roleName}} </el-checkbox>
</el-checkbox-group>在el-checkbox-group的v-model數(shù)據(jù)需要和label標(biāo)簽值相同才能數(shù)據(jù)回顯。
因為ElementUI已經(jīng)封裝好了，會自動匹配el-checkbox-group中v-model的數(shù)據(jù)和el-checkbox中v-for獲取的數(shù)據(jù)值進(jìn)行匹配，如果相同就會數(shù)據(jù)回顯，顯示已選。
點擊分配，則會顯示回顯的數(shù)據(jù)
切記?。?！不能用對象，否則無法回顯，必須使用id列表或者單一的字段列表進(jìn)行匹配才可以
總結(jié)
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
v-bind 主要用于屬性綁定，比方你的class屬性，style屬性，value屬性，href屬性等等，只要是屬性，就可以用v-bind指令進(jìn)行綁定.這篇文章主要介紹了VueJs中的V-bind指令,需要的朋友可以參考下2018-05-05
在vue中created、mounted等方法使用小結(jié)
這篇文章主要介紹了在vue中created、mounted等方法使用小結(jié)，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-07-07
vue中的vue-print-nb如何實現(xiàn)頁面打印
這篇文章主要介紹了vue中的vue-print-nb如何實現(xiàn)頁面打印，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
Vue3實現(xiàn)點擊按鈕實現(xiàn)文字變色功能
這篇文章主要介紹了使用Vue3實現(xiàn)點擊按鈕實現(xiàn)文字變色功能,文中通過代碼示例給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作有一定的幫助,需要的朋友可以參考下2024-07-07
淺談vue2 單頁面如何設(shè)置網(wǎng)頁title
這篇文章主要介紹了淺談vue2 單頁面如何設(shè)置網(wǎng)頁title,小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-11-11
vuex state及mapState的基礎(chǔ)用法詳解
這篇文章主要介紹了vuex state及mapState的基礎(chǔ)用法詳解,本文通過實例代碼相結(jié)合的形式給大家介紹的非常詳細(xì)，需要的朋友跟隨腳本之家小編一起學(xué)習(xí)吧2018-04-04
這篇文章主要介紹了vue3無法使用jsx的問題及解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-09-09
這篇文章主要介紹了vue3中如何使用iframe嵌入vue2頁面問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10
這篇文章主要介紹了vue el-upload手動上傳實現(xiàn)過程,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-06-06
這篇文章主要介紹了Vue.js實現(xiàn)可配置的登錄表單實例代碼詳解，文中給大家補(bǔ)充介紹了vue.js 全選與取消全選的實例代碼,需要的朋友可以參考下2018-03-03