如何通过element-ui表格勾选checkbox实现高亮当前行功能？

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

在开发后台管理系统时，我们常常需要操作表格格式的数据。为了实现这一功能，我们开发了一个选框功能，它不仅可以高亮显示当前行，还能改变当前行的样式。这种应用场景非常常见，官方网站也提供了类似功能。

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

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

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

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

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