赞
踩
最近做的项目中用到了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 = []
- }
- }
- },
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。