vue element-ui form表单重置 快捷方法

最新推荐文章于 2024-05-08 12:36:30 发布
最新推荐文章于 2024-05-08 12:36:30 发布
阅读量5.4w 收藏 22
点赞数 8
分类专栏： vue vue
本文为博主原创文章，未经博主允许不得转载(转载请声明原文地址,谢谢java交流群:553997290)
本文链接：https://blog.csdn.net/qq_39313596/article/details/82014735
版权
vue 同时被 2 个专栏收录
67 篇文章 5 订阅
订阅专栏
vue
65 篇文章 1 订阅
订阅专栏

点重置快速清空的方法

 <el-form status-icon :rules="rules" :model="ruleForm" ref="ruleForm" :label-position="labelPosition" label-width="100px">
                <titleInfo>
                    <li>人员基本信息</li>
                </titleInfo>
                <div class="search_input clearfix">
                    <el-row>
                        <el-col :span="8">
                            <el-form-item label="机构名称:" prop="orgnName" >
                                <el-input v-model="ruleForm.orgnName" auto-complete="off" readonly>
                                    <el-button slot="append" icon="el-icon-search" @click="orgnQuery" ></el-button>
                                </el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item label="人员角色:" prop="roleId">
                                <el-select v-model="ruleForm.roleId"  placeholder="请选择角色" >
                                    <el-option v-for="item in roleDroplist" :key="item.id" :label="item.roleName" :value="item.id"></el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item label="人员工号:" prop="workNo">
                                <el-input type="text" v-model="ruleForm.workNo" auto-complete="off"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="8">
                            <el-form-item label="人员姓名:" prop="userName" >
                                <el-input type="text" v-model="ruleForm.userName" auto-complete="off"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item label="身份证号:" prop="idNo">
                                <el-input type="text" v-model="ruleForm.idNo" auto-complete="off"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item label="教育背景:" prop="education" >
                                <el-select v-model="ruleForm.education"  placeholder="请选择性别">
                                    <el-option v-for="item in educationSelect" :key="item.value" :label="item.label" :value="item.value"></el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="8" >
                            <el-form-item label="性别:" prop="gender" >
                                <el-select v-model="ruleForm.gender"  placeholder="请选择性别">
                                    <el-option v-for="item in genderSelect" :key="item.value" :label="item.label" :value="item.value"></el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item label="出生日期:"   prop="birthday">
                                <el-date-picker
                                v-model="ruleForm.birthday"
                                type="date"
                                value-format="yyyy-MM-dd"
                                placeholder="请选择出生日期">
                                </el-date-picker>
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item label="手机号:" prop="phone" >
                                <el-input type="text" v-model="ruleForm.phone" auto-complete="off"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="8">
                            <el-form-item label="QQ:" prop="qq" >
                                <el-input type="text" v-model="ruleForm.qq" auto-complete="off"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item label="微信:"  prop="wechat">
                                <el-input type="text" v-model="ruleForm.wechat" auto-complete="off"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item label="人员状态:" prop="status" >
                                <el-select v-model="ruleForm.status"  placeholder="请选择状态">
                                    <el-option v-for="item in statusSelect" :key="item.value" :label="item.label" :value="item.value"></el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </div>
                <titleInfo>
                <li>设置初始密码</li>
                </titleInfo>
                <div class="clearfix">
                    <el-row>
                        <el-col :span="8">
                            <el-form-item label="密码:" prop="userpwd">
                                <el-input type="password" v-model="ruleForm.userpwd"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item label="确认密码:" prop="checkUserpwd">
                                <el-input type="password" v-model="ruleForm.checkUserpwd"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </div>
                <titleInfo>
                <li>家庭与工作信息</li>
                </titleInfo>
                <div class="clearfix">
                    <el-row>
                        <el-col :span="8" class="clearfix">
                            <el-form-item label="家庭住址:"  prop="address">
                                <el-input type="text" v-model="ruleForm.address" auto-complete="off"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item label="家庭电话:" prop="mobile">
                                <el-input type="text" v-model="ruleForm.mobile" auto-complete="off"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="8" class="clearfix">
                            <el-form-item label="电子邮箱:"  prop="mail">
                                <el-input type="text" v-model="ruleForm.mail" auto-complete="off"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-col :span="8">
                        <el-form-item label="工作电话:"prop="workphone" >
                            <el-input type="text" v-model="ruleForm.workphone" auto-complete="off"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8" >
                        <el-form-item label="传真:"  prop="fax">
                            <el-input type="text" v-model="ruleForm.fax" auto-complete="off"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="Notes邮箱:" prop="notesMail" >
                            <el-input type="text" v-model="ruleForm.notesMail" auto-complete="off"></el-input>
                        </el-form-item>
                    </el-col>
                </div>
                <titleInfo>
                    <li>保存信息</li>
                </titleInfo>
                <div class="btn_bottom">
                    <button class="btn search"  @click="save">保存</button>
                    <button class="btn repeat"  @click="quit">取消</button>
                    <button class="btn repeat"  @click="rest">重置</button>
                </div>
            </el-form>

 在每个el-form-item  标签上加上prop="xxx"  这个xxx对应的el-input 标签上的  比如prop="notesMail"  

