zoukankan      html  css  js  c++  java
  • 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>
    

      

  • 相关阅读:
    克如斯卡尔 P1546
    真正的spfa
    第四课 最小生成树 要点
    关于vscode中nullptr未定义
    cmake学习笔记
    python学习笔记
    (BFS 图的遍历) 2906. kotori和迷宫
    (图论基础题) leetcode 997. Find the Town Judge
    (BFS DFS 并查集) leetcode 547. Friend Circles
    (BFS DFS 图的遍历) leetcode 841. Keys and Rooms
  • 原文地址:https://www.cnblogs.com/randomlee/p/10560191.html
Copyright © 2011-2022 走看看