选中元素-用户界面表中的复选框以突出显示当前行

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

选择表格中的当前项目将触发选择更改事件，并绑定el-table中的handleSelectionChange方法。

El-table @ selection-change=' handleSelectionChange '编写handleSelectionChange方法。实现思路是根据当前行勾选的下标改变当前样式。但是在元素表表中检入后没有办法得到当前行的索引，主要是通过两次forEach遍历来实现。

在数据中定义Tabledata时，必须设置id属性，因为这里我们通过比较id得到当前行的下标。

table data :【{ ID :0，日期：' 2016-05-03 '，姓名3360 '王小虎'，地址： '上海市普陀区金沙江路1518弄'】以下方法打印的I为您要获取的勾选线的索引值。我们在数据中定义了一个空数组，专门用来存储选中的项目。

handleSelectionChange(val){ var arr=[]；瓦尔。foreach ((val，index)={this。tabledata。foreach ((v，I)={//id是数据id if (val。id==v . id){//控制台。日志(一)；arr . push(I)} })})this . multipleselection=arr；}获取下标后，需要改变样式，将el-table标签与rowStyle绑定，修改当前行样式

El-table @ selection-change=' handleselectionchange ' : row-class-name=' rowStyle '编写rowStyle方法，思路是循环方便multipleSelection数组，取出存储的下标与当前行下标进行比较，如果相同，返回row style，改变当前行的样式。

这里有一个问题需要注意：

forEach中的返回无效！我们希望当达到某个条件时，不可能跳出循环，终止代码，使用forEach遍历。

原因：在所有元素都传递给被调用的函数之前，forEach()无法终止遍历！

这个。多重选择。forEach((v)={ if(row index===v){ return ' row style ' })解决方法：将forEach替换为for

rowStyle({row，row index }){ let arr=this . multipleselection；for(设I=0；一、长度；I){ if(row index===arr[I]){ return ' row style ' } }定义样式中选定行的样式

/style。row style { background-color : red！重要；}/style另外，如果要更改鼠标移动的悬停样式，要注意需要在td上修改，因为事件是添加到td上的，在tr上的修改是无效的。El-table { width : 1163 px；margin: 0 auto。El-table _ _ body { tr : hover TD { background-color : rgba(238，250，249，1)！重要；}}}以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。