Vue+element 關于表單的一些問題

問題1：新增和編輯功能共用同一表單時，先編輯指派回顯，關閉表單後再打開新增時，會發現 this.$refs.[formName].resetFields()無效，即回顯的内容在新增的表單内并沒清空

解決辦法：在指派的時候使用（指派時注意深淺拷貝的問題）

this.$nextTick(function() {   //關鍵使用this.$nextTick
        this.Form = res //這裡指派
      })
或者使用
 setTimeout(() => {
              this.Form = res //這裡指派
    }, 1000)
           

其他原因：

1.表單上沒有添加ref屬性

解決：在form上添加ref，需要與this.$ref[‘form’] 中名稱一緻

<el-form ref="form"></el-form>
           

2.el-form-item沒有添加prop屬性

解決：prop屬性需要與data綁定的屬性一緻

<el-form-item label="表單1" prop="msg1" >
            <el-input v-model="Form.msg1" clearable></el-input>
</el-form-item>
           

問題2：數組對象在指派更新時，資料沒更新到頁面，還是由于 JavaScript 的限制，Vue 不能檢測對象屬性的添加或删除：

解決：數組檢測更細變異的方法

push()

pop()

shift()

unshift()

splice()

sort()

reverse()

var data = {name：'張三'，age:'18'}
更新資料方式1：
  this.$set(this.List, Index, data)  //(要更新的目标數組對象，下标，更新的内容)
 更新資料方式2：
  this.List.splice(Index, 1, data) //要更新的目标數組對象.splice(下标，更新一條，更新的内容)