最近做的项目中用到了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 = []
}
}
},