效果图：
数据库设计
学生表【student】
课程表【course】
学生与课程关系表【studentCourseRef】
后端返回对象是以主子表数据形式，返回学生列表信息以及学生与课程关系列表信息，如图
private Long id;
/** 学号 */
private Long studentId;
/** 学生姓名 */
private String studentName;
/** 学生与课程关系列表 */
private List<StudentCourseRef> studentCourseRefList;
所以，前端调用接口查询当前学生信息的时候，后端要通过查询参数先找到学生与课程关系信息，再用学生对象.setStudentCourseRefList赋值，最后返回当前学生信息。
前端相关代码：
<!-- 添加或修改学生信息对话框 -->
<el-drawer :title="title" :visible.sync="open" size="50%">
<el-form ref="form" :model="form" :rules="rules" label-width="100px" style="margin: 0 32px;">
<el-form-item label="学生姓名" prop="studentName">
<el-input v-model="form.studentName" placeholder="请输入学生姓名" />
</el-form-item>
<el-form-item label="选择课程" prop="course">
<el-transfer
filterable
:filter-method="filterMethod"
filter-placeholder="请输入关键字"
:titles="['可选课程', '已选课程']"
:data="leftList"
v-model="rightList">
</el-transfer>
</el-form-item>
</el-form>
</el-drawer>
// 接口方法
import { getStudent, updateStudent } from "@/api/student";
import { listCourse } from "@/api/course";
export default {
data() {
return {
// 可选课程列表（左边）
leftList: [],
// 已选课程列表（右边，只需要key）
rightList: [],
// 表单参数
form: {},
// 表单校验
rules: {}
};
},
created() {
this.getCourseList();
},
methods: {
// 搜索关键字
filterMethod(query, item) {
return item.label.indexOf(query) > -1;
},
getCourseList() {
// 调用查询课程列表接口
listCourse(this.queryParams).then(response => {
for(let i in response.rows){
// 将返回的课程列表赋值于穿梭框左边列表
this.leftList.push({
key: response.rows[i].id,
label: response.rows[i].courseName
})
}
this.loading = false;
});
},
// 两个数据ID转换的方法
changeRefListToCourseIdList(data,fun) {
let idList = [];
for(let i in data){
idList.push(data[i].courseId);
}
fun(idList);
},
changeCourseIdListToRefList(data,fun) {
let refList = [];
for(let i in data){
let studentCourseRef = {
courseId: data[i]
}
refList.push(studentCourseRef);
}
fun(refList);
},
/** 选课操作 */
handleUpdate(row) {
this.reset();
let that = this;
const id = row.id || this.ids
getStudent(id).then(response => {
this.form = response.data;
// 把返回的关系表数据转换成右边已选课程列表，用于数据回显
this.$options.methods.changeRefListToCourseIdList(response.data.studentCourseRefList, function(data){
that.rightList = data;
});
this.open = true;
this.title = "选课操作";
});
},
/** 提交按钮 */
submitForm() {
this.$refs["form"].validate(valid => {
if (valid) {
let that = this;
// 将已选课程列表的数据添加到关系表中，提交
this.$options.methods.changeCourseIdListToRefList(this.rightList, function(data){
that.form.studentCourseRefList = data;
if (that.form.id != null) {
updateStudent(that.form).then(response => {
that.msgSuccess("课程选择成功");
that.open = false;
that.getList();
});
}
});
}
});
},
}
}
