image.png

需求，選擇院系之后，對應的出現(xiàn)專業(yè)

   <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="專業(yè)" :label-width="formLabelWidth">
                <el-select v-model="addData.major_name" placeholder="請選擇專業(yè)" 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>


// 根據(jù)院系選擇專業(yè)
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)
    })
},

這樣可以實現(xiàn)，但是有一個問題，如果更改院系之后，下面的專業(yè)應該重置為空，所以加了一句：this.addData.major_name = null，這個問題解決之后，又出現(xiàn)了專業(yè)選擇不上的問題，原來，在新增班級之后重置addData為空的時候，應該要加上對象的類別名，不能直接重置整個對象為空，不然v-model綁定的元素找不到對應的類別，應該將this.addData={}改為 this.addData={
id:0,
name:null,
institute_name:null,
major_name:null
}