is a pop-up window with three select, terminal types, functional modules, and functional subdivisions. The function module comes out only after the terminal is selected, and the function subdivision is the same. The data in
is fetched from the list. Because it involves the communication between father and son, when the data comes, there is listening in the child component (pop-up window). The change event will not be triggered the first time, but when you select other data (that is, the second but different data) watch snooping will trigger the change event of select, which will empty their next select.
look at a picture
//
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,"00000000000000000100000000000000000")
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;
},this is part of the static
<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>
