需求,选择院系之后,对应的出现专业
<el-dialog title="新增班级" :visible.sync="addClass" width="400px">
<el-form >
<el-form-item label="班级" :label-width="formLabelWidth">
<el-input v-model="addData.name"></el-input>
</el-form-item>
<el-form-item label="院系" :label-width="formLabelWidth">
<el-select v-model="addData.institute_name" placeholder="请选择院系" @change="selectMajor()">
<el-option v-for="(institute,index) in instituteData"
:value="institute.id" :label="institute.name" :key="index"></el-option>
</el-select>
</el-form-item>
<el-form-item label="专业" :label-width="formLabelWidth">
<el-select v-model="addData.major_name" placeholder="请选择专业" ref="major">
<el-option v-for="(major,index) in majorList" :label="major.name" :value="major.name" :key="index"></el-option>
</el-select>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="addClass = false">取 消</el-button>
<el-button type="primary" @click="addCla()">确 定</el-button>
</div>
</el-dialog>
// 根据院系选择专业
selectMajor:function(){
const self=this;
this.addData.major_name = null
axios({
method:'post',
url:'/api/Accountapi/selectMajor',
data:{institute_id:self.addData.institute_name}
}).then(function(res){
self.majorList=res.data.data
}).catch(function (error) {
console.log(error);
});
},
// 增加班级弹框
addClassBox:function(){
this.addClass=true;
this.addData={}
},
// 增加班级
addCla:function(){
const self=this
let id=self.majorList.filter(item=>item.name===self.addData.major_name)[0].id
axios({
method:'post',
url:'/api/Classapi/classAdd',
data:{
name:self.addData.name,
major_id:id
}
}).then(function(res){
self.cla_data.unshift(self.addData)
self.$options.methods.getClassList.bind(self)();
self.addClass=false
}).catch(function(err){
console.log(err)
})
},
这样可以实现,但是有一个问题,如果更改院系之后,下面的专业应该重置为空,所以加了一句:this.addData.major_name = null,这个问题解决之后,又出现了专业选择不上的问题,原来,在新增班级之后重置addData为空的时候,应该要加上对象的类别名,不能直接重置整个对象为空,不然v-model绑定的元素找不到对应的类别,应该将this.addData={}改为 this.addData={
id:0,
name:null,
institute_name:null,
major_name:null
}
网友评论