el-table设置行背景颜色不生效

需求说明：

表格数据展示时，根据需求数量和已扣数量来确定其背景颜色，需求数量等于已扣数量则显示绿色，反之显示红色。

ps：由于本人不是专业前端，先用ChatGPT3问了一下

GPT回答：

要实现这个功能，可以使用Element UI提供的row-class-name属性来设置每一行的样式。 首先在el-table上添加属性:row-class-name, 给它绑定一个计算属性(例如calculateRowClassName)，该计算属性接收当前行的数据对象(row)作为参数，用于根据数据的不同返回不同的类名，然后在计算属性中根据allCount和buckleQuantity的值进行判断返回不同的类名。 计算属性大概是这个样子：

calculateRowClassName(row) {
  return row.allCount === row.buckleQuantity ? 'green-row' : 'red-row';
}

最后将green-row和red-row类名依次对应不同的背景色。

这个回答看似正确，其实很坑：官方文档参数给的是{row,rowIndex}直接传一个对象过来，而ChatGPT3直接用row一个对象来接收了这样row.allCount、row.buckleQuantity 全是 undefined，所以会导致永远返回的是 green-row。问了一下同事才清楚！

所以在传参数时应该是以下两种：

calculateRowClassName({ row, rowIndex }) {
  return row.allCount === row.buckleQuantity ? 'green-row' : 'red-row';
}

或者

calculateRowClassName(data) {
  const row = data.row
  return row.allCount === row.buckleQuantity ? 'green-row' : 'red-row';
}

根据官方文档说明：el-table组件 | Element设置row-class-name。

但是效果不生效，百度了一下有两个原因：

1. 表格设置了斑马条纹stripe属性与自定义样式冲突去掉即可
2. <style scoped lang="scss">的scoped要去掉

尝试了都没用，最后请教了前端同事。

我最终的文件是这样子的：

<template>
  <div>
    <el-table  
      ref="planProcessTableRight"  
      :data="callItemObj.tableData1"  
      element-loading-text="列表正在加载中"  
      highlight-current-row  
      border  
      size="min"  
      class="common-table mt1"  
      :header-cell-style="tableHeaderClass"  
      :row-class-name="calculateRowClassName"  
    >  
    <template v-for="(item, index1) in itemsDetailColumn">  
      <el-table-column  
       v-if="item.show"  
       :key="index1"  
       :type="item.type"  
       :prop="item.prop"  
       :label="item.label"  
       :sortable="item.sortable"  
       :align="item.align"  
       :width="item.width"  
       :min-width="item.minWidth"  
       :formatter="item.formatter"  
     />  
    </template>  
    </el-table>
  </div>
</template>

<script>
export default {
  data() {
    methods: {  
      calculateRowClassName(data) {  
      const row = data.row  
      return row.allCount === row.buckleQuantity ? 'green-row' : 'red-row'  
      }
    }
  }
}
</script>

<style scoped lang="scss">
::v-deep .green-row {  
background-color: #13ce66 !important;  
}  
::v-deep .red-row {  
background-color: #F56C6C !important;  
}  
</style>

scoped、>>>、/deep/、::v-deep原理juejin.cn/post/702334…