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()
}
相关推荐
昔人'1 小时前
`list-style-type: decimal-leading-zero;`在有序列表`<ol></ol>` 中将零添加到一位数前面
前端·javascript·html
岁月宁静7 小时前
深度定制:在 Vue 3.5 应用中集成流式 AI 写作助手的实践
前端·vue.js·人工智能
心易行者7 小时前
10天!前端用coze,后端用Trae IDE+Claude Code从0开始构建到平台上线
前端
saadiya~8 小时前
ECharts 实时数据平滑更新实践(含 WebSocket 模拟)
前端·javascript·echarts
fruge8 小时前
前端三驾马车(HTML/CSS/JS)核心概念深度解析
前端·css·html
百锦再8 小时前
Vue Scoped样式混淆问题详解与解决方案
java·前端·javascript·数据库·vue.js·学习·.net
烛阴8 小时前
Lua 模块的完整入门指南
前端·lua
Sheldon一蓑烟雨任平生9 小时前
Vue3 表单输入绑定
vue.js·vue3·v-model·vue3 表单输入绑定·表单输入绑定·input和change区别·vue3 双向数据绑定
浪里行舟9 小时前
国产OCR双雄对决?PaddleOCR-VL与DeepSeek-OCR全面解析
前端·后端
znhy@1239 小时前
CSS易忘属性
前端·css