element多选框checkbox对后台数据进行回显(显示被选中状态)_el-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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

这里给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>
1
2
3
4
5
6
7
8

js

// 回显设施列表
edit() {
	console.log("this.form.fireFacilifies  " + this.form.fireFacilifies)
	this.fireFacilifiesSelectedList = this.form.fireFacilifies.split(',')
	this.fireFacilifiesSelectedList = this.fireFacilifiesSelectedList.map(Number)
}
1
2
3
4
5
6