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(下标，更新一条，更新的内容)