Vue-element ui实现多表单重置

记录Vue表单重置的一些注意点

完整的from代码：

<el-form ref="form" :model="form">
    <el-form-item label="param" prop="param">
        <el-input v-model="form.param"></el-input>
    </el-form-item>
    <el-form-item>
        <el-button @click="reset()">重置</el-button>
    </el-form-item>
</el-form>

from绑定的model结构：

data() {
    return{
      form: {
        param: ''
    }
  },

restFields()方法说明：对整个表单进行重置，将所有字段值重置为初始值并移除校验结果

reset() {
  this.$refs.from.resetFields();
},

注意：el-from需要设置ref名称，el-form-item需要设置prop，并且和from里面的参数一致才能生效

当页面from比较多，可以写公共的reset方法，传入ref的form

reset(from) {
  this.$refs[from].resetFields();
},

 $refs[from].resetFields()代替$refs.from.resetFields()的写法，如果是数组，就$refs[from][0]

 点击事件这样传参，@click="reset('form')