美文网首页
element-ui的select选项动态获取,且二级联动

element-ui的select选项动态获取,且二级联动

作者: echo三文鱼 | 来源:发表于2018-08-14 11:47 被阅读0次
    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
    }

    相关文章

      网友评论

          本文标题:element-ui的select选项动态获取,且二级联动

          本文链接:https://www.haomeiwen.com/subject/cywmbftx.html