通过组件reload()方法表单刷新第一次点击按钮无法刷新

       在开发中我们可能需要通过一个组件显示多个表格,当我们需要通过父组件的按钮点击触发事件,在该事件的方法中调用子组件的reload()方法来对子组件的表单进行改变刷新的时候,可能会出现第一次点击按钮没有效果,再次点击按钮才能刷新的问题,可能是因为没有考虑时延的问题,出现下面的写法:

table_show(e) {
        this.switch_value_table = e.type;
        this.tableShow = true;
        this.$nextTick(() => {
          this.$refs?.data_center?.reload(this.switch_value_table, this.orgid, this.switch_value_time);
        });
      },

       我第一次做的时候也没有考虑这方面的问题,这里我通过tableShow变量来控制子组件(表格)的显示隐藏,type变量控制表格的类型,然后再调用子组件的reload()方法来刷新表单,当当前表格为学生信息表时,需要通过点击按钮切换到学生成绩表时,就出现了第一次点击无效,第二次点击才能刷新到学生成绩表的情况,原因是reload函数可能在tableShow变量改变前就执行了,导致刷新在学生成绩表格显示前就发生了,结果就是刷新了但是学生成绩表格没有显示出来显示的还是学生信息表,第二次点击因为在上一次点击事件中图表已经通过tableshow变量显示出来了所以点击按钮reload()就可以获取到刷新后的学生成绩表。想要解决这个问题可以将reload延迟执行,这样就可以在先将表格展示出来后在进行刷新操作达到切换表格的效果。实现方法如下:

table_show(e) {
        this.switch_value_table = e.type;
        this.tableShow = true;
        this.$nextTick(() => {
          setTimeout(() => {
            this.$refs?.data_center?.reload(this.switch_value_table, this.orgid, this.switch_value_time);
          }, 200); //通过setTimeout将reload()延时200ms执行
        });
      },
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值