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

时间：2020-07-23 15:53:44 阅读：149 评论：0 收藏：0 [点我收藏+]

标签：put 展开 display handle tran none code 导致技术

原因：通过打印，发现，直接使用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);

　　}