• 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>
    

      

  • 相关阅读:
    CSS之APP开发比较实用的CSS属性
    关于 js 中的 call 和 apply使用理解
    灵感一:搜索型APP,帮助读书爱好者,搜索某本书的关键字
    常用排序算法:基数排序
    常用排序算法:桶排序
    常用排序算法:计数排序
    常用排序算法:希尔排序
    常用排序算法:归并排序
    常用排序算法:堆排序
    常用排序算法:快速排序
  • 原文地址:https://www.cnblogs.com/randomlee/p/10560191.html
Copyright © 2020-2023  润新知