• element-ui resetFields 无效的问题


    1.问题

    触发bug的条件是先打开,编辑进行赋值,后打开新增

    先点开编辑

     再打开新增

    这个时候你会发现刚刚赋值过的数据还遗留在表单里面

     即使在打开  dialog  的时候执行了重置也没有效果

    resetForm(formName) {
        if (this.dialogStatus === 'create') {
          this.$nextTick(() => {
            this.$refs[formName].resetFields()
          })
        }
    },

    2.关于resetFields()方法

    1. 此方法用于将form表单的数据设置为初始值
    2. 而这个初始值是在form mounted生命周期被赋值上去的
    3. 所以,在 form mounted之前,如果给form表单赋值了,那么后面调用resetFields()都是无效的,因为form表单的初始值已经在 mounted 之前就被赋值了

    3.解决办法

    所以我们要在 form 表单 mounted之后再进行赋值操作这样就可以完美解决问题了
    在点击编辑赋值的时候使用 “this.$nextTick” 方法即可

    handleEdit(row) {
        this.dialogStatus = 'update'
        this.dialogFormVisible = true
        this.$nextTick(() => {
            this.temp = Object.assign({}, row)
        })
        // this.temp = Object.assign({}, row)
    },
  • 相关阅读:
    Spring boot mvn
    软考
    java
    webserver代理生成本地类的两种方式
    行转列语句,记录一下
    React.PureComponent浅比较理解
    关于职业规划和职场规则以及未来发展发方向
    程序员的一天
    代码commit规范
    element UI 使用总结
  • 原文地址:https://www.cnblogs.com/cherylgi/p/14785842.html
Copyright © 2020-2023  润新知