vue与elementui项目清空表单验证he数据

重点：表单的ref prop formrules

<el-dialog :title="title" :visible.sync="dialogVisible" width="30%" :before-close="handleClose" center>

</el-dialog>

handleClose() {

var vm = this;

vm.dialogVisible = false;

vm.$nextTick(() => {

this.$refs['FormSubmit'].clearValidate();

this.$refs['FormSubmit'].resetFields()//重置表单数据

})

//表单验证

formRules: {

RolesName: [{

required: true,

message: "请输入角色名称",

trigger: "blur"

}],

Explan: [{

required: true,

message: "请输入说明",

trigger: "blur"

}],

DeleteMask: [{

required: true,

message: "请选择状态",

trigger: "blur"

}],

<el-dialog :title="title" :visible.sync="dialogVisible" width="30%" :before-close="handleClose" center>

<el-form ref="FormSubmit" :model="data" label-width="80px" :rules="formRules">

<el-row>

<el-col>

<el-form-item prop="RolesName" label="角色名称" :label-width="formLabelWidth">

<el-input v-model="data.RolesName"></el-input>

</el-form-item>

</el-col>

</el-row>

<el-row>

<el-col>

<el-form-item prop="Explan" label="说明" :label-width="formLabelWidth">

<el-input v-model="data.Explan"></el-input>

</el-form-item>

</el-col>

</el-row>

<el-row>

<el-col>

<el-form-item prop="DeleteMask" label="状态" :label-width="formLabelWidth">

<el-select v-model="data.DeleteMask" placeholder="请选择状态">

<el-option label="正常" value="1"></el-option>

<el-option label="删除" value="0"></el-option>

</el-select>

</el-form-item>

</el-col>

</el-row>

</el-form>

<el-button type="primary" @click="handleSubmit('FormSubmit','Add')">确定</el-button>

</div>

</el-dialog>