element-plus点击重置表单，却没有进行重置操作

ドロロ8062025-05-10 18:41

html 复制代码

<script lang="ts" setup>
import {useCreateTask} from "./Create.ts";

const useCreate = useCreateTask()
const createTaskFormRef = useCreate.createTaskFormRef
const resetForm = (form: any) => {
  useCreate.resetForm(form)
}

import {useCreateProduct} from "./DialogCreate.ts";

const useProduct = useCreateProduct()
const createFormRef = useProduct.createFormRef
const resetFormProduct = (form: any) => {
  useProduct.resetForm(form)
}
</script>

<template>
  <el-form ref="createTaskFormRef" :model="useCreate.createTaskForm" label-width="auto"
           style="max-width: 600px">
    <el-form-item label="软件版本">
      <el-input v-model="useCreate.createTaskForm.softwareVersion" placeholder="请输入软件版本"/>
    </el-form-item>
  </el-form>
  <el-button @click="resetForm(createTaskFormRef)">重置数据</el-button>

  <el-form ref="createFormRef" :model="useProduct.createForm" label-width="auto"
           style="max-width: 600px">
    <el-form-item label="产品名称" prop="product_name">
      <el-input v-model="useProduct.createForm.product_name" placeholder="请输入软件版本"/>
    </el-form-item>
  </el-form>
  <el-button class="reset-button" @click="resetFormProduct(createFormRef)">重置</el-button>
</template>

<style scoped>

</style>

注意，这里重置产品名称是可以成功的，而重置数据却不能成功，原因是需要prop="product_name"作为字段唯一标识符