element table type=“expand“ 设置成按钮展开

最近在工作中遇到一个需求，有关element-ui table表格每一行展开并调用后端接口显示表格数据，看了一下官网api，关于展开是静态的，也就是说要把展开的数据拼在接口返回的data中，但是我们是要动态获取数据。。。对于这方面的需求开始研究了一下，看到有个大佬有关这方面的需求的博客，但是在实际开发中又遇到了一个很棘手的bug，于是。。。我解决了这个问题。。。废话不多说请看代码。。。

下面是需求相关：

接下来就是代码实现：

<template>
 <div>
 <el-table
  ref="multipleTable"
  :data="newDataList"
  tooltip-effect="dark"
  @selection-change="handleSelectionChange"
  style="width: 100%"
  empty-text="暂无数据"
  :header-cell-style="{ background: '#FAFAFA', color: '#333333' }"
   class="tableStyle"
   v-loading="tbLoading" 
   @expand-change="expandChange"//这个是展开触发的api
   :row-key='getRowKeys'//要绑定的key，防止展开的数据重复
   :expand-row-keys="expands"//用来储存当前已点击过的id值的数组>
        <el-table-column type="expand" label="查看货品" width="80">
          <!--查看货品表格--下面的表格就是封装的表格组件 -->
          <template>
            <table-tem
              :tblData="tblData"
              :column="column"
              :isSelect="false"
            ></table-tem>
          </template>
        </el-table-column>
        <el-table-column header-align="center" align="center" prop="goodsImg" label="图片" min-width="80">
          <template slot-scope="scope">
            <img :src="scope.row.goodsImg" width="50px" height="50px" />
          </template>
        </el-table-column>
        <el-table-column header-align="center" align="center" prop="stockNum" label="库存" min-width="90"></el-table-column>
      </el-table>
  </div>
</template>
<script>
  export default{
    data(){
      return{
       expands:[],//展开table相关
       getRowKeys (row,index) { //设置row-key只展示一行
          return row.goodsId
       },
     }
   },
    methods:{
      // 展开触发api
      expandChange(row, expandedRows){
       this.listQuery.goodsId=row.goodsId
       //加载前先将上次的数据模型清空，
       // 不然会出现点击展开嵌套表格后，先显示上一次的数据，然后渲染这次的数据。
       this.tblData = [];
       //只展开一行
       if (expandedRows.length) {//说明展开了
          this.expands = [];
          if (row) {
            this.expands.push(row.goodsId);//只展开当前行id
          }
          // 获取展开行的表格数据
        this.GetExpendRowData()
      } else {//说明收起了
          this.expands = [];
      }
    },
    // 获取展开行的表格数据
    GetExpendRowData(){
      //掉接口
        getExpendRowList().then(res=>{
            //由于上面把this.tblData清空了，所以下面直接进行数组赋值会出现一个问题
            //问题是数据已经打印出来了，但是试图没有更新
            //接口请求后的数据不可直接赋值，例如：this.tblData=res.data,这样是错位的
               
        })
    }
 }
</script>