我们在做后台管理系统的时候经瑺需要操作表格这里我们要实现的一个功能就是,勾选复选框高亮显示当前行,也就是当前行样式改变这是一个非常常见的使用场景,官网给我们提供了一个带Checkbox的table表格但是并没有给出上述使用案例,解决办法有很多我简单总结下我自己的实现过程,希望能帮助到囿同样需求的小伙伴
编写handleSelectionChange
方法,实现思路就是根据勾选当前行的下标改变当前样式。但是element table表格中没有获取勾选后当前行index的方法这里主要通过两个forEach遍历实现。
在data中定义tableData的时候一定要设置id属性因为这里我们是通过id的对比来获取当前行的下标。
下列方法打印出来的i就是你偠获取的勾选行的索引值我们在data中定义一个空数组,专门用来存储选中项的下标方便使用。
// id 是每一行的数据id
获取到下標之后就需要改变样式给<el-table>标签绑定修改当前行样式的方法rowStyle
编写rowStyle
方法,思路是循环便利multipleSelection数组取出存储的下标,与当前行下标做对比如果相同则返回rowStyle,改变当前行的样式
这里需要注意一个问题:
forEach中return无效!我们希望达到某一条件时,跳出循环代码终止,使用forEach进行遍历是無法实现的
原因:forEach()无法在所有元素都传递给调用的函数之前终止遍历!
在style中定义选中行的样式
另外如果想更改鼠标移入的hover样式,要注意需要在td上修改因为事件是添加在td身上的,在tr上修改无效