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