element ui 清空表单

以下是使用Element UI清空表单的方法：

1. 在Vue组件中引入Element UI库和表单验证插件：

import { Message } from 'element-ui'
import { mapActions } from 'vuex'
import { validate } from '@/utils/validate'

2. 在data中定义表单数据和表单验证规则：

data() {
  return {
    formData: {
      name: '',
      age: '',
      email: ''
    },
    rules: {
      name: [
        { required: true, message: '请输入姓名', trigger: 'blur' }
      ],
      age: [
        { required: true, message: '请输入年龄', trigger: 'blur' },
        { type: 'number', message: '年龄必须为数字值' }
      ],
      email: [
        { required: true, message: '请输入邮箱', trigger: 'blur' },
        { type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] }
      ]
    }
  }
},

3. 在表单中使用Element UI的el-form和el-form-item组件，并绑定表单数据和验证规则：

<el-form :model="formData" :rules="rules" ref="form" label-width="80px">
  <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 v-model.number="formData.age"></el-input>
  </el-form-item>
  <el-form-item label="邮箱" prop="email">
    <el-input v-model="formData.email"></el-input>
  </el-form-item>
</el-form>

4. 在表单中添加清空按钮，并绑定清空表单的方法：

<el-button type="primary" @click="submitForm('form')">提交</el-button>
<el-button @click="resetForm('form')">重置</el-button>

5. 在Vue组件中定义清空表单的方法：

methods: {
  ...mapActions(['addUser']),
  submitForm(formName) {
    this.$refs[formName].validate(valid => {
      if (valid) {
        this.addUser(this.formData)
        this.resetForm(formName)
        Message.success('添加成功')
      } else {
        Message.error('表单验证失败')
        return false
      }
    })
  },
  resetForm(formName) {
    this.$refs[formName].resetFields()
  }
}

以上就是使用Element UI清空表单的方法。在表单中添加一个重置按钮，并绑定清空表单的方法即可实现清空表单的功能。