Element组件踩坑记录

1、Dialog内放置表单，在初始化、resetField操作中出现异常。

原因：Dialog为中的body内容为动态渲染。即第一次页面加载的时候，并不会渲染放置其中的表单

因此要将更改表单值的操作放置在 $nextTicket 操作当中。然后判断 this.$refs['dialogForm'] 的值是否为 undifiened 进行下一步操作。

openDialog(type,data) {

      this.dialogFormVisible = true;
      this.dialogHandle = type;
      
      if(this.$refs['dialogForm'] !== undefined){
        this.$refs['dialogForm'].resetFields();
      }

      this.$nextTick(()=>{
        if(this.dialogHandle=='edit'){
          this.$set(this.dialogForm,'id',data.id)
          this.$set(this.dialogForm,'activity_name',data.activity_name)
          this.$set(this.dialogForm,'activity_url',data.activity_url)
          this.$set(this.dialogForm,'start_time',new Date(data.start_time.replace(/-/g,'/')))
          this.$set(this.dialogForm,'end_time',new Date(data.end_time.replace(/-/g,'/')))
          this.$set(this.dialogForm,'post_link',data.post_link)
          this.$set(this.dialogForm,'status',data.status)
        }
      })

2、表单 resetField 方法无效

2.1、表单放置在Dialog中，初次打开 resetField 方法百分百报错。原因参考第一条记录。解决方法：

if(this.$refs['dialogForm'] !== undefined){
        this.$refs['dialogForm'].resetFields();
      }

2.2、表单元素没有添加 prop 属性。

resetField方法是根据表单item的prop属性进行重置的。他重置的原则有两条，第一条，必须具备prop属性，第二是重置成第一次表单出现时的值，而不是你声明的值。所以如果resetField方法重置不符预期，可以从第一次表单赋值跟prop的值进行思考。