el-table 展开行 @expand-change 异步获取数据在子表格中展示

问题场景：表格中，点击展开行图标，请求后端接口，数据返回后，页面不刷新，不显示数据。
问题分析： 主要是数据获取后，页面的vue视图没有实时更新；
解决思路： 当获取到数据后，使用代码触发vue视图的更新。给数组push会触发视图更新，利用这一点可以解决该问题。具体实现如下：

 <el-table 
        ref="refTable" 
        :data="tableData" 
        min-height="340"
        style="width: 100%" 
        v-loading="listLoading"
        row-class-name="rowClassName"
        @row-click="rowClick" 
        @expand-change="expandChange">

        <!-- 子表格 -->
        <el-table-column type="expand" fixed="left" label=" "> 
          <template  slot-scope="scope"> <!--注意这句必须有-->
            <el-table :data="childTableData" v-loading="childListLoading" style="width: 46%">
              <el-table-column align="center" width="80" label="序号" type="index"></el-table-column>
              <el-table-column v-for="column in childTableColumns" :key="column.label" v-bind="column" > </el-table-column>
            </el-table>
          </template>
        </el-table-column>
</el-table> 

expandChange(row, expandedRows) {
  //当行展示时调用接口
  if(expandedRows.length) {
    this.childListLoading = true;
    let query = {parkOrderId: row.parkOrderId}
    payRecord(query).then(res => {
      if (res.data.code === '1') {
        this.childTableData = res.data.content;
        this.childTableData.push({}); //触发vue更新视图
        this.childTableData.pop(); //把最后添加的空对象删除掉
        this.childListLoading = false;
      } else {
        this.childTableData = [];
        this.childListLoading = false;
      }
    })
  }
},

注意： 子表格中一定要加 <template slot-scope="scope"> 不然不起作用。