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列表或者单一的字段列表进行匹配才可以
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
这篇文章主要给大家介绍了关于如何使用vue3简单实现WebSocket通信的相关资料,WebSocket是全双工网络通信通信协议,实现了客户端和服务器的平等对话,任何一方都可以主动发送数据,需要的朋友可以参考下2023-08-08
这篇文章主要介绍了vue实现可搜索的下拉菜单组件功能，在文中通过实例代码给大家补充介绍了vue组件实践-可搜索下拉框，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下2018-11-11
这篇文章主要介绍了Vue微信项目按需授权登录策略实践思路详解,本文给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下2018-05-05
这篇文章主要介绍了Vue3之路由的query参数和params参数用法,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-03-03
有时，你可能希望将任意信息附加到路由上，如过渡名称、谁可以访问路由等。这些事情可以通过接收属性对象的meta属性来实现，并且它可以在路由地址和导航守卫上都被访问到2022-09-09
uniapp中使用u-loadmore,loadText内容不随status改变刷新方式
这篇文章主要介绍了uniapp中使用u-loadmore,loadText内容不随status改变刷新方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-05-05
这篇文章主要介绍了Vue中父子组件通讯——todolist组件功能开发的相关知识,非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下2018-05-05
这篇文章主要介绍了vue3-HTTP请求方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-06-06
因为近日在学习并使用VUE,客户有一个要求,要输入框可模糊查询并带有下拉提示的应用,数据从接口取,下面这篇文章主要给大家介绍了关于Vue实现模糊查询filter()的相关资料,需要的朋友可以参考下2023-04-04
本文主要介绍了vuex中Modules的使用详解，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2022-04-04
最新评论