element-ui自带清除表单方法

用了elementUI里的form表单以后，踩了一些坑，下面整理了关于表单重置的几个关键点：

首先，el-form需要绑定ref值，不然在调用$refs时会找不到传进来的表单名

其次el-form-item需要有prop属性，因为表单的重置是需要根据prop来重置的

另外，最好是在data中对v-model绑定的这个prop属性值进行一个定义，设置一个初始的类型，这样重置的时候会重置为初始的类型，否则重置时可能会重置成其他的类型，就容易出现问题

（例如prop绑定userName，userName本来应该是字符串类型，可能重置成了其他类型，就会出现一些问题）

表单重置语法：

this.$refs.xxx.resetFields()

示例：

<el-form :model="form" ref="elForm">
  <el-form-item
    label="姓名"
    prop="userName"
  >
    <el-input v-model="form.userName"></el-input>
  </el-form-item>
  <el-form-item>
    <el-button @click="resetForm">重置</el-button>
  </el-form-item>
</el-form>
<script>
  export default {
    data() {
      return {
        form: { //绑定的表单对象
          userName: '', //设置prop绑定属性值的初始类型
        }
      };
    },
    methods: {
      resetForm() {
      // 通过ref找到要重置的form,调用resetFields方法进行重置
        this.$refs.elForm.resetFields();
      }
    }
  }
</script>