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