1,首先,如果你的对话框是封装成了一个新组件的话,记得在父盒子中导入使用这个组件的过程中
在他的内部加上 ref 这样就可以实现,使用到的组件可以修改调用这个封装出去的对话框里面的内容,和修改对话框组件中的数据
比如:<Add ref="add" />-----这个是写在要使用这个对话框的组件中的,记得导入!
使用这个组件的组件 中 如何修改内容和调用方法?
比如控制对话框的显示和隐藏
this.$refs.add.show = true
_____________________________________________________________________________
2,上面的条件达成后, 首先先在 对话框内的 data中写上属性:mode,设置为空
data() {
return {
mode:'', //用来控制同一对话框内 不同的标题
}
}
_____________________________________________________________________________
3,规划好对应的模态框的识别字符是什么,比如:新增的时候是 mode='add', 编辑的时候是 mode='edit'
_____________________________________________________________________________
4,在对应的点击事件中 写上修改mode的代码
比如在新增按钮的点击事件中
/* 新增按钮的点击事件 */
addEvent(str) {
// 打开弹框
this.$refs.add.show = true
/* 修改mode的内容 */
this.$refs.add.mode = 'add' //add标识 为 新增
}
比如 在编辑的时候
/* 点击编辑部门后的事件 */
editClick(data) {
/* 点击编辑部门时 将mode修改为edit */
this.$refs.add.mode = 'edit',
this.$refs.add.show = true //打开对话框
},
_____________________________________________________________________________
5,在对话框中将 el-dialog中 将title 设置为动态的 :title = "title" ,然后再加上个 计算属性computed 在其中监听 mode的变化,来修改title的内容
<el-dialog @close="closeEvent" :title="title" width="700px" :visible.sync="show"></el-dialog>
computed:{
title(){
/* 如果mode的内容是 add 的话就说明是新增的模态框 这时候就需要将标题修改成新增 */
if (this.mode === 'add') {
return '新增部门'
}else{
/* 如果不是add 那就是编辑的模态框 */
return '编辑部门'
}
}
}
这样就实现了 虽然用的是 同一个对话框,但是不同的点击事件 弹出来的对话框标题也是不同的
也可以使用这个方法,区别开 不同模态框之间按下确定后 发送不同的请求
_____________________________________________________________________________