vue 重置按钮功能实现

最新推荐文章于 2024-03-27 17:13:29 发布

是江流儿呀

最新推荐文章于 2024-03-27 17:13:29 发布

阅读量3.3k

点赞数 8

文章标签：前端 vue webstorm

本文链接：https://blog.csdn.net/qq_61726905/article/details/127440470

版权

本文介绍了在Vue中实现重置按钮功能的方法。通过初始化查询数据，并利用深拷贝将初始状态的data复制到当前state，实现重置效果。在有下拉菜单Dropdown的情况下，通过在created钩子创建数据模板并在重置时应用，确保下拉菜单不会被重置回默认状态。

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

重置按钮功能：

按钮代码：

<Form :model="queryParams" ref="queryForm" :label-width="labelWidth" :label-position="labelPosition">
<Row :gutter="24" type="flex" justify="end">
  <Col v-bind="grid">
    <FormItem label="用户名称：">
      <Input v-model="queryParams.userName" maxlength="11" placeholder="请输入用户名"/>
    </FormItem>
  </Col>
  <Col v-bind="grid" class="ivu-text-right">
    <FormItem>
      <Button type="primary" @click="handleQuery">查询</Button>
      <Button class="ivu-ml-8" @click="resetQuery">重置</Button>
    </FormItem>
  </Col>
</Row>
</Form>

图示：