【element-ui表单】重置某一表单项，并移除校验结果

关键字: element-ui, resetField

在使用表单时可能会用到重置某一表单项，这里需要使用到表单项方法resetField： 对该表单项进行重置，将其值重置为初始值并移除校验结果。官网没有给详细示例，所以参考其他博客自己也写一个。注意区分resetFields，后者会重置整个表单。

代码

<el-form 
  :model="formData" 
  ref="form" 
  label-width="100px"
>
  <el-form-item
    label="姓名"
    ref="name"
    prop="name"
    :rules="[
      { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: ['blur', 'change'] }
    ]"
  >
    <el-input v-model="formData.name"></el-input>
  </el-form-item>
  
  <el-form-item
    label="年龄"
    ref="age"
    prop="age"
    :rules="[
      { type: 'number', message: '年龄须为阿拉伯数字'},
    ]"
    >
    <el-input v-model.number="formData.age"></el-input>
  </el-form-item>
  <el-form-item>
    <el-button type="primary" @click="submit('form')">提交表单</el-button>
    <el-button @click="resetFormItem('name')">重置姓名</el-button>
  </el-form-item>
</el-form>

<script>
export default {
  data () {
    return {
      formData: {
        name: '',
        age: ''
      }
    }
  },
  methods: {
    submit (formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          alert('success!')
        } else {
          return false
        }
      })
    },
    resetFormItem (formItem) {
      this.$refs[formItem].resetField()
    }
  }
}
</script>

结果

参考: Form-Item Methods