vue+Element UI 的一个弹窗编辑
vue+Element UI 的一个弹窗编辑element-uivue.jsjavascript是一个弹窗,里面有三项select,终端类型、功能模块、功能细分。终端选中之后 功能模块才出来,功能细分也是一样的。里面的数据是从列表里面取到的。因为涉及到父子之间的通信,数据过来的时候在子组件(弹窗)里面有监听,第一次的时候不会触发change事件但是选择其他的数据时(也就是第二次...
vue+Element UI 的一个弹窗编辑
是一个弹窗,里面有三项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
- 4k
在父组件中, 为 el-dialog 添加 key, 值为终端类型.
<el-dialog :key="termialKey"><el-dialog>
评论 赞赏 2018-07-26
- 小浩子:
这样的目的是?
-
回复 2018-07-26
- liximomo:
重置组件的状态
- 回复 2018-07-26
更多推荐
所有评论(0)