vue+Element UI 的一个弹窗编辑

vue+Element UI 的一个弹窗编辑

element-ui vue.js javascript

是一个弹窗，里面有三项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>

阅读 3.3k

评论 2018-07-25 提问

4 个回答

得票时间

一块二的金帝

•  

• 16

评论 赞赏 2018-07-26

• 一块二的金帝：

  语言表达能力不足，只能截图了，抱歉哈~我也是别人指点，算解决了这个问题，可能还不够完美，不够优雅

• 回复 2018-07-26

• luoerdaixin：

  @一块二的金帝 亲，我能不能厚颜无耻的要份代码，，

• 回复 1月5日

程序媛花花

•  

• 1.5k
•  

•  

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

评论 赞赏 2018-07-26

• 小浩子：

  看图看不出来么？就是编辑的时候会触发change事件 怎么让它不触发

• 回复 2018-07-26

liximomo

•  

• 4k
•  

•  

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

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

评论 赞赏 2018-07-26

• 小浩子：

  这样的目的是？

• 回复 2018-07-26

• liximomo：

  重置组件的状态

• 回复 2018-07-26