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列表或者单一的字段列表进行匹配才可以
总结
以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。
相关文章
Vue + Element 实现按钮指定间隔时间点击思路详解
这篇文章主要介绍了Vue + Element 实现按钮指定间隔时间点击,实现思路大概是通过加一个本地缓存的时间戳,通过时间戳计算指定时间内不能点击按钮,具体实现代码跟随小编一起看看吧2023-12-12解决vue组件没显示,没起作用,没报错,但该显示的组件没显示问题
这篇文章主要介绍了解决vue组件没显示,没起作用,没报错,但该显示的组件没显示问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧2020-09-09
最新评论