vue3+element-plus表格点击单行或多行都添加上背景颜色

使用场景：

1.当点击表格的多选框选中的情况下， 只有选中的框有标识 表格行字段没有太明显的区分，效果不是很好，话不多说直接上代码

<template>
  <el-table ref="table" :data="tableData" style="width: 900px" :cell-style="tableRowStyle" @row-click="clickRow" @selection-change="handleSelectionChange" :border="true">
    <el-table-column type="selection" width="50" align="center" />
    <el-table-column prop="date" label="Date" align="center" />
    <el-table-column prop="name" label="Name" align="center" />
    <el-table-column prop="address" label="Address" show-overflow-tooltip />
  </el-table>
</template>

<script setup>
import { getCurrentInstance, ref } from 'vue'
const { proxy } = getCurrentInstance()
const selectValue = ref(null)
const tableData = [
  {
    id: 1,
    date: '2016-05-03',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    id: 2,
    date: '2016-05-02',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    id: 3,
    date: '2016-05-04',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    id: 4,
    date: '2016-05-01',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
]
//将选中的设置背景颜色
const tableRowStyle = ({ row }) => {
  let arr = []
  if (selectValue.value !== null) {
    selectValue.value.filter((item, index) => {
      arr.push(item.id)
    })
  }
  for (var i = 0; i <= arr.length; i++) {
    if (arr[i] == row.id) {
      return { backgroundColor: '#ebf5ff !important' }
    }
  }
}
// 点击其他位置也选中当前行
const clickRow = (row) => {
  proxy.$refs.table.toggleRowSelection(row, undefined)
}
// 多选框选中数据
function handleSelectionChange(selection) {
  selectValue.value = selection
}
</script>

4.运行结果：不会发动图直接发效果图片哈

 

3.使用注意点：图片标注位置尽量使用数据的唯一值，一定一定不要使用重复的值

 

总结：

很简单的代码例子希望如果有这种场景的需求的 可以试一试的