vue +element表单无法重置

最新推荐文章于 2024-08-16 23:32:06 发布

内向蛋挞

最新推荐文章于 2024-08-16 23:32:06 发布

阅读量124

点赞数

文章标签： vue.js elementui javascript

本文链接：https://blog.csdn.net/m0_62330492/article/details/131449843

版权

<template>
  <el-dialog
    v-model="dialogVisible"
    style="width: 20%"
    :title="title"
    @close="closeDialog"
  >
    <el-form id="myForm" ref="ocrmForm1" label-width="120px" :model="form">
      <el-form-item label="名称" >
        <el-input v-model="form.data.title" />
      </el-form-item>
      <el-form-item label="调用方法" >
        <el-input v-model="form.data.actionName" />
      </el-form-item>
      <el-form-item label="参数" >
        <el-input v-model="form.data.params" />
      </el-form-item>
      <el-form-item label="备注" >
        <el-input v-model="form.data.memo" />
      </el-form-item>
      <el-form-item label="调用接口URL">
        <el-input v-model="form.data.interfaceUrl" />
      </el-form-item>
      <div class="dialog-footer">
        <el-button @click="reset">重置</el-button>
        <el-button @click="confirm">确定</el-button>
        <el-button @click="closeDialog">取消</el-button>
      </div>
    </el-form>
  </el-dialog>
</template>

自己写了个表单，做重置功能的时候代码没能重置，重置点击事件如下

  const ocrmForm1 = ref('')
  const reset = () => {
    ocrmForm1.value.resetFields()
  }

后来发现是没有给prop,更给表单内，添加上prop就可以用了

<template>
  <el-dialog
    v-model="dialogVisible"
    style="width: 20%"
    :title="title"
    @close="closeDialog"
  >
    <el-form id="myForm" ref="ocrmForm1" label-width="120px" :model="form">
      <el-form-item label="名称" prop="data.title">
        <el-input v-model="form.data.title" />
      </el-form-item>
      <el-form-item label="调用方法" prop="data.actionName">
        <el-input v-model="form.data.actionName" />
      </el-form-item>
      <el-form-item label="参数" prop="data.params">
        <el-input v-model="form.data.params" />
      </el-form-item>
      <el-form-item label="备注" prop="data.memo">
        <el-input v-model="form.data.memo" />
      </el-form-item>
      <el-form-item label="调用接口URL" prop="data.interfaceUrl">
        <el-input v-model="form.data.interfaceUrl" />
      </el-form-item>
      <div class="dialog-footer">
        <el-button @click="reset">重置</el-button>
        <el-button @click="confirm">确定</el-button>
        <el-button @click="closeDialog">取消</el-button>
      </div>
    </el-form>
  </el-dialog>
</template>