element 表单、 dialog 与 message 小结

1. 表单提交前的校验方法

formName 是传递的参数，传递的是 el-form 的 ：model变量

<!-- 表单提交按钮写法 -->
<el-button type="primary" @click="validateForm('ruleForm')">立即创建</el-button>

validateForm (formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          console.log('valid')
          this.dialogVisible = true  // 对话框展现
        } else {
          console.log('error submit')
          return false  // 表单校验没通过
        }
      })
    },

 2.  dialog 对话框

• 需要设置visible属性，它接收Boolean，当为true时显示 Dialog。
• Dialog 分为两个部分：body和footer，footer需要具名为footer的slot。
• title属性用于定义标题，它是可选的，默认值为空。<span> 标签内部是 dialog 的具体内容
• before-close : 当点击 dialog 上的关闭图标或点击蒙层时， 会再弹出一个 new-dialog，这个 new-dialog 内的提示信息需要在 before-close 绑定的方法（handleClose）中设置。如果你在 footer 具名 slot 里添加了用于关闭 Dialog 的按钮，那么可以在按钮的点击回调函数里加入 before-close 的相关逻辑。

        <el-dialog
          title="提示"
          :visible.sync='resetVisible'
          width="30%"
          :before-close="handleClose">

          <span>确认重置表单数据？</span>
          <span slot="footer" class="dialog-footer">
            <el-button>取消</el-button>
            <el-button>确认</el-button>
          </span>
        </el-dialog>

// 不懂，就这么看着写
    handleClose (done) {
      this.$confirm('返回重新编辑？').then(_ => {
        done()
      }).catch(_ => {})
    },

3. 处理状态码400， 500问题

this.axios.post('xxxx', this.ruleForm).then((res) => {
// 返回正常时在控制台打印状态码
        console.log(res.status)
      }).catch(error => {
// error.response 就是返回的具体信息，里面包含status、 data 等
        console.log(error.response, error.response.status)
        switch (error.response.status) {
          case 400:
            this.$message.error('请检查数据格式后重新提交')
            break
          case 500:
            this.$message.error('500 出问题了，请重试一下')
            break
        }
      })