vue+Element UI 的一個(gè)彈窗編輯

是一個(gè)彈窗，里面有三項(xiàng)select，終端類型、功能模塊、功能細(xì)分。終端選中之后 功能模塊才出來，功能細(xì)分也是一樣的。
里面的數(shù)據(jù)是從列表里面取到的。因?yàn)樯婕暗礁缸又g的通信，數(shù)據(jù)過來的時(shí)候在子組件（彈窗）里面有監(jiān)聽，第一次的時(shí)候不會觸發(fā)change事件但是選擇其他的數(shù)據(jù)時(shí)（也就是第二次但是是不同的數(shù)據(jù)）watch監(jiān)聽會觸發(fā)select的change事件，這個(gè)事件會把它們的下一個(gè)select清空 。
看個(gè)圖

//貼上一部分代碼
        watch: {
            show(val) {
            this.visible = val;            
            },
            visible(val) {
            this.$emit("update:show", val);
            },
            propItem(val){ //從父組件過來的所有數(shù)據(jù)
                // console.log(val,'-----------------------編輯------------------------')
                this.addForm= Object.assign({}, val);
                // console.log(this.addForm,'00000000000000000編輯100000000000000000')
                let childrenCode = this.childrenCode;
                let {terminalType, moduleType, problemType} = val
                let termialKey = this.typeMapping[terminalType];
                this.featType = childrenCode[termialKey];
                this.segmenType = childrenCode[moduleType];
            },
            "addForm.terminalType" (val) {  //終端類型
                    let childrenCode = this.childrenCode;
                    let termialKey = this.typeMapping[val];
                    this.featType = childrenCode[termialKey];
                    // this.addForm.moduleType = this.featType[0].code
            },
            "addForm.moduleType" (val) {    //功能模塊            
                    let childrenCode = this.childrenCode;
                    this.segmenType = childrenCode[val];
                    // this.addForm.problemType = this.segmenType[0].code
            },
            propCode(val) {
                this.childrenCode = val;
            }

        },

//change 事件
            termianChange(value){
                    this.addForm.moduleType =" ";
                    this.addForm.problemType =" ";        
            },
            moduletypeChange(value){
                    this.addForm.problemType ="";
            },
            segmenChange(value){ //細(xì)分
                let state = this.changeState;
            },

這是一部分的靜態(tài)

                <el-row>
                    <el-col :span="8">
                        <el-form-item label="終端類型:" prop="terminalType">
                            <el-select v-model="addForm.terminalType" placeholder="請選擇" @change="termianChange" >
                            <el-option v-for="(item, index)  in Type" :key="index" :label="item.dictValue" :value="item.code"></el-option></el-select>
                        </el-form-item>
                    </el-col>
                <el-col :span="8">
                    <el-form-item label="功能模塊:" prop="moduleType">
                        <el-select v-model="addForm.moduleType" placeholder="請選擇" @change="moduletypeChange" >
                        <el-option v-for="(item,index) in featType" :key="index" :label="item.name" :value="item.code"> </el-option></el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="功能細(xì)分:" prop="problemType">
                        <el-select v-model="addForm.problemType" placeholder="請選擇" @change="segmenChange">
                        <el-option v-for="(item,index) in segmenType" :key="index" :label="item.name" :value="item.code"> </el-option></el-select>
                    </el-form-item>
                </el-col>
                </el-row>