解决element-ui table expend扩展里边需要请求表格数据第一次不渲染的问题（之前的不好用，已更新新方法）

原因：通过打印，发现，直接使用expend的  @expand-change 事件的时候，展开之后，才会进行表格数据的请求，这是导致数据不能够进行正常渲染的原因

 

 

<el-table :data="bussinessLists"  class="m-r-t-10"  
   :expand-row-keys="expands" @expand-change="expandChangeFn">
     <el-table-column type="expand" > 
　　　　　　<template slot-scope="{row}">
　　　　　　　　 {{detailInfo[row.id]}}

　　　　　　</template>
　　　　</el-table-column>
</el-table>

:expand-row-keys：展开的行的key值得集合

@expand-change 展开或者关闭的事件

关键：手动的添加展开的列的id集合，使用$set对数据进行强制刷新,在更新列表的时候，对detailInfo进行清空，

data(){
　　return {
　　　　expands:[], //展开行的key的集合
　　　　detailInfo:{}

    }
},

methods:{

　　expandChangeFn(row,expandedRows){
    　　if (this.expands.includes(row.id)) {
　　　　　　//已经展开的话，就关闭，移除在expands中的key
          this.expands = this.expands.filter(val => val !== row.id);
    　　} else {
          this.getDetailFn(row.id).then(()=>{
　　　　　　　　this.$set(this.detailInfo,id,this.detailInfo[id]);
　　　　　　   this.expands.push(row.id); 　
　　　　　　}); 　

　　　　}; 　　
　　}，
//异步请求接口
  async getDetailFn(id){

　　　　let res = await xxxxx（{id：id}）；
       this.detailInfo[id] = res.data;
  }

}

 完美方式 ：