element ui table展开加载明细table无数据

           <el-table  :data="orderMainData"
                       @expand-change = "DataExpand"
                      >
                     <el-table-column type="expand" prop="children">
                        <template slot-scope="scope">
                             <el-table :data="scope.row.children" >
                                  <el-table-column type="index" label="序号" width="60" align="center"></el-table-column>
  <el-table-column prop="rfqCode" label="产品名" width="95"  align="left"
                                 show-overflow-tooltip>
                </el-table-column>
                <el-table-column prop="validDate" label="单价" width="95"  align="left" :formatter="dateFormatter"
                                 show-overflow-tooltip></el-table-column>
               <el-table-column prop="validDate" label="数量" width="95"  align="left" :formatter="dateFormatter"
                                 show-overflow-tooltip></el-table-column>
                              </el-table>
                        </template>
                        </el-table-column>
                <el-table-column type="index" label="序号" width="60" align="center"></el-table-column>
                            <el-table-column prop="code" label="订单编号" width="150"  align="left"
                                   show-overflow-tooltip></el-table-column>
                                   <el-table-column prop="customerName" label="客户名" width="160"  align="left"
                                   ></el-table-column>
            </el-table>

此处想要对订单行进行展开，然后重后端获取订单明细显示。在expand="expand"的列，定义了一个字段“children” ---此时返回的orderMainData是没有这个字段的(注意，这样是会产生BUG的)。

        DataExpand(row, expandedRows){
            console.log('expand')
            let _this = this
            let findObj = _this.$lodash.find(expandedRows,
            function(o) { 
                return o.code=== row.code; 
            })
            if(!findObj){}
            else{
                _this.$http('/getOrderDetail', parmas).then(data => {
                    row.children = data
                }).catch(err => {
                    _this.$message.error(err.msg);
                })
            }
        }

到这里，代码就完成了，每行展开，获得到订单的明细table 。
然而此时有个bug 。那就是有时候点击展开，后台是返回了数据，可是"明细table"里面却没数据。此时点击第二行时，刚才点击的第一行却又有数据显示出来了。
出现这种bug的原因是“orderMainData没有children字段”，第一次点击时，后端数据没返回来之前(没执行row.children = data)前，DOM渲染就已经完成了(没有row.children)，后来服务端返回了data，此时也不会自动渲染了。
所以只要在一开始就在orderMainData加上children字段，那么在DOM渲染完成了(有row.children，只是它对应着row.children=[])，然后后来执行row.children = data，vue也可以自动渲染到table。