我想把整个dialog作为对象传给弹框显示和隐藏方法,因为后面有可能有其他的表单弹框,我不想重复写显隐方法。
// 添加特权用户表单
addMasterUserForm:{
// 表单数据
formData:{
sapNum:'',
user:'',
},
// 弹框显隐
dialogVisible:false,
// 表单验证
rules:{
sapNum: [
{ required: true, message: "请输入工号", trigger: "blur" },
],
user: [
{ required: true, message: "请输入姓名", trigger: "blur" },
],
},
},
然后为什么当我点击查询按钮后,往显示弹框方法传入弹框对象,然后在里边修改形参的dialogVisible为true后,弹框还是不显示?打印后发现修改不生效,但是形参obj和上面声明的addMasterUserForm是全等为true的啊
showDialog(obj){
console.log(obj);
obj.dialogVisible = true //不生效
// this.$set(obj,'dialogVisible',true) 不生效
console.log(obj===this.addMasterUserForm); //true
},
<!-- 新增特权用户弹框 -->
<el-dialog
title="新增特权用户"
:visible.sync="addMasterUserForm.dialogVisible"
width="50%"
:before-close="closeDialog(addMasterUserForm)"
:close-on-click-modal="false"
:close-on-press-escape="false"
v-dialogDrag
>
<el-form
:model="addMasterUserForm.formData"
:rules="addMasterUserForm.rules"
label-width="60px"
ref="addMasterUserForm"
>
<el-row :gutter="10">
<el-col :span="24">
<el-form-item label="工号" prop="sapNum">
<el-input v-model="addMasterUserForm.formData.sapNum"></el-input>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="10">
<el-col :span="24">
<el-form-item label="姓名" prop="user">
<el-input v-model="addMasterUserForm.formData.user"></el-input>
</el-form-item>
</el-col>
</el-row>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button @click="closeDialog(addMasterUserForm)">取消</el-button>
<el-button type="primary" @click="save(addMasterUserForm)">保存</el-button>
</span>
</el-dialog>
我发现当我往dialog中添加before-close属性后就没法打开弹框,这是为什么?
:before-close="closeDialog(addMasterUserForm)"
codepen例子
https://codepen.io/hongsir12/...
可以吧你代码在 jsrun 或者 codepen 里面写一个重现的列子吗
--------------2022年5月6日11:52:10---------------
已修改
原因是因为 :before-close="closeDialog(addMasterUserForm)"
这里得到的参数是 closeDialog执行后的参数 也就是 undefined
所以吧closeDialog方法改为
完整代码如下