接着点击重置按钮重置执行这个重置的方法 ruleForm对应上你表单的 

  //重置
      rest() {

        this.$refs.ruleForm.resetFields()
      },

 

hlvy
关注
  • 8
    点赞
  • 踩
  • 22
    收藏
    觉得还不错? 一键收藏
  • 17
    评论
专栏目录
el-form组件使用resetFields重置失效问题解决，有效避坑
weixin_45755709的博客
12-21 2212
el-form组件使用resetFields重置失效问题解决，有效避坑
轻松解决element UI 表单重置问题
小白菜的博客
06-29 4121
三步解决前言一、从ui框架入手二、上手表单1.设置表单初始值2.表单初始化赋值以及一些通用参数3.给表单抽屉/弹窗设置open方法总结 前言 在后台管理系统中，最常见的业务就是CURD，对数据进行增删改，通常情况下新增与编辑我们会做成一个通用组件，我们在不使用v-if的情况下如何重置我们的表单呢？ 技术栈：vue3.0 + elementPlus 一、从ui框架入手 方法名 说明 resetFields 对整个表单进行重置，将所有字段值重置为初始值并移除校验结果 clearValida
快速解决Vue、element-ui的resetFields()方法重置表单无效的问题
12-28
问题： 使用this.$ref[‘form’] .resetFields()无法重置表单项 原因： 1.没有给表单添加ref属性 2.表单项el-form-item没有添加prop属性，prop属性需要与input框绑定的属性一致 </e
ElementUI使用指南(一文即可上手创建简单页面)
最新发布
weixin_43819028的博客
05-08 1639
Element，是由国内的饿了么团队开发并开源的一套面向开发者、设计师和产品经理准备的基于 Vue 的UI组件库。
ElementUI 之el-form表单重置功能按钮
zhouzhiwengang的专栏
07-18 5512
业务场景： 使用el-form时，点击重置按钮或者取消按钮时会实现表单重置效果。 重置功能按钮功能实现详细步骤: 第一:首先给el-form添加ref属性。 <el-form :inline="true" :model="queryParams" ref="queryForm"> 第二：在点击重置按钮执行的方法中，执行如下功能代码片段 reset(){ # 重新设置请求参数实体属性 this.queryParams = {
vue element-ui form表单重置
qq_41596271的博客
08-18 352
记录一下遇到的问题 表单重置 拿到表单 ref // 监听添加用户对话框的 关闭 事件 addUserDialogClosed() { this.$refs.editFormRef.resetFields() },
el-form如何重置表单数据
qq_39594951的博客
08-05 3707
1.在项目中我们经常会遇到el-form重置表单失效,那么我们可以采取另外一种方法 例如: <el-form :model="formLine" ref="formLine"> <el-row v-for="(item,index) in formLine.searchVOList" :key="index"> <el-col :span="18"> <el-form-item :label="
elementui中form表单的重置方法resetFields，resetFields不生效
super帅的博客
08-09 2205
elementui中form表单的重置方法resetFields，解决resetFields不生效问题
vue-form-component:一个可以动态生成表单项的form表单组件
05-11
一个基于vue.js和element-ui可以动态生成表单项form表单 此动态form表单是基于element-ui里的el-form表单基础上进行修改而来，它实现了新增表单项、删除表单项、表单验证和重置表单、表单提交等form表单所拥有的基本...
vue构建动态表单的方法示例
12-10
我结合element ui的控件的下拉框,输入框，时间选择控件和vue-treeselect，做了一个动态表单。 v-model的理解 先简单讲一下vue-model是怎么玩的。其实vue-model相当于给表单元素传递一个value,外部监听input事件。...
element-ui-verify：如果您受够了饿了么ElementUI原生的重置方式，那就来试试它吧！
02-06
饿了么ElementUI虽好，但表单校正的体验不够理想 如果说产品开发要讲讲究用户体验，那插件开发也要讲究开发体验，而好的开发体验，要靠好的api设计来保障 本人专注校准插件开发30年，有祖传的校验插件api设计（玩笑...
ElementUI中el-form实现表单重置以及将方法抽出为全局方法
BADAO_LIUMANG_QIZHI的博客
08-31 3211
场景 使用el-form时，点击重置按钮或者取消按钮时会实现表单重置效果。 那么el-form怎样实现表单重置，如果在多个页面需要用到重置，怎样将此方法抽出为全局的方法，在需要用到的地方直接引用。 注： 博客：https://blog.csdn.net/badao_liumang_qizhi 关注公众号 霸道的程序猿 获取编程相关电子书、教程推送与免费下载。 实现 实现重置 首先给el-form添加ref属性。 <el-form :model="queryParams" ref=.
ElementUI实现el-form表单重置功能按钮
m0_61657405的博客
07-28 4746
ElementUI实现el-form表单重置功能按钮
解决表单＜el-form＞无法实现重置的方案
weixin_45331887的博客
04-19 1203
## 记录项目点点滴滴04.19 问题描述： 今天在写<el-form表单的时候，在重置表单数据时，点击事件无效，无法将表单的数据置空。回去看了vue的文档后，发现在<el-form-item没有添加prop属性导致无法重置，最后添加后，解决了问题。 解决方案： 1.没有在表单中绑定ref对象(可不加:)，正确写法如下 2.没有给表单项<el-form-item添加prop属性 PS:prop的值要和model绑定的值一致。 3.方法实现 ①在methods方法中写一个重置表单信息的
el-form内容重置（解决点击保存关闭后再点击新增会有编辑携带的数据的问题）
leng0920的博客
09-05 840
el-form内容重置（解决点击保存关闭后再点击新增会有编辑携带的数据的问题）
el-form重置输入框内容
十年树人的博客
03-28 502
输入框的样式 代码 <el-form :inline="true" :model="queryInfo" class="demo-form-inline" ref="tableSearch"> <div class="search_container"> <el-form-item label="名称" prop="name"> <el-input v-model="queryInfo.name" placehold
vue登录表单重置问题
初心不改
02-21 828
举个例子 <el-form :model="userLoginForm" :rules="loginRules" status-icon ref="userLoginFormRef" label-position="left" label-width="0px" class="de
vue3 element-ui from表单重置
05-17
在 Vue 3 中，可以使用 `ref` 来获取表单元素，并通过 `reset` 方法来重置表单。同时，Element UI 表单也提供了 `resetFields` 方法来重置表单。 以下是一个示例： ```vue <template> <el-form ref="myForm"> <!-- 表单项 --> <el-form-item label="用户名" prop="username"> <el-input v-model="form.username"></el-input> </el-form-item> <el-form-item label="密码" prop="password"> <el-input type="password" v-model="form.password"></el-input> </el-form-item> <el-form-item> <el-button type="primary" @click="submit">提交</el-button> <el-button @click="reset">重置</el-button> </el-form-item> </el-form> </template> <script> import { ref } from 'vue'; export default { setup() { const form = ref({ username: '', password: '', }); const myForm = ref(null); // 提交表单 const submit = () => { myForm.value.validate((valid) => { if (valid) { // 表单验证通过后的操作 } else { // 表单验证失败的操作 } }); }; // 重置表单 const reset = () => { form.value = { username: '', password: '', }; myForm.value.resetFields(); }; return { form, myForm, submit, reset, }; }, }; </script> ``` 在上面的示例中，我们使用了 `ref` 来获取了表单元素，并定义了 `form` 和 `myForm` 两个变量。`submit` 方法用于提交表单，而 `reset` 方法则重置了表单数据和验证状态。在 `reset` 方法中，我们通过 `myForm.value.resetFields()` 来调用 Element UI 表单的重置方法。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 17
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值