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
最新评论