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
        }
      })