Vue3+Element-plus的表单重置

作用:简化代码,重置表单数据

1.创建表单,绑定表单数据对象model,并且每一表单需要绑定prop

html 复制代码
<el-button type="primary" @click="Formreset">重置</el-button>
<el-form :inline="true" :model="fromModel" ref="form">
    <el-form-item label="产品搜索" prop="name">
        <el-input
            v-model="fromModel.name"
            style="width: 200px"
            placeholder="请输入产品名称"
            clearable
        />
    </el-form-item>
    <el-form-item label="产品类型" prop="productType">
        <FddCom v-model="fromModel.productType" style="width: 200px"></FddCom>
    </el-form-item>
    <el-form-item label="适用行业分类" prop="industryTypeList">
        <HanyeSelectCom
            style="width: 200px"
            v-model="fromModel.industryTypeList"
        ></HanyeSelectCom
    ></el-form-item>
    <el-form-item label="状态" prop="isShelves">
        <el-select
            v-model="fromModel.isShelves"
            placeholder="请选择"
            @change="changestatus"
        >
            <el-option :label="'上架'" :value="1" />
            <el-option :label="'下架'" :value="0" /> </el-select
    ></el-form-item>
    <el-form-item>
        <el-button type="primary" @click="SearchTPwuliao">查询</el-button>
        <el-button type="primary" @click="Formreset">重置</el-button>
        <el-button type="primary" @click="onSubmit">导出</el-button>
    </el-form-item>
</el-form>
javascript 复制代码
import { ElForm } from 'element-plus'
const form = ref<InstanceType<typeof ElForm>>()
//表单重置
const Formreset = () => {
    form.value?.resetFields()
}
相关推荐
YongGit9 分钟前
探索 AI + MCP 渲染前端 UI
前端·后端·node.js
慧一居士1 小时前
<script setup>中的setup作用以及和不带的区别对比
前端
RainbowSea1 小时前
NVM 切换 Node 版本工具的超详细安装说明
java·前端
读书点滴1 小时前
笨方法学python -练习14
java·前端·python
Mintopia1 小时前
四叉树:二维空间的 “智能分区管理员”
前端·javascript·计算机图形学
慌糖1 小时前
RabbitMQ:消息队列的轻量级王者
开发语言·javascript·ecmascript
Mintopia2 小时前
Three.js 深度冲突:当像素在 Z 轴上玩起 "挤地铁" 游戏
前端·javascript·three.js
Penk是个码农2 小时前
web前端面试-- MVC、MVP、MVVM 架构模式对比
前端·面试·mvc
markyankee1012 小时前
Vue.js 入门指南:从零开始构建你的第一个应用
vue.js
MrSkye2 小时前
🔥JavaScript 入门必知:代码如何运行、变量提升与 let/const🔥
前端·javascript·面试