el-table懒加载树形数据，实现整行点击的展开

最新推荐文章于 2025-02-28 11:01:55 发布

sanlingwu

最新推荐文章于 2025-02-28 11:01:55 发布

阅读量3k

点赞数 4

分类专栏： Vue elementui 文章标签： elementui

本文链接：https://blog.youkuaiyun.com/sanlingwu/article/details/119732863

版权

Vue 同时被 2 个专栏收录

11 篇文章

订阅专栏

elementui

1 篇文章

订阅专栏

本文探讨如何在项目中使用el-table处理大量数据的树状结构需求，解决箭头操作不便和懒加载挑战，通过自定义点击事件和DOM操作实现行级数据的动态加载和展开。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

做项目遇到一个需求，根据集团层级展现一组数据，每个层级都可以点开看更详细的拆分数据，第一想法是用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()
    }
  },