原创：vue使用elementUI的复选框el-checkbox-group与el-checkbox回显失效问题解决！！

一、场景：

用户表——角色表，用户管理界面可以选择角色，并且每次初始化时候支持“回显”，如图：

使用elementUI的复选框组合：

el-checkbox-group

el-checkbox

二、上代码：

1. 整体结构（列表页和详情页）：

2. detail页面的组件Info：

<el-checkbox-group v-model="chooseRoleNames">
  <el-checkbox v-for="(item,index) in totalRoles" @change="change(index, item)" :label="item.name" :key="index" name="type" class="favour_checkbox" >{{ item.name }}</el-checkbox>
</el-checkbox-group>

  data() {
    return {
      loading: false,
      info: {},
      totalRoles: [],
      readOnly: false,
      placeHolder: '请输入内容',
      chooseRoleNames: []  // 选中的数据 // 注意: el-checkbox取得的时label属性的值. 官方文档有说明不能为Object类型! 且label属性只能是String,Number,Boolean类型
    }
  },

el-checkbox-group

其中的chooseRoleNames是（发送axios请求后台api返回的）该用户对应的角色名的数组name[String]（注意：必须为字符串，不支持Object）

el-checkbox（解决不回显的问题：重点在这，仔细看）

其中的totalRoles是（发送axios请求后台api返回的）所有角色（注意：勾选选中后，返回给el-checkbox-group的是对应的“:label”的值，而不是“:value”。必须为字符串String或Number或Boolean类型，不支持Object，如下图，参看官方文档：https://element.eleme.cn/#/zh-CN/component/checkbox#checkbox-attributes）

3. detail页面

<template>
  <div class="inner-content">
    <div class="oag-report">
      <div class="align-right m-b-10 m-t-10">
        <el-button v-show="showTentative" v-loading.fullscreen.lock="loading" type="danger" @click="save()">保存修改</el-button>
      </div>
      <info :id="id" :name="name" :status="status" @catchInfomation="catchInfomation" ref='infoData'/>
    </div>
  </div>
</template>

保存save方法放在在detail中：

<script>
import Info from './components/Info'
import { saveInfo } from '../../../api/system/user'
export default {
  components: {
    Info
  },
  data() {
    return {
      id: +this.$route.query.id,
      name: this.$route.query.name,
      status: +this.$route.query.status,
      infomation: {},
      toTentative: 0,
      showTentative: true,
      showFinish: false,
      showRevise: false,
      loading: false,
      exportExcelLoading: false,
      exportPdfLoading: false
    }
  },
  methods: {
    catchInfomation(infomation) {
      this.infomation = infomation
    },
    save() {
      this.loading = true

      // console.log(this.$refs.info.totalRoles)
      let chooseRoles = []
      this.$refs.infoData.totalRoles.forEach(val=>{
        let t = this.$refs.infoData.chooseRoleNames.findIndex(find=>{
          return find == val.name
        })
        if(t>-1){
          chooseRoles.push(val)
        }
      })
      this.infomation.roles = chooseRoles;
      saveInfo(this.infomation).then(response => {
        if (!response) {
          alert('保存失败！')
        } else {
          alert('保存成功！')
          this.goback()
        }
        this.loading = false
      })
    },
    goback() {
      this.$router.go(-1)
    }
  }
}
</script>

 

VUE也是正在学习，所以踩这个坑浪费了我一整天时间，网上关于checkbox回显失效的问题，说的都不是我想要的，还有的使用tree方式绕过去了，不好过还好找了以前的同事，分分钟解决了。

所以基础很重要，而且还要会看官方文档！！

 

希望对大家有所帮助！