element-ui表格如何实现勾选checkbox时高亮显示当前行？

本文共计787个文字，预计阅读时间需要4分钟。

我们在开发后台管理系统时，经常需要操作表格格式。这里我们要实现的一个功能是，选择复选框，高亮显示当前行，并改变当前行样式。这是一个非常常见的应用场景，官网为我们提供了这样的功能。

我们在做后台管理系统的时候经常需要操作表格，这里我们要实现的一个功能就是，勾选复选框，高亮显示当前行，也就是当前行样式改变。这是一个非常常见的使用场景，官网给我们提供了一个带Checkbox的table表格，但是并没有给出上述使用案例，解决办法有很多，我简单总结下我自己的实现过程，希望能帮助到有同样需求的小伙伴。

勾选表格中当前项时会触发selection-change事件，在<el-table>中绑定handleSelectionChange方法。

<el-table @selection-change="handleSelectionChange" >

编写handleSelectionChange方法，实现思路就是根据勾选当前行的下标，改变当前样式。但是element table表格中没有获取勾选后当前行index的方法，这里主要通过两个forEach遍历实现。

在data中定义tableData的时候一定要设置id属性，因为这里我们是通过id的对比来获取当前行的下标。