element多选框checkbox对后台数据进行回显(显示被选中状态)
element多选框checkbox对后台数据进行回显(显示被选中状态)
理解
一开始我以为需要设置checked属性，事实上并不需要，只需v-model绑定上列表，这个列表中放入需要选中的元素就可以了。
官方示例：https://element.eleme.cn/#/zh-CN/component/checkbox
代码：
<template>
<el-checkbox-group v-model="checkList">
<el-checkbox label="复选框 A"></el-checkbox>
<el-checkbox label="复选框 B"></el-checkbox>
<el-checkbox label="复选框 C"></el-checkbox>
<el-checkbox label="禁用" disabled></el-checkbox>
<el-checkbox label="选中且禁用" disabled></el-checkbox>
</el-checkbox-group>
</template>
<script>
export default {
data () {
return {
checkList: ['选中且禁用','复选框 A']
};
}
};
</script>
这里给el-checkbox-group使用v-model绑定了checkList这个列表，同时列表中定义了两个元素，那么默认就会把这两个元素勾选上。
实践
vue页面
<el-form-item label="设施： " prop="fireFacilifies">
<el-checkbox-group v-model="fireFacilifiesSelectedList">
<el-checkbox v-for="item in fireFacilifiesOptions" :label="item.id"
:key="item.id">{{item.name}}</el-checkbox>
</el-checkbox-group>
</el-form-item>
js
// 回显设施列表
edit() {
console.log("this.form.fireFacilifies " + this.form.fireFacilifies)
this.fireFacilifiesSelectedList = this.form.fireFacilifies.split(',')
this.fireFacilifiesSelectedList = this.fireFacilifiesSelectedList.map(Number)
}