el-table 树形数据 懒加载模式下一键展开

用elementui table 组件做了一个树形结构的表格，用的懒加载，想在表格头部做个按钮，点击一键展开收起。

首先尝试了expand-row-keys 属性，发现设置了只是将左边的箭头展开，但是根本没有加载数据。

接着看到toggleRowExpansion方法，直接调用也是相同的效果。

深入看了一下组件源码，这个组件就是有这个问题，当是lazy模式下直接切换箭头，没有加载数据，也并没有打算修复。

于是把相应的代码扒拉下来改了一下。

1.  
   <el-table-column align="left" prop="name" show-overflow-tooltip>
2.  
      <template slot="header" slot-scope="scope">
3.  
           <span>xxx</span>
4.  
   <el-button type="text" size='mini' :icon="expanded?'el-icon-arrow-up':'el-icon-arrow-down'" @click='expandRows'>{{expanded?'收起':'展开'}}</el-button>
5.  
       </template>
6.  
   <template slot-scope="scope">
7.  
    </template>
8.  
   </el-table-column>

1.  
   expandRows(){
2.  
   this.expanded = !this.expanded
3.  
   const { table: { toggleRowExpansion, store }} = this.$refs;
4.  
   const { states: { lazy, treeData, rowKey }, assertRowKey, loadData } = store
5.  
   this.list.map(row=>{
6.  
   const id = this.getRowIdentity(row, rowKey)
7.  
   const data = treeData[id]
8.  
    
9.  
   if (this.expanded) {
10.  
     
11.  
    if (lazy && data && 'loaded' in data && !data.loaded) {
12.  
    return loadData(row, id, data)
13.  
    }
14.  
    }
15.  
    return toggleRowExpansion(row, this.expanded)
16.  
    });
17.  
    },
18.  
     
19.  
    getRowIdentity (row, rowKey) {
20.  
    if (!row) throw new Error('row is required when get row identity');
21.  
    if (typeof rowKey === 'string') {
22.  
    if (rowKey.indexOf('.') < 0) {
23.  
    return row[rowKey];
24.  
    }
25.  
    let key = rowKey.split('.');
26.  
    let current = row;
27.  
    for (let i = 0; i < key.length; i ) {
28.  
    current = current[key[i]];
29.  
    }
30.  
    return current;
31.  
    } else if (typeof rowKey === 'function') {
32.  
    return rowKey.call(null, row);
33.  
    }
34.  
    },

this.expanded 是一个展开收起的flag，用来展示按钮的文字与箭头

this.list 是当前table 的父级数据列表

当点击按钮时调expandRows