解決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;
 }

}

 完美方式 ：