el-form的用法 elementui

 

1.作為彈框的el-form，點擊出現彈框內容

clearValidate移除表單項的校驗結果

    handleCreate() {
      this.resetTemp()
      this.dialogStatus = 'create'
      this.dialogFormVisible = true
      this.$nextTick(() => {
        // clearValidate移除表單項的校驗結果
        this.$refs['dataForm'].clearValidate()
      })
    },

 

2.提交 作為彈框的el-form

    // 新增對話框 提交數據
    createData() {
      this.$refs['dataForm'].validate((valid) => {
        // valid為布爾值
        if (valid) {
          this.temp.id = parseInt(Math.random() * 100) + 1024 // mock a id
          this.temp.author = 'vue-element-admin'
          createArticle(this.temp).then(() => {
            // unshift向數組的頭部添加一個或者多個元素，this.list返回新的長度
            this.list.unshift(this.temp)
            this.dialogFormVisible = false
            this.$notify({
              title: 'Success',
              message: 'Created Successfully',
              type: 'success',
              duration: 2000
            })
          })
        }
      })
    },