image.png

需求：
如图，要实现一个上图所示的选择项目的功能
后台给的数据是projectData=[{name:name1,id:id1},{name:name2,id:id2}]
el-checkbox需要的是一个一维数组[name1,name2]
后台接收的数据是一个字符串"id1,id2"

解决思路：

       <el-form-item label="项目" :label-width="formLabelWidth" prop="project_name">              
                    <el-checkbox-group v-model="checkedItem">
                    <el-checkbox v-for="(value,index) in projectData" :label="value.id" @change="chooseItem(value.id)"></el-checkbox>
                  </el-checkbox-group>
                
            </el-form-item>

先从后台需要的数据出发，他要一个选中项的id的字符串，而el-checkbox-group的v-model绑定的必须是一个数组，问题不大，数组转字符串，string=arr.split(','), 但是label展示是名字而不是id值，所以checkedItem得到的是一个name的数组，那就冲突了。

故改变如下

  <el-form-item label="项目" :label-width="formLabelWidth" prop="project_name">
            <div v-model="addData.project_name">
                    <el-checkbox-group v-model="checkedItem">
                    <el-checkbox v-for="(value,index) in projectData" :label="value.name" @change="chooseItem(value.id)"></el-checkbox>
                  </el-checkbox-group>
                </div>
            </el-form-item>

在el-checkbox-group的外面在包括一层div v-model=addData.project_name，这个才是真正传递数据的data，在el-checkbox绑定一个change事件，将选中的id值以参的形式传递，并存储传给后台，而checkedItem是控制选中状态的data，主要是方便后期在查看的时候对应选中状态。

下面是完整的代码

<el-form-item label="项目" :label-width="formLabelWidth" prop="project_name">
            <div v-model="addData.project_name">
                    <el-checkbox-group v-model="checkedItem">
                    <el-checkbox v-for="(value,index) in projectData" :label="value.name" @change="chooseItem(value.id)"></el-checkbox>
                  </el-checkbox-group>
                </div>
            </el-form-item>

   // 增加教师--添加项目
chooseItem:function(id){
    if(this.arr.indexOf(id)==-1){
        this.arr.push(id)
    }else{
        this.arr.splice(this.arr.indexOf(id), 1); 
    }
    this.addData.project_name=this.arr.join(',')
},

//查看教师详细信息

image.png

框起来的部分是获取到id字符串到显示页面选中状态的转化。