在 Element UI 的 el-table 中实现某行标红并显示删除线

方法 1：使用 row-class-name 绑定行样式类

<template><el-table:data="tableData":row-class-name="getRowClassName"style="width: 100%"><el-table-column prop="name" label="姓名"></el-table-column><el-table-column prop="age" label="年龄"></el-table-column><el-table-column prop="status" label="状态"></el-table-column></el-table>
</template><script>
export default {data() {return {tableData: [{ name: '张三', age: 25, status: '正常' },{ name: '李四', age: 30, status: '已删除', deleted: true }, // 标记需要删除线的行{ name: '王五', age: 28, status: '正常' }]};},methods: {getRowClassName({ row }) {if (row.deleted) {return 'deleted-row'; // 返回自定义类名}return '';}}
};
</script><style>
/* 删除线行样式 */
.el-table .deleted-row {background-color: #ffcccc !important; /* 红色背景 */
}.el-table .deleted-row td .cell {text-decoration: line-through; /* 文字删除线 */color: #f56c6c !important;    /* 红色文字 */
}
</style>

方法 2：使用 cell-class-name 实现（更细粒度控制）

<template><el-table:data="tableData":cell-class-name="getCellClassName"style="width: 100%"><!-- 列定义 --></el-table>
</template><script>
export default {methods: {getCellClassName({ row, columnIndex }) {if (row.deleted) {return 'deleted-cell'; // 整行单元格应用样式}return '';}}
};
</script><style>
/* 单元格样式 */
.el-table .deleted-cell {background-color: #ffcccc !important;text-decoration: line-through !important;color: #f56c6c !important;
}
</style>

关键说明：

1. 标记删除行：在数据对象中添加标识属性（如 deleted: true）

2. 样式覆盖：

   • !important 用于覆盖 Element UI 默认样式

   • 背景色使用浅红色（#ffcccc）

   • 文字使用红色（#f56c6c）加删除线

3. 动态判断：

   if (row.deleted) { // 根据你的业务标识判断return 'your-class-name';
   }

效果特点：

• 整行红色背景突出显示

• 所有单元格文字带删除线

• 自动适应固定列、多级表头等复杂场景

注意：如果使用 scoped CSS，需要添加深度选择器：

/* 深度选择器写法 */
::v-deep .el-table .deleted-row { ... }
/* 或 */
:deep(.el-table .deleted-row) { ... }

根据实际需求选择方法，通常推荐使用 row-class-name 方式，能更好地控制整行样式。