1. Tạo biến để lưu trữ dữ liệu các hàng được chọn

data () {
    // Dữ liệu sẽ được lưu ở đây
    return {
      danhSachDuocChon: []
    }
  },

2. Xử lý sự kiện khi chọn trong bảng Element, lưu dữ liệu đã chọn

/* Lấy dữ liệu các hàng đang được chọn */
    xuLyChonHang (hang) {
      this.danhSachDuocChon = []
      if (hang.length > 0) {
        hang.forEach((giaTri, chiSo) => {
          this.danhSachDuocChon.push(giaTri.id)
        })
      }
    },

3. Trong phương thức className của hàng, thiết lập kiểu cho hàng được chọn

// Màu nền khi chọn
    tenLopHang({ hang, chiSoHang }) {
      let mauSac = ''
      for(let phanTu of this.danhSachDuocChon.values()){
        if(phanTu === hang.id)mauSac = 'mauNenHangDuocChon'
      }
      console.log(mauSac)
      return mauSac
    },

4. Thiết lập kiểu màu nền

.mauNenHangDuocChon {
      td{
        background-color: #fa645f !important;
      }
    }

5. Mã bảng Element

<el-table
      :data="phanTrang.danhSach"
      style="width: 100%"
      height="99%"
      select-all
      stripe
      @select="xuLyChonHang"
      @select-all="xuLyChonTatCa"
      :row-class-name="tenLopHang"
    >
。。。。。

6. Mã hoàn chỉnh

<!--
  Mô tả tệp: Bảng Element, khi chọn nhiều hàng, thay đổi màu nền khi nhấp để chọn
  Thời gian tạo: 2020/4/10 10:37
  Người tạo: Administrator
-->
<template>
  <div class="trangVidu2" style="padding: 35px;">
    <el-table
      :data="phanTrang.danhSach"
      style="width: 100%"
      height="99%"
      select-all
      stripe
      @select="xuLyChonHang"
      @select-all="xuLyChonTatCa"
      :row-class-name="tenLopHang"
    >
      <el-table-column type="selection" width="55" sortable/>
      <el-table-column prop="chiSoSapXep" align="center" label="STT" width="60">
        <template slot-scope="scope">
          <span>{{ (phanTrang.trang - 1) * phanTrang.kichThuoc + scope.$index + 1 }}</span>
        </template>
      </el-table-column>
      <el-table-column label="Tên sản phẩm" prop="tieuDe" align="center" />
      <el-table-column
        label="Danh mục sản phẩm"
        prop="maDanhMuc"
        align="center"
      />
      <el-table-column label="Giá" prop="giaBan" align="center" />
      <el-table-column label="Trạng thái sản phẩm" prop="trangThaiKeo" align="center" />
      <el-table-column label="Trạng thái duyệt" prop="trangThaiDuyet" align="center" />
      <el-table-column label="Có nên giới thiệu" align="center">
        <template slot-scope="scope">
          <el-switch
            disabled
            v-model="scope.row.gioiThieu">
          </el-switch>
        </template>
      </el-table-column>
      <el-table-column label="Hành động" align="center" fixed="right" width="240">
        <template slot-scope="scope">
          <span
            class="mauTextNut"
            @click="$emit('su-kien-thay-doi','kiem-tra',{hang:scope.row})"
          >Lịch sử duyệt</span>
          <span
            class="mauTextNut"
            @click="$emit('su-kien-thay-doi','chinh-sua',{loaiHang:loaiHang,hang:scope.row})"
          >Chỉnh sửa</span>
          <span class="mauTextNguyHiem" @click="xoaXuLy(scope.$index, scope.row)">Xóa</span>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
// Ở đây có thể nhập các tệp khác (ví dụ: thành phần, công cụ js, plugin js bên thứ ba, tệp json, hình ảnh, v.v.)
// Ví dụ: import 《Tên thành phần》 from '《Đường dẫn thành phần》';
// Ví dụ: import taiLenTep from '@/components/taiLenTep/taiLenTep'


export default {
  name: 'Vidu2',
  // Thành phần được nhập cần được tiêm vào đối tượng để sử dụng
  components: {},
  data () {
    // Dữ liệu sẽ được lưu ở đây
    return {
      phanTrang: {
        'tongSo': 100,
        'kichThuoc': 10,
        'trang': 1,
        'danhSach': []
      },
      danhSachDuocChon: []
    }
  },
  // Thuộc tính tính toán, tương tự như khái niệm data
  computed: {},
  // Tập hợp các phương thức
  methods: {
// Màu nền khi chọn
    tenLopHang({ hang, chiSoHang }) {
      let mauSac = ''
      for(let phanTu of this.danhSachDuocChon.values()){
        if(phanTu === hang.id)mauSac = 'mauNenHangDuocChon'
      }
      console.log(mauSac)
      return mauSac
    },
    /* Chọn tất cả */
    xuLyChonTatCa (val) {
      this.xuLyChonHang(val)
    },
    /* Lấy dữ liệu các hàng đang được chọn */
    xuLyChonHang (hang) {
      this.danhSachDuocChon = []
      if (hang.length > 0) {
        hang.forEach((giaTri, chiSo) => {
          this.danhSachDuocChon.push(giaTri.id)
        })
      }
    },
    viDuLayDanhSach () {
      let _this = this

      for (let i = 0; i < 10; i++) {
        let j = {
          'id': i,
          'chiSoSapXep': i,
          'tieuDe': 'Sản phẩm ' + i,
          'maDanhMuc': '1',
          'giaBan': (12 + i * Math.random()).toFixed(2),
          'trangThaiKeo': 'Đã上架',
          'trangThaiDuyet': 'Đã duyệt',
          'gioiThieu': (Math.random() > 0.5)
        }
        _this.phanTrang.danhSach.push(j)
      }
    }
  },
  // Giám sát sự thay đổi dữ liệu trong data
  watch: {},
  // Vòng đời - Tạo xong (có thể truy cập phiên bản this hiện tại)
  created () {

  },
  // Vòng đời - Gắn xong (có thể truy cập các phần tử DOM)
  mounted () {
    this.viDuLayDanhSach()
  },
  beforeCreate () {
  }, // Vòng đời - Trước khi tạo
  beforeMount () {
  }, // Vòng đời - Trước khi gắn
  beforeUpdate () {
  }, // Vòng đời - Trước khi cập nhật
  updated () {
  }, // Vòng đời - Sau khi cập nhật
  beforeDestroy () {
  }, // Vòng đời - Trước khi hủy
  destroyed () {
    this.websock.close() // Ngắt kết nối websocket khi rời khỏi tuyến đường
  }, // Vòng đời - Hủy xong
  activated () {
  } // Nếu trang có chức năng lưu đệm keep-alive, hàm này sẽ được kích hoạt
}
</script>

<style  lang="scss">
  //@import url(); Nhập lớp css công cộng

  .trangVidu2{
    .mauNenHangDuocChon {
      td{
        background-color: #fa645f !important;
      }
    }
    .mauTextNut{
      color: #409EFF;
      cursor: pointer;
      margin: 0 10px;
    }
    .mauTextNguyHiem{
      color: #f56c6c;
      cursor: pointer;
      margin: 0 10px;
    }
  }

</style>