ElementUI的CheckBox多選框數(shù)據(jù)回顯方式
更新時間：2024年04月30日 08:43:23 作者：梁山教父
這篇文章主要介紹了ElementUI的CheckBox多選框數(shù)據(jù)回顯方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
ElementUI的CheckBox多選框數(shù)據(jù)回顯
我們經(jīng)常需要進行多選框checkbox的數(shù)據(jù)回顯
例如上圖
需要回顯已選的數(shù)據(jù)。
因為ElementUi已經(jīng)對代碼進行了封裝，如下代碼示例：
<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ù)值進行匹配，如果相同就會數(shù)據(jù)回顯，顯示已選。
點擊分配，則會顯示回顯的數(shù)據(jù)
切記?。?！不能用對象，否則無法回顯，必須使用id列表或者單一的字段列表進行匹配才可以
總結(jié)
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了Vue3?中的插件和配置推薦大全，本文通過圖文實例代碼相結(jié)合給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2022-08-08
Javascript結(jié)合Vue實現(xiàn)對任意迷宮圖片的自動尋路
本文將結(jié)合實例代碼介紹Javascript結(jié)合Vue實現(xiàn)對任意迷宮圖片的自動尋路，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-06-06
Vue判斷字符串(或數(shù)組)中是否包含某個元素的多種方法
在我們前端日常開發(fā)中經(jīng)常會遇到判斷一個字符串中是否包含某個元素的需求,下面這篇文章主要給大家介紹了關(guān)于Vue判斷字符串(或數(shù)組)中是否包含某個元素的多種方法,文中通過實例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-09-09
vue3+element-plus動態(tài)路由菜單示例代碼
這篇文章主要介紹了vue3+element-plus動態(tài)路由菜單示例代碼,代碼簡單易懂,對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2023-11-11
這篇文章主要為大家詳細(xì)介紹了Vue用戶管理的增刪改查功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2022-03-03
這篇文章主要幫助大家簡單理解Vue條件渲染，什么是Vue條件渲染,具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-12-12
V部落是一個多用戶博客管理平臺。這篇文章主要介紹了Vue+SpringBoot開發(fā)V部落博客管理平臺,需要的朋友可以參考下2017-12-12
vue?elementui?實現(xiàn)搜索欄子組件封裝的示例代碼
這篇文章主要介紹了vue?elementui?搜索欄子組件封裝,本文通過示例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-06-06
本文主要介紹了vue3安裝vant實現(xiàn)按需引入和全局引入，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-04-04
Vue router錯誤跳轉(zhuǎn)到首頁("/")的問題及解決
這篇文章主要介紹了Vue router錯誤跳轉(zhuǎn)到首頁("/")的問題及解決方案,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10