作用:简化代码,重置表单数据
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()
}