vue.js

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript类库 > vue.js > ElementUI的CheckBox多选框数据回显

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

作者:梁山教父

这篇文章主要介绍了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-groupv-model数据需要和label标签值相同才能数据回显。

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

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

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

总结

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

您可能感兴趣的文章:
阅读全文