vue+elementui 對話方塊取消 表單驗證重置
阿新 • • 發佈:2018-11-07
最近在寫增刪改查,在新增的時候要彈出對話方塊填寫form表單資訊,發現對話方塊右上角的小X和右下角的取消不是一個事件,我想在點選它們兩個的時候都可以重置表單,最終解決,如下。
vue:
<el-dialog :title="titleName[dialogStatus]" :visible.sync="dialogFormVisible" @close="closeDialog" :close-on-click-modal="false"> <el-form :model="form" :rules="rules" ref="form"> ... </el-form> <div slot="footer" class="dialog-footer"> <el-button @click="closeForm('formb')">取消</el-button> <el-button type="primary" @click="submitForm('formb')" v-show="save">儲存</el-button> </div> </el-dialog>
js:
export default{ data() { form: { } }, methods:{ // 對話方塊取消事件 closeFrom(formName){ this.dialogFormVisible = false; // 點選取消 資料重置 this.$refs[formName].resetFields(); }, // 對話方塊關閉事件 closeDialog(){ // 點選關閉 資料重置 this.$refs['form'].resetFields(); } } }