如何用element的expand展开行，只在展开的时候调展开区域数据的接口

需求：很简单，返回表格数据的时候没有展开行区域的数据，只在展开的时候再单独调接口，这样后台处理数据更快一点。
但是真正写起来坑还不少。

坑一：

本来是在data（）里新注册了一个对象存接口调来的数据，结果如果同时打开几行，那后调的数据就会覆盖前者的数据，会导致所有行的展开行数据都一样。（因为本质上它们绑的是同一个对象）

解决方法：把数据分别绑定给每一行，并且由于之前没有detail对象，需要用$set方法给row添加新属性

  handleExpand(row) {
        getDetail(row.id).then(res => {
          this.$set(row, "detail", res.data.data);
        });
    },

坑二：

由于调接口是异步的，导致第一次展开的时候还没有相应的数据字段属性，会报undefined错，并且不会展开，但是点第二次之后就没有问题了。

解决尝试一：在外面加层v-if判断，不会报错了，但是由于调完接口数据有变化（不确定是不是因为这个，现师父是这么认为，我有点怀疑），它会先打开一下然后立马又关上，还是得点两次。

  <el-table-column type="expand" width="1">
          <template slot-scope="scope">
            <div class="expandDIc" style="border-bottom: 1px solid #dddddd" v-if="scope.row.detail">
              <span class="expandSpanHead">供稿：</span>
              <span
                class="expandSpan"
              >审核通过数 {{scope.row.detail.feedsPictureAuditz?scope.row.detail.feedsPictureAuditz:0|formatnumber}}</span>
              <span class="expandSpan">审核不通过数：{{scope.row.detail.feedsPictureUnAudit|formatnumber}}</span>
              <span class="expandSpan">已上架数：{{scope.row.detail.upNum|formatnumber}}</span>
              <span class="expandSpan">未上架数：{{scope.row.detail.downNum|formatnumber}}</span>
              <span class="expandSpan">自运营数：{{scope.row.detail.operationNum|formatnumber}}</span>
              <span class="expandSpan">委托运营数：{{scope.row.detail.entrustedOperationNum|formatnumber}}</span>
              <span class="expandSpan">标准销售量：{{scope.row.detail.standardNum|formatnumber}}</span>
              <span class="expandSpan">扩展销售量：{{scope.row.detail.extendNum|formatnumber}}</span>
              <span class="expandSpan">标准销售额：{{scope.row.detail.standardPrice|formatmoney}}</span>
              <span class="expandSpan">扩展销售量额：{{scope.row.detail.extendPrice|formatmoney}}</span>
            </div>
            <div class="expandDIc" v-if="scope.row.detail">
              <span class="expandSpanHead">保护：</span>
              <span class="expandSpan">审核通过数 {{scope.row.detail.protectAudit|formatnumber}}</span>
              <span class="expandSpan">审核不通过数 {{scope.row.detail.protectUnAudit|formatnumber}}</span>
              <span class="expandSpan">公开数 {{scope.row.detail.openNum|formatnumber}}</span>
              <span class="expandSpan">私密数 {{scope.row.detail.privateNum|formatnumber}}</span>
            </div>
          </template>
        </el-table-column>

解决：toggleRowExpansion回调

无意间看到toggleRowExpansion的用法，灵机一动，可以用这个自己控制expand的展开，那我不就可以提前调接口再展开了吗。这样需要取到每一行的展开状态。正好ui给的展开icon不是element自带的，那干脆自己写一列按钮来控制好了。

 <el-table
        :data="data"
        :row-key="getRowKeys"
        class="eltable"
        :expand-row-keys="expandArr"
        ref="table"
        v-loading="loading"
        element-loading-text="拼命加载中"
        element-loading-spinner="el-icon-loading"
      >
    //自己写的按钮列
        <el-table-column label align="right" width="50">
          <template slot-scope="scope">
          //展开的图标
            <i
              v-if="!scope.row.expand"
              class="iconfont icon-gonggongtubiao_kuozhan"
              @click="handleExpand(scope.row)"
            ></i>
            //关闭的图标
            <i v-else class="iconfont icon-gonggongtubiao_suoxiao" @click="handleExpand(scope.row)"></i>
          </template>
        </el-table-column>
        
//展开的插槽
        <el-table-column type="expand" width="1">
          <template slot-scope="scope">
            <div class="expandDIc" style="border-bottom: 1px solid #dddddd">
            展开区域展开区域展开区域
            </div>
          </template>
        </el-table-column>
   </el-table>

onload(){
	this.expandArr = [];//加载时关掉所有展开行
      getList(params).then(res => {
        this.total = res.data.data.total;
        this.data = res.data.data.records;
        this.data.forEach(el => (el.expand = 0));
        //获得表格数据的时候直接每行加个expand属性来监控行的展开与否       this.loading = false;
      });
    },
    handleExpand(row) {
      if (row.expand == 0) {
        row.expand = 1;
        getDetail(row.id).then(res => {
          this.$set(row, "detail", res.data.data);
          this.$refs.table.toggleRowExpansion(row, true);
        });
      } else {
        row.expand = 0;
        this.$refs.table.toggleRowExpansion(row, false);
      }
    },

    getRowKeys(row) {
      return row.id;
    },

//把element原生样式隐藏掉
.el-table__expand-icon{
    display: none;
}

完美解决