zoukankan      html  css  js  c++  java
  • vue element-ui 中关于清空表单的问题

    初学vue element-ui掉进了许多坑,下面是关于表单重置的问题处理方法:

    描述:例如一个添加dialog 填入数据后保存,关闭了dialog ,然后再次添加又显示上次添加的数据;这时就需要我们el-dialog 添加 @close绑定方法 如下:

        <!-- 添加dialog -->
                <el-dialog width="60%" :title="dialogTitle" :visible.sync="dialogFormVisible" @close="addDialogClosed">
                    <el-form :model="caseform" ref="caseformRef">
                        <el-form-item label="用例名称" :label-width="formLabelWidth" prop="case_name">
                            <el-input v-model="caseform.case_name" autocomplete="off"></el-input>
                        </el-form-item>
                        <el-form-item label="用例描述" :label-width="formLabelWidth" prop="case_desc">
                            <el-input v-model="caseform.case_desc" type="textarea" :autosize="{ minRows: 2, maxRows: 4}" autocomplete="off"></el-input>
                        </el-form-item>
                    </el-form>
                    <div slot="footer" class="dialog-footer">
                        <div>
                            <el-button @click="dialogFormVisible=false">取 消</el-button>
                            <el-button type="primary" @click="addcase()">确定</el-button>
                        </div>
                    </div>
                </el-dialog>
          

          // 对话框的关闭事件,item一定要加prop属性 和model 绑定的一致
          addDialogClosed() {
              this.$refs.caseformRef.resetFields()
          }

    尤其需要注意的是 item一定要加prop属性和model 绑定的一致,并且绑定的数据名称和后端接口返回的字段名称也一致,此方法亲测有效,大家可以尝试。

    item 一定要加prop属性

  • 相关阅读:
    响应报文
    IntelliJ IDEA 使用Git怎样记住密码和忘记密码的方法
    vue基础——命名路由
    vue基础——路由懒加载
    vue hash模式下如何使用a标签的锚点定位
    vue项目中修改第三方库的组件样式的方法
    CSS3实现水波纹效果
    日期对象Date的计算
    兼容性查询工具
    根据.svg文件借助IconMoon生成字体图标及应用的方法
  • 原文地址:https://www.cnblogs.com/mlmy/p/13261416.html
Copyright © 2011-2022 走看看