vue+Element UI 的一个弹窗编辑

Question

是一个弹窗，里面有三项select，终端类型、功能模块、功能细分。终端选中之后 功能模块才出来，功能细分也是一样的。
里面的数据是从列表里面取到的。因为涉及到父子之间的通信，数据过来的时候在子组件（弹窗）里面有监听，第一次的时候不会触发change事件但是选择其他的数据时（也就是第二次但是是不同的数据）watch监听会触发select的change事件，这个事件会把它们的下一个select清空 。
看个图

//贴上一部分代码
        watch: {
            show(val) {
            this.visible = val;            
            },
            visible(val) {
            this.$emit("update:show", val);
            },
            propItem(val){ //从父组件过来的所有数据
                // 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){ //细分
                let state = this.changeState;
            },

这是一部分的静态

                <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="功能细分:" 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>

Answer 1

Answer 2

没有看很明白，如果让我做的话，我的思路就是每次点击的时候把数据传过去，关闭的时候清空数据，change事件改变联动数据，我之前遇到过一个问题是数据需要重新初始化，就给弹窗添加个v-if="",每次点击的时候就会重新渲染弹框

Answer 3

在父组件中, 为 el-dialog 添加 key, 值为终端类型.

<el-dialog :key="termialKey"><el-dialog>

Answer 4

能不能厚颜无耻的求份代码，，，