elment-ui 表格el-table多选时，选中行高亮显示

使用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;
  }