element-UI 多表单重置的时候的坑

问题细化一下是这样的：
比如我有一个用来修改数据的表单，第一条数据是{name: 'Xixi', age: 12}，打开表单后就有两个输入框分别填的是Xixi和12，此时我修改Xixi为Haha，调用this.$refs[].resetFields()后，该表单数据恢复为Xixi和12，这是没问题的。
现在我要修改第二条数据{name: 'Dog', age: 4}，打开表单后将Dog修改为Cat，此时我再次调用this.$refs[].resetFields()，表单数据理想情况应该被重置为{name: 'Dog', age: 4}，可是实际上会变成第一次传入的数据{name: 'Xixi', age: 12}，而理想的重置应该是重置为表单打开后的数据，无论是第几次被打开。

也就是说：
对于增操作，这个resetFields()是有效的，因为每次重置的值都是空。
对于改操作，因为每条数据不同，每次重置需要回到的值不同，但是resetFields()只认第一次打开表单后接收到的数据，这个功能就没用了。

解决办法：
现在我的解决办法是，利用v-if的特性，进行form的销毁和重建，强行让每一次改操作拿到的数据为传说中的初始值。

 <el-dialog  :visible.sync="dialogFormVisible" :modal='dialogModalDisable' >
          <template v-if="!isEdit">
          <el-form :model="form" status-icon :rules="rules" ref="form" :label-width="formLabelWidth" size="small" v-if="dialogFormVisible">
            <el-form-item label="用户名" prop="username" >
              <el-input type="text" v-model="form.username" autocomplete="off" ></el-input>
            </el-form-item>
            <el-form-item label="密码" prop="password">
              <el-input type="password" v-model="form.password" autocomplete="off" ></el-input>
            </el-form-item>
            <el-form-item label="超级管理员密码" prop="superpassword">
              <el-input type="password" v-model="form.superpassword" autocomplete="off" ></el-input>
            </el-form-item>
            <el-form-item label="核心交换机ID" prop="switch_id" required message="请输入密码">
              <el-select v-model="form.switch_id" placeholder="请选择核心交换机ID">
                <el-option
                  v-for="item in switch_group"
                  :key="item.id"
                  :label="item.switch_ipaddr"
                  :value="item.id">
                  <span style="float: left">{{ item.switch_ipaddr }}</span>
                  <span style="float: right; color: #8492a6; font-size: 13px">{{ item.id }}</span>
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="状态" prop="is_enabled">
              <el-switch
                v-model="form.is_enabled"
                active-color="#13ce66"
                inactive-color="#ff4949">
              </el-switch>
            </el-form-item>
            <el-form-item label="备注" prop="comments">
              <el-input type="text" v-model="form.comments" autocomplete="off" ></el-input>
            </el-form-item>
          </el-form>
            <div slot="footer" class="dialog-footer">
              <el-button type="primary" @click="submitForm('form')">提交</el-button>
              <el-button @click="resetForm('form')">重置</el-button>
            </div>
          </template>
          <template v-else >
          <el-form :model="editform" status-icon :rules="rules" ref="editform" :label-width="formLabelWidth" size="small" v-if="dialogFormVisible">
            <el-form-item label="ID" prop="editID" >
              <span>{{editform.editID}}</span>
            </el-form-item>
            <el-form-item label="用户名" prop="username" >
              <el-input type="text" v-model="editform.username" autocomplete="off" ></el-input>
            </el-form-item>
            <el-form-item label="密码" prop="password">
              <el-input type="password" v-model="editform.password" autocomplete="off" ></el-input>
            </el-form-item>
            <el-form-item label="超级管理员密码" prop="superpassword">
              <el-input type="password" v-model="editform.superpassword" autocomplete="off" ></el-input>
            </el-form-item>
            <el-form-item label="核心交换机ID" prop="switch_id" >
              <el-select v-model="editform.switch_id" placeholder="请选择核心交换机ID">
                <el-option
                  v-for="item in switch_group"
                  :key="item.id"
                  :label="item.switch_ipaddr"
                  :value="item.id">
                  <span style="float: left">{{ item.switch_ipaddr }}</span>
                  <span style="float: right; color: #8492a6; font-size: 13px">{{ item.id }}</span>
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="状态" prop="is_enabled">
              <el-switch
                v-model="editform.is_enabled"
                active-color="#13ce66"
                inactive-color="#ff4949">
              </el-switch>
            </el-form-item>
            <el-form-item label="备注" prop="comments">
              <el-input type="text" v-model="editform.comments" autocomplete="off" ></el-input>
            </el-form-item>
          </el-form>
            <div slot="footer" class="dialog-footer">
              <el-button type="primary" @click="submitForm('editform')">提交</el-button>
              <el-button @click="resetForm1('editform')">重置</el-button>
            </div>
          </template>

        </el-dialog>

标签：12,name,重置,表单,item,UI,element,Xixi
来源： https://www.cnblogs.com/randomlee/p/10560191.html