vue3在函数中调用element自带的方法如resetFields

最新推荐文章于 2025-04-22 13:08:11 发布

原创最新推荐文章于 2025-04-22 13:08:11 发布 · 555 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端 #elementui

毕设专栏收录该内容

3 篇文章

订阅专栏

在Vue中使用ElementUI库创建的表单，可以通过`ref`和`unref`结合`resetFields`方法实现在表单提交后清空所有字段的数据。文章详细介绍了如何在表单组件上设置`ref`，以及在提交函数中调用`resetFields`来重置表单。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.场景：在element 表单中想实现提交表单后，数据清零

<el-form
      ref="userForm"   给表单取一个ref的名字
      :inline="true"
      :model="formUser"
      class="demo-form-inline"
    >
      <el-form-item label="姓名" prop="name">  PS：必须要有prop才生效
        <el-input v-model="formUser.name" placeholder="请输入用户名" />
      </el-form-item>
      <el-form-item label="性别" prop="sexLabel">
        <el-select v-model="formUser.sex" placeholder="请选择">
          <el-option label="男" value="0" /> <el-option label="女" value="1" />
        </el-select>
      </el-form-item>
      <el-row style="justify-content: flex-end">
        <el-form-item>
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="onSubmit"> 确定 </el-button>
        </el-form-item>
      </el-row>
    </el-form>

2.函数调用

import { onMounted, reactive, ref, unref } from 'vue';
//添加用户后清空
let userForm = ref();
const onSubmit = () => {
  const form = unref(userForm);
  form.resetFields();
};
新知识点：unref