解决element-ui table expend扩展里边需要请求表格数据第一次不渲染的问题

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

解决方式:给el-table加上几个事件  

<el-table :data="bussinessLists"  class="m-r-t-10"  @row-click="clickRowHandle" :row-key="getRowKeys" :expand-row-keys="expands" @expand-change="bussinessExpandFn">
     <el-table-column type="expand" > </el-table-column>
</el-table>
@row-click 行点击的时候,这个事件可加可不加,根据自己的需要来定 ,执行的函数和
:row-key:获取点击行的id
:expand-row-keys:展开的行的key值得集合
@expand-change 展开或者关闭的事件

关键:不使用 @expand-change 事件获取到id集合,我们自己手动插入或者删除,当请求完数据的时候,我们再讲展开的id插入到expends中,我是写在了请求的后面,其实可以写在请求函数中
bussinessExpandFn(row,expandedRows){
    if (this.expands.includes(row.id)) {
          this.expands = this.expands.filter(val => val !== row.id);
    } else {
          this.currExpendbussId = row.id;
          this.pageApp.busi_id = row.id;
          this.getAppListFn(row.id);
          this.expands.push(row.id);
     }; 
},
clickRowHandle(row, column, event){
  if (this.expands.includes(row.id)) {
    this.expands = this.expands.filter(val => val !== row.id);
  } else {
    this.currExpendbussId = row.id;
    this.pageApp.busi_id = row.id;
    this.getAppListFn(row.id);
    this.expands.push(row.id);
  }
},
 
原文地址:https://www.cnblogs.com/fyjz/p/13365396.html