vue3如何获取到Form表单中的$ref？

西瓜的大瓜子

已于 2023-07-17 15:49:42 修改

阅读量2.1k

点赞数 1

文章标签： elementui javascript vue.js

于 2023-07-17 15:43:24 首次发布

本文链接：https://blog.csdn.net/qq_42252233/article/details/131767790

版权

文章展示了如何在Vue.js应用中使用ElementUI库创建表单，并通过`resetFields`方法重置表单数据。重点在于处理表单重置功能，包括三种不同的实现方式，并强调了`prop`属性的重要性，它是表单验证和重置的关键。

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

<el-form
        :model="searchForm"
        label-width="90px"
        :inline="true"
        ref="searchFormRef"
      >
        <el-form-item label="部门名称：" prop="userName">
          <el-input v-model="searchForm.userName" :style="labelWidth" />
        </el-form-item>
        <el-form-item label="手机号码：" prop="phonenumber">
          <el-input v-model="searchForm.phonenumber" :style="labelWidth" />
        </el-form-item>
        <el-form-item label="状态：" prop="status">
          <el-select
            v-model="searchForm.status"
            placeholder="请选择"
            :style="labelWidth"
          >
            <el-option
              v-for="item in statusList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="创建时间：">
          <el-date-picker
            v-model="dateValue"
            value-format="YYYY-MM-DD"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            :style="labelWidth"
            @change="handleDataPicker"
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="Search" @click="handleSearch"
            >搜 索</el-button
          >
          <el-button icon="Refresh" @click="handleReset(searchFormRef)">重 置</el-button>
        </el-form-item>
      </el-form>

const { proxy } = getCurrentInstance();
const searchFormRef = ref(null);

/** 重置点击事件*/
const handleResets = (formEl) => {
  // 方法一：
  searchFormRef.value.resetFields(); //需定义searchFormRef

  // 方法二：
  proxy.$refs.searchFormRef.resetFields()  //通过获取当前实例的方式

  // 方法三：
  formEl.resetFields(); //官方提供，需在点击事件中传参


  // 遇见的bug：漏掉了 prop 属性，导致试了多种方法都是重置表单失败，注：定义了 validate、resetFields 的方法时，该属性是必填的。
};