elementui中的穿梭框实现单选以及联动

最近做的项目中用到了elementui中的穿梭框，要求老师和学生对应的关系是一对多，老师只能是单选的，并且如果选择了已设置的老师，需要在下面的学生的穿梭框中，同步显示该老师名下的学生信息，因为穿梭框默认是支持多选的，所以在原有基础上加以改造

效果图

代码

html代码

<!--设置实习生与导师关系--> <el-dialog title="XXX实习计划导师设置" :visible.sync="showModal" width="60%"> <span> <div> <div class="transfertitle">选择要设置的指导老师</div> <el-transfer v-model="value1" :data="teacherdata" :render-content="renderFunc" @left-check-change="checkTeacher($event)" @change="teaChange($event)"></el-transfer> <div class="transfertitle">选择要设置的学生</div> <el-transfer :render-content="renderFunc" v-model="stuvalue" :data="studata"></el-transfer> </div> </span> <span slot="footer" class="dialog-footer"> <el-button @click="showModal = false">取 消</el-button> <el-button type="primary" @click="showModal = false">确 定</el-button> </span> </el-dialog>

数据格式

teacherdata: [//老师数据 { key: 0, label: `老师 A`, setting:'已设置', stuset:[1,2], disabled:false }, { key: 1, setting:'', label: `老师 B`, stuset:[], disabled:false }, { key: 2, setting:'', label: `老师 C`, stuset:[], disabled:false }, { key: 3, setting:'', label: `老师 D`, stuset:[], disabled:false } ], studata: [//学生数据 { key: 1, label: `学生 A`, setting:'已设置', disabled:false }, { key: 2, label: `学生 B`, setting:'已设置' } ], stuvalue:[],//选中的学生

 js方法

checkTeacher(e){ //当某个老师被选中时其他老师就无法被点击 let len = this.teacherdata.length; if(e.length==0){ for(let i = 0;i<len;i++){ this.teacherdata[i].disabled = false; } }else{ for(let i = 0;i<len;i++){ this.teacherdata[i].disabled = true; } this.teacherdata[e[0]].disabled = false } }, teaChange(e) { let len = this.teacherdata.length; if(e.length!=0){ for(let i = 0;i<len;i++){ if(e[0]==i){ this.teacherdata[i].disabled = false console.log(this.teacherdata[i].stuset) this.stuvalue = this.teacherdata[i].stuset.length==0?[]:this.teacherdata[i].stuset }else{ this.teacherdata[i].disabled = true } } }else{ for(let i = 0;i<len;i++){ this.teacherdata[i].disabled = false this.stuvalue = [] } } },