当前位置: 代码网 > it编程>前端脚本>Vue.js > ElementUI的CheckBox多选框数据回显方式

ElementUI的CheckBox多选框数据回显方式

2024年05月26日 Vue.js 我要评论
elementui的checkbox多选框数据回显我们经常需要进行多选框checkbox的数据回显例如上图需要回显已选的数据。因为elementui已经对代码进行了封装,如下代码示例: <el-

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-groupv-model数据需要和label标签值相同才能数据回显。

因为elementui已经封装好了,会自动匹配el-checkbox-groupv-model的数据和el-checkboxv-for获取的数据值进行匹配,如果相同就会数据回显,显示已选。

点击分配,则会显示回显的数据 

切记!!!不能用对象,否则无法回显,必须使用id列表或者单一的字段列表进行匹配才可以

总结

以上为个人经验,希望能给大家一个参考,也希望大家多多支持代码网。

(0)

相关文章:

版权声明:本文内容由互联网用户贡献,该文观点仅代表作者本人。本站仅提供信息存储服务,不拥有所有权,不承担相关法律责任。 如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 2386932994@qq.com 举报,一经查实将立刻删除。

发表评论

验证码:
Copyright © 2017-2025  代码网 保留所有权利. 粤ICP备2024248653号
站长QQ:2386932994 | 联系邮箱:2386932994@qq.com