• el-form重置后input无法输入问题


    新增用户遇到的问题:

    在这里插入图片描述

    如果你没有为 formData 设置默认值,而只是将其初始化为空对象 {},则在打开dialog时,正常输入,
    formdata会变成如下
    在这里插入图片描述
    但是,打开后,直接使用 resetFields 或直接清空表单
    formdata会变成如下:
    在这里插入图片描述
    Vue 使用 Object.defineProperty 实现响应式系统,而这个方法只能劫持对象在初始化时存在的属性,后添加的属性不会被自动追踪。
    Vue 的响应式系统无法检测到新添加的属性,从而导致输入框无法及时更新到 DOM 上。

    当 formData 被清空时,后添加的属性(password、username)不会被 Vue 的响应式系统自动追踪,这会导致输入框无法及时挂载到 DOM 上。

    解决方案

    • 使用 Vue.set 方法:确保在为对象添加新属性时使用 Vue.set,以确保新属性是响应式的。
    this.$set(this.formData, 'name', '');`
    
    • 初始化默认值:在表单数据对象中预先设置好所有可能的字段,避免在运行时动态添加属性。
    formdata: {
    	id: null,
    	username: '',
    	password: '',
    	roleName: ''
    },
    

    新问题(修改用户):

    <el-dialog :title="formdata.id?'修改用户':'添加用户'" :visible.sync="dialogFormVisible" @close="closedialog">
      <div class="upload-div">
        <el-form :model="formdata" ref="formdata" label-width="80px" status-icon>
          <el-form-item class="formitem" label="用户名" prop="username">
            <el-input v-model="formdata.username">el-input>
          el-form-item>
          <el-form-item class="formitem" label="密码" prop="password">
            <el-input v-model="formdata.password">el-input>
          el-form-item>
          <el-form-item>
            <el-button type="primary" @click="submitForm">提交el-button>
            <el-button @click="resetForm('formdata')">重置el-button>
          el-form-item>
        el-form>
      div>
    el-dialog>
    

    在这里插入图片描述

    由于el-form组件进行了复用,formdata的初始值如上,在对el-table的某一行进行修改时,

    changeContent (row) {
      this.dialogFormVisible = true;
    
      // row.password = '';
      this.$nextTick(() => {
        this.formdata = JSON.parse(JSON.stringify(row));
        // this.$set(this.formdata, 'password', '')
      })
    },
    

    formdata重新赋值变成了
    在这里插入图片描述
    这就导致了在重置时,由于formdata的初始值设置中是有password,所以在重置后,formdata的结构如下
    在这里插入图片描述

    在打开dialog直接点击重置后,我们再往password的input中输入,发现会无法输入,这是因为此时password不具有响应式,是新添加的属性。
    如果打开dialog后,正常操作,则不会有上述问题。在输入password后password才会加入formdata,并变成响应式。

    解决办法:
     // 第一种方式:row.password = '';
    this.$nextTick(() => {
      this.formdata = JSON.parse(JSON.stringify(row));
      console.log("formdata", this.formdata);
      // 第二种方式:this.$set(this.formdata, 'password', '')
    })
    

    这两种方式都能将password变为响应式的。

    重置是在重置前的formdata的基础上进行的,重置前的formdata与初始化进行比较,将初始化的属性和属性值赋值到现在的formdata中,而方法不会赋值过来,这也就是password为什么没有响应式的原因。
    并且重置只会将在el-form中展示的属性进行重置,对上面的el-form进行重置,发现id和roleName并没有重置到初始状态,这是因为这两个属性并没有设置prop和v-model绑定。
    在这里插入图片描述

  • 相关阅读:
    浏览器播放rtsp视频,基于nodeJs
    html 电子时钟
    计算机网络
    ELK企业级日志分析系统
    Jmeter如何设置中文版
    实验讲解-线程池停止执行任务 Executor.execute & shutdown & awaitTermination & shutdownNow()
    HTML5 跨屏前端框架 Amaze UI
    硬件基础 - MOS管
    【python基础】复杂数据类型-字典(遍历)
    JAVA中医保健网站计算机毕业设计Mybatis+系统+数据库+调试部署
  • 原文地址:https://blog.csdn.net/Zing_ing/article/details/139939139