image.png

需求，选择院系之后，对应的出现专业

   <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
}