elementplus表单怎么重置表单项
时间: 2023-08-06 11:08:49 浏览: 231
在 Element Plus 中,你可以使用 `resetFields` 方法来重置表单项。以下是一个示例代码:
```html
<template>
<el-form ref="myForm" :model="formData" label-width="100px">
<el-form-item label="姓名" prop="name">
<el-input v-model="formData.name"></el-input>
</el-form-item>
<el-form-item label="年龄" prop="age">
<el-input-number v-model="formData.age"></el-input-number>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="resetForm">重置</el-button>
</el-form-item>
</el-form>
</template>
<script>
export default {
data() {
return {
formData: {
name: '',
age: ''
}
};
},
methods: {
resetForm() {
this.$refs.myForm.resetFields(); // 使用 resetFields 方法重置表单项
}
}
};
</script>
```
在上面的代码中,我们创建了一个包含姓名和年龄的表单,并使用 `ref` 属性给表单添加了一个引用。当点击重置按钮时,调用了 `resetForm` 方法,在该方法中使用 `resetFields` 方法来重置表单项。
阅读全文