vue页面rules规则校验清除方法

//rules规则校验清除
this.$refs.ruleForm.resetFields();

ruleForm为中的ref属性值：<el-form ref="ruleForm">

HTML例子：

<div v-show="!showList">
    <div class="panel-heading">{{title}}</div>
    <el-form label-width="80px" :model="rule" :rules="rules" ref="ruleForm">
        <el-form-item label="名称" prop="name">
            <el-input v-model="rule.name" placeholder="名称"></el-input>
        </el-form-item>
        <el-form-item label="类型" prop="type">
            <el-select v-model="rule.type" style="width: 100%">
                <el-option
                    v-for="item in list"
                    :key="item.code"
                    :label="item.name"
                    :value="item.code*1">
                </el-option>
             </el-select>
         </el-form-item>            
         <el-form-item label="字段" prop="field">
             <el-select v-model="rule.field">
                 <el-row v-for="item in rulefieldList" :key="item.code">
                     <el-col :span="12">
                         <el-option :value="item.code"></el-option>
                     </el-col>
                     <el-col :span="12">
                         <el-option :value="item.code"></el-option>
                     </el-col>               
                 </el-row>               
             </el-select>
         </el-form-item>
         <el-form-item>
            <el-button type="primary" @click="saveOrUpdate">保存</el-button>
            <el-button type="warning" @click="reload">返回</el-button>
         </el-form-item>              
    </el-form>
</div>

CSS例子如下： 

//返回按钮
reload: function () {
    vm.showList = true;
    //rules校验清除
    this.$refs.ruleForm.resetFields();
}