Vue3+Element-plus的表单重置

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

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

<el-button type="primary" @click="Formreset">重置</el-button>
<el-form :inline="true" :model="fromModel" ref="form"><el-form-item label="产品搜索" prop="name"><el-inputv-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"><HanyeSelectComstyle="width: 200px"v-model="fromModel.industryTypeList"></HanyeSelectCom></el-form-item><el-form-item label="状态" prop="isShelves"><el-selectv-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>

import { ElForm } from 'element-plus'
const form = ref<InstanceType<typeof ElForm>>()
//表单重置
const Formreset = () => {form.value?.resetFields()
}