ElementUI嵌套dialog无法渲染table问题

gistfile1.md

问题背景

在项目开发当中使用到了dialog嵌套dialog的情况,ElementUI的用法是在子dialog上追加参数:append-to-body="true", dialog中使用el-form提交数据,下面用el-table来展示数据,问题就出来提交数据一切都正常,而table不显示数据.仔细发现 table的表头并不存在,说明根本就没有渲染成功.

父dialog调用子dialog展示方法

initData(vipId, vipPhone) {
      this.vip_visit.vipId = vipId;
      this.vip_visit.obj.vipUserId = vipId;
      this.vip_visit.vipUser = vipPhone;
      const param = { vipUserId: vipId };
      // var that_ = this;
      http_queryVipUserReturnVisit(param).then(res => {
        if (res.data.code == 200) {
          this.vip_visit.tableList = res.data.data;
          // 问题出在这 
          this.vip_visit.returnVisitDialog = true;
        }
      });
    },

按照正常的情况下,在箭头函数当中,this指向了vue的实例,并且form表单也渲染出来,但是当tableList为空时, 提交表单后,table就是没有刷新内容,why?

解决过程

initData(vipId, vipPhone) {
      this.vip_visit.vipId = vipId;
      this.vip_visit.obj.vipUserId = vipId;
      this.vip_visit.vipUser = vipPhone;
      const param = { vipUserId: vipId };
      // var that_ = this;
      http_queryVipUserReturnVisit(param).then(res => {
        if (res.data.code == 200) {
          this.vip_visit.tableList = res.data.data;
          // 问题出在这 
          
        }
      });
      this.vip_visit.returnVisitDialog = true;
    },

把展示的表达式放到异步函数的外边,发现问题解决！但是会闪一条数据,遂看了data的数据.如下：

vip_visit: {
        vipId: "",
        dialogName: "",
        returnVisitDialog: false,
        vipUser: "",
        obj: {
          lastVisitId: null,
          keyWords: "",
          content: "",
          vipUserId: null,
          feeRemark: "",
          followStatus: "",
          visitWay: "",
          visitResult: "",
          nextTime: ""
        },
        tableList: [
          {
            visitTime: "",
            keyWords: "",
            content: "",
            feeRemark: "",
            followStatus: "",
            visitWay: "",
            visitResult: "",
            empsResponse: { id: -1, empName: "", empNo: "", empPhone: "" },
            nextTime: ""
          }
        ]
      },

怀疑是对象默认值为空的问题导致的会闪一条数据,遂改如下：

tableList: [],

接下来测试又发现之前的问题又出现了,why?莫非是dialog的懒加载空对象不渲染?还是el-table中绑定的属性和tableList不匹配导致的? 遂改代码如下:

tableList: [{}],

问题解决!有大佬晓得的可以交流交流。