element 表格点击行展开，实现点击一行任意处包括箭头

vue项目中我们会使用到el-table展开行功能，通过设置 type="expand" 和 Scoped slot 可以开启展开行功能。具体这里不细说。

那么如何通过点击一行来实现展开功能呢？很简单的两步。

我们需要用到的是element官方提供的点击事件 row-click 以及实现展开折叠的方法 toggleRowExpansion

上代码：

在table中添加行点击事件 row-click ，

<el-table ref="multipleTable" :data="tableData" stripe @row-click="rowClick" >

方法为

// 通过点击行展开

rowClick(row, column, event) {

this.$refs.multipleTable.toggleRowExpansion(row)

}

如此,就可以点击一行展开了。但是，细心的同学会发现，使用row-Click事件实现点击会冲掉expand自身带的点击箭头展开功能，此时点击箭头是无效的，并不会展开。那要怎么办呢？不急，同样两步解决！

1.将row-click事件更改为cell-click事件

@cell-click="cellClick"

2.实现方法

// 通过点击每列实现点击行展开

cellClick(row, column, event) {

if(event.cellIndex != 0){

this.$refs.multipleTable.toggleRowExpansion(row)

}

}

聪明的同学会发现我这里采用了取巧的方法，通过获取点击列的下标来判断是否使用toggleRowExpansion，很明显下标为0的列就是箭头列，这一列我们不做处理，那么他就会使用element自己封装的点击展开方法！同时我们通过列点击实现行点击。

当然，此为取巧方法，如果有更好的方法，欢迎下方评论！