vue+elementUI:el-dialog弹出框被遮罩层覆盖及关闭后数据没有清空

1.el-dialog弹出框被遮罩层覆盖

解决方法:在el-dialog标签里添加 :modal-append-to-body='false’

<el-dialog id="forget-pwd" title="重置密码"  :visible.sync="fpwdVisible" width="80%" destroy-on-close :modal-append-to-body
  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
如果你是指在Vue.js中使用`el-dialog`组件时如何清空对话中的数据,那么你可以使用以下方法: 首先,在对话组件中,你可以定义一个`data`属性,用于保存对话中的数据: ```vue <template> <el-dialog title="对话" :visible.sync="dialogVisible"> <el-form :model="form"> <el-form-item label="输入"> <el-input v-model="form.input"></el-input> </el-form-item> <el-form-item label="文本域"> <el-input type="textarea" v-model="form.textarea"></el-input> </el-form-item> </el-form> <div slot="footer"> <el-button @click="dialogVisible = false">关闭</el-button> <el-button type="primary" @click="submitForm">提交</el-button> </div> </el-dialog> </template> <script> export default { data() { return { dialogVisible: false, form: { input: '', textarea: '' } } }, methods: { submitForm() { // 处理表单提交逻辑 } } } </script> ``` 在上面的代码中,`form` 对象存储了对话中的所有数据。当你点击提交按钮时,可以将这些数据传递到后端进行处理。 如果你想要在关闭对话清空对话中的数据,可以在对话组件的`beforeClose`事件中重置`form`对象: ```vue <el-dialog title="对话" :visible.sync="dialogVisible" @before-close="resetForm"> ... </el-dialog> <script> export default { ... methods: { resetForm(done) { this.form = { input: '', textarea: '' }; done(); // 必须调用 done() 方法关闭对话 } } } </script> ``` 在上面的代码中,`resetForm` 方法将`form`对象重置为空,然后必须调用`done()`方法,以便关闭对话。这样,在下一次打开对话时,表单数据就会被清空了。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值