Element Plus table 去除行hover效果

需求：

给table的指定行设置高亮背景色且去除掉这些行的hover效果

思路：

1. 给指定行设置css类名
2. 选择需要设置高亮的行的单元格，设置鼠标禁用属性
3. 让高亮行继承父元素的背景色

考虑到表格的第一列是勾选框，因此仅选择 tr 下除了第一个子元素之外的 td

实现：

<template>
  <el-table :data="tableData" style="width: 100%" :row-class-name="tableRowClassName">
    <el-table-column type="selection" width="60" />
    <el-table-column prop="date" label="Date" width="180" />
    <el-table-column prop="name" label="Name" width="180" />
    <el-table-column prop="address" label="Address" />
  </el-table>
</template>

<script lang="ts" setup>
const tableData = [
  {
    date: '2016-05-03',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-02',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-04',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
]
const tableRowClassName = ({ row, rowIndex }) => {
  if(rowIndex === 1){
	return 'highLight-gray special';
  }else if(rowIndex === 2){
	return 'highLight-green special';
  }else if(rowIndex === 3){
	return 'highLight-blue special';
  }
}
</script>
<style lang="scss" scoped>
:deep(.el-table) {
  .highLight-gray { background-color: #cecece };
  .highLight-green { background-color: #f2fce0};
  .highLight-blue { background-color: #c4dcf9};
  .el-table__body {
	tr[class*='special'] > td:not(:first-child) {
	  pointer-events: none;
	}
	tr[class*='special'] > td {
	  background-color: inherit;
	}
  }	
}
</style>