el-dialog + from表单提交

简单的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做一些关闭前的事，那么可以单独声明一个方法！