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()
}
相关推荐
知孤云出岫几秒前
web 渗透学习指南——初学者防入狱篇
前端·网络安全·渗透·web
贩卖纯净水.6 分钟前
Chrome调试工具(查看CSS属性)
前端·chrome
栈老师不回家1 小时前
Vue 计算属性和监听器
前端·javascript·vue.js
前端啊龙1 小时前
用vue3封装丶高仿element-plus里面的日期联级选择器,日期选择器
前端·javascript·vue.js
一颗松鼠1 小时前
JavaScript 闭包是什么?简单到看完就理解!
开发语言·前端·javascript·ecmascript
小远yyds1 小时前
前端Web用户 token 持久化
开发语言·前端·javascript·vue.js
程序媛小果2 小时前
基于java+SpringBoot+Vue的宠物咖啡馆平台设计与实现
java·vue.js·spring boot
小光学长2 小时前
基于vue框架的的流浪宠物救助系统25128(程序+源码+数据库+调试部署+开发环境)系统界面在最后面。
数据库·vue.js·宠物
阿伟来咯~2 小时前
记录学习react的一些内容
javascript·学习·react.js
吕彬-前端2 小时前
使用vite+react+ts+Ant Design开发后台管理项目(五)
前端·javascript·react.js