做项目遇到一个需求，根据集团层级展现一组数据，每个层级都可以点开看更详细的拆分数据，第一想法是用el-table的树形数据来展示，大概下面这个样子：

用过这个组件的应该知道这个只能通过点击每一行前面的小箭头实现伸缩，箭头有点小，而且表格一行的数据很长时，对用户的操作不是很友好，所以想能够点击一行的任意位置都可以进行伸缩。

1、官网中的toggleRowExpansion方法如下：

<el-table
    :data="tableData"
    ref="refTable"
    style="width: 100%"
 @row-click="expandChange"
>
</el-table>

expandChange(row,index,e){
      this.$refs.refTable.toggleRowExpansion(row)
 }

但是项目中由于数据量比较大，用了懒加载，即每次点击的时候都会去请求load接口，才能渲染下层数据，这种情况下如果没请求下级，组件的toggleRowExpansion就不好用了。

2、继续搜索，发现有一种修改css的方法，通过拉宽下拉箭头的覆盖区域实现，参见这个https://segmentfault.com/q/1010000038968399

但还是有2个问题，一个是看不到箭头了，二是只能通过点击第一列的文字实现，还是不符合预期。

3、最终通过原生的方法找到箭头的dom元素，触发一次click事件，具体实现方式如下：

<el-table 
    :data="detailData" 
    row-key="id" 
    lazy 
    :load="load" 
    :tree-props="{ children: 'children', hasChildren: 'hasChildren'}" 
    @row-click="(row,column,e)=>clickRowLoad(row,column,e)">
</el-table>


//点击整行load
clickRowLoad(r, c, e){
    console.log(e.currentTarget)
    if(e.currentTarget.firstElementChild.firstElementChild.firstElementChild.tagName=='DIV'){
      e.currentTarget.firstElementChild.firstElementChild.firstElementChild.click()
    } else {
      e.currentTarget.firstElementChild.firstElementChild.firstElementChild.nextElementSibling.click()
    }
  },