1.基于Element-ui的表单重置操作

最新推荐文章于 2024-08-09 09:44:02 发布

小张针不错

最新推荐文章于 2024-08-09 09:44:02 发布

阅读量3.7k

点赞数 2

文章标签：前端 javascript html

本文链接：https://blog.csdn.net/weixin_68978623/article/details/127122128

版权

这篇博客介绍了如何在Vue.js应用中利用Element UI库来完成表单的重置操作。通过为表单元素绑定ref属性，然后在点击事件中调用$refs获取表单实例，再使用resetFields()方法可以轻松实现表单的重置，确保所有输入框回到初始状态。

摘要由CSDN通过智能技术生成

1.如下是基于element的表单重置操作

1.创建输入框

2.创建一个重置按钮

3.输入框的数据进行ref绑定

4.给按钮绑定点击事件，调出实列对象进行重置

2.解析方法：

1.ref="loginref" 拿到整个表单的实例对象，可以进行重置

2. @click="resetlogin" 绑定点击事件，拿到$refs实例对象进行重置

3.在点击事件中用element表单提供的resetFields的方法进行重置

3.具体使用（全部代码）

//ref="loginref" 拿到整个表单的实例对象，可以进行重置
<el-form
 ref="loginref"
> 
        <el-form-item prop="username">
          <el-input
></el-input>
        </el-form-item>
      
        <el-form-item prop="password">
          <el-input
></el-input>
        </el-form-item>
        
        <el-form-item class="btns">
        
        
          <el-button type="info" @click="resetlogin">重置</el-button>
        </el-form-item>
      </el-form>
      
      methods: {
       // 点击按钮重置表单
    resetlogin() {
      // 查看实例对象
      //resetFields()是饿了么方法
      // 重置
      this.$refs.loginref.resetFields();
    },   
      }