vue3+elementPlus：无法清空问题，清空表单没效果

最新推荐文章于 2024-10-12 14:04:37 发布

肖肖肖丽珠

最新推荐文章于 2024-10-12 14:04:37 发布

阅读量561

点赞数 6

文章标签： vue.js elementui javascript

本文链接：https://blog.csdn.net/qq_33769914/article/details/141426457

版权

<el-form ref="formRef" :inline="true" :model="filters" class="card table-search">
    <el-form-item label="">
      <el-input v-model="filters.name" placeholder="请输入居民名称" clearable />
    </el-form-item>
    <el-form-item label="" >
      <el-input v-model="filters.idCard" placeholder="请输入身份证号码" clearable />
    </el-form-item>
    <el-form-item  class="operation">
      <el-button type="primary" @click="search"> 查询</el-button>
      <el-button @click="reset()"> 清空</el-button>
    </el-form-item>
</el-form>

清空表单

const formRef=ref()

formRef.value.resetFields();

发现没起作用

最后才意识到el-form-item标签上面必须有prop

改成下面的就可以啦

<el-form ref="formRef" :inline="true" :model="filters" class="card table-search">
    <el-form-item label="" prop="name">
      <el-input v-model="filters.name" placeholder="请输入居民名称" clearable />
    </el-form-item>
    <el-form-item label="" prop="idCard">
      <el-input v-model="filters.idCard" placeholder="请输入身份证号码" clearable />
    </el-form-item>
    <el-form-item  class="operation">
      <el-button type="primary" @click="search"> 查询</el-button>
      <el-button @click="reset()"> 清空</el-button>
    </el-form-item>
</el-form>