简单的dialog 表单提交案例
<el-dialog
title="请输入名称"
:visible.sync="copyDialogVisible"
width="30%"
custom-class="copyBoxClass"
:close-on-click-modal="false"
@close="copyClose()"
>
<el-form
ref="copyFrom"
:rules="rules"
:model="copyFrom"
>
<el-form-item prop="copyBoxName">
<el-input v-model="copyFrom.copyBoxName" placeholder="请输入名称" />
</el-form-item>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button type="primary" plain @click="copyDialogVisible = false">取 消</el-button>
<el-button type="primary" @click="copySubmit('copyFrom')">确 定</el-button>
</span>
</el-dialog>
<script>
export default {
data() {
return {
copyDialogVisible: false,
copyFrom: {
copyBoxName: ''
},
rules: {
copyBoxName: [
{ required: true, message: '名称不能为空', trigger: ['blur', 'change'] }
]
}
}
},
methods: {
//触发验证
copySubmit(name) {
this.$refs[name].validate((valid) => {
if (valid) {
//验证通过
} else {
//验证失败
}
})
},
// 重置校验状态
copyClose() {
this.$refs.copyFrom.resetFields()
},
}
}
</script>
这里碰到一个问题，
当el-dialog 使用before-close绑定触发表单重置 会报错！
copyClose() {
this.$refs.copyFrom.resetFields()
},
错误信息
image.png
这里我们只需要把 this.$refs.copyFrom.resetFields() 用@close绑定即可避免。
如果需要时用before-close做一些关闭前的事，那么可以单独声明一个方法！
