element table树形数据点击某一个单元格展开数据

首先学习element官网中table组件,学习树形数据是如何绘制的,了解table中的各个属性及使用方法,链接为https://element.eleme.io/#/zh-CN/component/table

 

官网中表格通过点击红框中箭头来决定数据是否展开,由于红框太小,不易于操作,为此,以下将介绍如何通过点击日期属性列中的数据来决定子节点数据是否展开。

在table标签中添加 <table @cell-click="getOpenDetail"></table> 

方法内容如下:

getOpenDetail(row,column,cell,event) {
        if(column.label==='日期') {
          if(event.currentTarget.querySelector(".el-table__expand-icon")) {
            event.currentTarget.querySelector(".el-table__expand-icon").click()
          }
        }
 },

添加以上内容之后,就可以通过点击如下所示情况进行数据展开了

 

 如有问题,欢迎批评指正。

 

posted on 2022-03-10 17:14  青小记  阅读(2045)  评论(0编辑  收藏  举报