vue_elementui 表格渲染小bug

vue报错Error in render: "TypeError: Cannot read property ‘name’ of undefined"

当在vue中遇到这种错时，就意味着你使用了三层对象 a.b.c （或a[b].c）
例如： {{ obj[scope.row.appId].appName }}

<my-table
          :data="list"
          :pagination.sync="pagination"
          :selection.sync="selection"
          select-mode="single"
          :columns="confColm"
          @select-changed="select"
          @pagination-changed="reload({})"
        >
          <template slot="appId" slot-scope="scope">
            <div>{{ obj[scope.row.appId].appName }} </div>
          </template>
          <template slot="appRoleId" slot-scope="scope">
            <div>{{ obj[scope.row.appId].sysRoles[scope.row.appRoleId] }}</div>  
          </template>
           <template slot="attachedAppId" slot-scope="scope">
            <div>{{ obj[scope.row.attachedAppId].appName }}</div>
          </template>

mytable是封装的table组件，在插槽中使用了三层对象。
由于接口是异步请求的，我们获取接口中的数据并赋值给obj之前，页面已经在渲染，此时的obj在data
中肯定是赋值为空的，所有页面渲染的时候obj[scope.row.appId] 不会报错而是undefied，而三层对象
obj[scope.row.appId].appName 就会报错。

// 页面开始渲染并去读取三层对象obj[scope.row.appId].appName的时候，obj是还没被赋值，是空的
  data() {
    return {
      obj: {},
      }

   // 页面渲染结束了，才成功赋值给obj 
  getObj() {
      getSysRoles().then(res => {
        let arr = res.data;
        arr.forEach(el => {
          this.obj[el.appId] = { appName: el.appName, sysRoles: el.sysRoles };
        });
        console.log(this.obj, 222);
      });
    },

解决办法：

1：把获取obj的方法放在渲染组件前，例如my-table这个组件是我点击查询的时候才去调用渲染并读取三层对象
obj[scope.row.appId].appName，于是获取obj的方法就放在created的时候去执行，让obj在读取三层对象的时候
不为空。（推荐）


2.加v-if判断,有的时候才去渲染，但不太完美，虽然不报错但有时候会渲染不出来。
 <template slot="appId" slot-scope="scope" v-if='obj[scope.row.appId]'>
      <div>{{ obj[scope.row.appId].appName }}</div>
 </template>