在 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 方式，能更好地控制整行样式。