element 表格多选时，修改选中行的背景色

1、设置一个变量记录选中行的数据

data () {
    // 这里存放数据
    return {
      selectID: []
    }
  },

2、element表格选中时，回调函数，保存选中的数据

/*  获取当前选中的数据 */
    handleSelect (row) {
      this.selectID = []
      if (row.length > 0) {
        row.forEach((value, index) => {
          this.selectID.push(value.id)
        })
      }
    },

3、行的 className 的回调方法中，设置选中行样式

// 选中背景色
    tableRowClassName({ row, rowIndex }) {
      let color = ''
      for(let item of this.selectID.values()){
        if(item === row.id)color = 'table-SelectedRow-bgcolor'
      }
      console.log(color)
      return color
    },

4、设置背景色样式

.table-SelectedRow-bgcolor {
      td{
        background-color: #fa645f !important;
      }
    }

5、element表格代码

<el-table
      :data="pagination.list"
      style="width: 100%"
      height="99%"
      select-all
      stripe
      @select="handleSelect"
      @select-all="handleALL"
      :row-class-name="tableRowClassName"
    >
。。。。。

6、完整代码

<!--
  文件描述：element表格，多选时点击选中，改变背景色
  创建时间：2020/4/10 10:37
  创建人：Administrator
-->
<template>
  <div class="Example2-page" style="padding: 35px;">
    <el-table
      :data="pagination.list"
      style="width: 100%"
      height="99%"
      select-all
      stripe
      @select="handleSelect"
      @select-all="handleALL"
      :row-class-name="tableRowClassName"
    >
      <el-table-column type="selection" width="55" sortable/>
      <el-table-column prop="sortIndex" align="center" label="序号" width="60">
        <template slot-scope="scope">
          <span>{{ (pagination.page - 1) * pagination.size + scope.$index + 1 }}</span>
        </template>
      </el-table-column>
      <el-table-column label="商品名称" prop="title" align="center" />
      <el-table-column
        label="商品分类"
        prop="categoryId"
        align="center"
      />
      <el-table-column label="价格" prop="listprice" align="center" />
      <el-table-column label="商品状态" prop="shelfState" align="center" />
      <el-table-column label="审核状态" prop="auditState" align="center" />
      <el-table-column label="是否推荐" align="center">
        <template slot-scope="scope">
          <el-switch
            disabled
            v-model="scope.row.recommend">
          </el-switch>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" fixed="right" width="240">
        <template slot-scope="scope">
          <span
            class="el-button-text-color"
            @click="$emit('option-changed','check',{row:scope.row})"
          >审核记录</span>
          <span
            class="el-button-text-color"
            @click="$emit('option-changed','edit',{wareType:wareType,row:scope.row})"
          >编辑</span>
          <span class="el-text-danger" @click="delHandler(scope.$index, scope.row)">删除</span>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
// 例如：import 《组件名称》 from '《组件路径》';
// 例如：import uploadFile from '@/components/uploadFile/uploadFile'


export default {
  name: 'Example2',
  // import引入的组件需要注入到对象中才能使用
  components: {},
  data () {
    // 这里存放数据
    return {
      pagination: {
        'total': 100,
        'size': 10,
        'page': 1,
        'list': []
      },
      selectID: []
    }
  },
  // 监听属性 类似于data概念
  computed: {},
  // 方法集合
  methods: {
// 选中背景色
    tableRowClassName({ row, rowIndex }) {
      let color = ''
      for(let item of this.selectID.values()){
        if(item === row.id)color = 'table-SelectedRow-bgcolor'
      }
      console.log(color)
      return color
    },
    /* 全选 */
    handleALL (val) {
      this.handleSelect(val)
    },
    /*  获取当前选中的数据 */
    handleSelect (row) {
      this.selectID = []
      if (row.length > 0) {
        row.forEach((value, index) => {
          this.selectID.push(value.id)
        })
      }
    },
    exampleGetList () {
      let _this = this

      for (let i = 0; i < 10; i++) {
        let j = {
          'id': i,
          'sortIndex': i,
          'title': '商品名称' + i,
          'categoryId': '1',
          'listprice': (12 + i * Math.random()).toFixed(2),
          'shelfState': '上架',
          'auditState': '审核通过',
          'recommend': (Math.random() > 0.5)
        }
        _this.pagination.list.push(j)
      }
    }
  },
  // 监控data中的数据变化
  watch: {},
  // 生命周期 - 创建完成（可以访问当前this实例）
  created () {

  },
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted () {
    this.exampleGetList()
  },
  beforeCreate () {
  }, // 生命周期 - 创建之前
  beforeMount () {
  }, // 生命周期 - 挂载之前
  beforeUpdate () {
  }, // 生命周期 - 更新之前
  updated () {
  }, // 生命周期 - 更新之后
  beforeDestroy () {
  }, // 生命周期 - 销毁之前
  destroyed () {
    this.websock.close() //离开路由之后断开websocket连接
  }, // 生命周期 - 销毁完成
  activated () {
  } // 如果页面有keep-alive缓存功能，这个函数会触发
}
</script>

<style  lang="scss">
  //@import url(); 引入公共css类

  .Example2-page{
    .table-SelectedRow-bgcolor {
      td{
        background-color: #fa645f !important;
      }
    }
    .el-button-text-color{
      color: #409EFF;
      cursor: pointer;
      margin: 0 10px;
    }
    .el-text-danger{
      color: #f56c6c;
      cursor: pointer;
      margin: 0 10px;
    }
  }

</style>