elment-ui 表格el-table多选时，选中行高亮显示_el-table ctrl多选后行高亮-优快云博客

本文链接：https://blog.youkuaiyun.com/AAAAAdmin/article/details/117330505

本文介绍了如何在使用Element-UI构建的后台系统中，通过监听selection-change事件，结合row-class-name属性，自定义实现表格行被选中时的高亮效果。主要步骤包括：设置handleSelectionChange方法存储选中项ID，定义rowStyle方法判断并应用高亮样式，以及在CSS中定义选中行的背景颜色。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

使用elment-ui框架构建后台系统时，在表格上多选复选框，高亮显示选中行，也就是选中行样式改变时，Element组件库并没有提供上述需求。然后，现在我简单总结下我的实现过程，希望能帮助到有同样需求的小伙伴。
在这里插入图片描述
实现效果图：

实现过程：
①当勾选表格中选择项时会触发selection-change事件，添加handleSelectionChange方法。

<el-table v-loading="loading" :data="infoList"  border max-height="500px"
       :row-style="{height: '15px'}" :cell-style="{padding:'3px'}" 
      @selection-change="handleSelectionChange" :row-class-name="rowStyle" >

②handleSelectionChange方法，data中定义一个空数组ids，用于存放勾选项ID。

// 多选框选中数据
    handleSelectionChange(selection) {
      //获取勾选项ID，ID：后台返回的一条数据中的id值
      this.ids = selection.map(item => item.ID);
    },

③获取到选中项ID之后就需要改变样式，给标签绑定修改当前行样式的方法rowStyle，可以通过指定 Table 组件的 row-class-name 属性来为 Table 中的某一行添加 class，表明该行处于某种状态。

<el-table  :row-class-name="rowStyle" >

④rowStyle方法，目的是通过循环遍历选中项ID，与当前行ID做对比，如果相同则返回rowStyle，改变当前行的样式。

rowStyle({row}){
      var arr = this.ids;
      for(let i = 0; i < arr.length; i++){
        if(row.ID === arr[i]){
          return 'rowStyle'
        }
      } 
    },

⑤最后，在style中定义选中行的样式

.rowStyle{
    background-color:#ECF5FF!important;
  }