标签：12 name 重置 表单 item UI element Xixi

问题细化一下是这样的：
比如我有一个用来修改数据的表单，第一条数据是{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

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。