无锡做网站公司有哪些电话_网页版梦幻西游官网_百度网址安全检测中心_核心关键词和长尾关键词

需求：

给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>