el-dialog遇到的问题

1.想同时显示关闭按钮和底部写取消按钮,给他俩设置了同一个关闭事件(清空对话框里的el-form的回显内容或rules验证规则),遇到的问题是点击关闭按钮后有时候里面的内容不会被清空,导致新增再次打开这个对话框里面还有上一次的内容;

2.改上面的问题,想在关闭事件里调用一次获取列表的请求,但是点击取消的时候应该是默认会调用一次dialog组件的关闭按钮,导致点击取消的时候会请求两次接口;

3.改上面的问题,把dialog组件自带的关闭按钮去掉了,属性 :show-close="false",我下意识想写成(show-close="false"但是会报错),测试又发现新问题:点击取消按钮可以清空form表单里原来的内容,但是点击空白处对话框也会关闭,此时里面内容不会清空;

4.修改上面问题,本来想用:before-close="handleClose"这个方法,这样点击空白处也会弹出问一下是否确定关闭对话框,新问题是有一次在询问是否确定关闭对话框弹出但我没有点击取消修改了点东西保存后再刷新有“询问是否确定关闭”的页面时报错,且此时在点击取消或关闭都不管用,觉得是框架里done()这个函数没有正常销毁的问题,由于时间紧急,把:before-close="handleClose"这个方法去掉了,改成用:close-on-click-modal = "false",不让在点击空白处的时候关闭对话框了;

5.遗留问题:在el-table组件中点击编辑回显到dialog弹框里时,修改某条信息但不保存,关闭对话框后,table表格里的信息是修改后的,需要刷新后才能拿回真实的数据,目前是关闭对话框后重新调取接口;

--------------------------------------------------------------------------

把重置对话框里的表单封装成一个reset()方法,令this.from中每个参数为空---清空表单 + this.$refs['form'].clearValidate()清空校验规则(放到this.$nextTick里面);

this.$nextTick(()=>{ this.$refs['form'].resetFields()})} (原来这里不用传form参数也行);---这个方法将表单重置为初始值,而不是清空表单;

在点击新增或者编辑方法里先调用reset()方法,关闭按钮事件里也调用reset()方法,解决了先点击编辑再点击新增或者编辑后对话框有遗留数据和遗留校验规则的问题;

点击编辑后回显修改数据无论是否保存,关闭对话框后table里的数据都改变了的问题修改:

el-table表格的数据显示在对话框的表单中,修改表单数据表格的数据也跟着变 - 简书

**********************************************************************************************************

写一下关键参数,方法的设置:

el-dialog组件,用:close-on-click-modal = "false"使点击空白处不会自动关闭对话框;

用@close定义一个方法,里面调用this.reset()函数,reset()函数中重新将form表单里的参数全置空and用his.$nextTick(()=>{ this.$refs['form'].clearValidate()})}清空校验规则;

dialog底部的取消按钮不再定义方法了,只设置了@click="dialogVisible = false";

新增显示对话框,先调用一下this.reset()方法; 

编辑回显弹出对话框没有调用this.reset()方法,给form表单赋值,用的Object.assign({},val)

我好菜啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊

  • 34
    点赞
  • 35
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值