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>