javascript - 在 vueJS 2 中分页但无法呈现的 element-ui 表行的背景颜色

Question

我必须根据表中的结果列为 false 添加红色背景颜色，为 true 添加绿色背景，我使用的是 elementUI + 数据表分页 + vuejs。我尝试通过在结果列上使用样式绑定(bind)来添加列声明，在此先感谢

我的模板代码

<template slot="header" slot-scope="table" :style = "customRowBackground(table.row)">
<template slot-scope="table">{{ table.row.launch_success }}</template>
</el-table-column>

我的 customRowBackgrond() 函数

 customRowBackgrond({row}){     
      if (row.launch_success == true) {
        return {'backgrondColor': 'rgb(252, 230, 190)'};
      } 
      else if (row.launch_success == false) {
        return { backgrondColor: 'rgb(252, 230, 190)'};
      } 
      else {
        return {backgrondColor: 'rgb(252, 230, 190)'};
      }
    },

我需要为我的整个表获取绿色的真值和红色的假值......提前致谢。

Answer 1

试试这个

:style = "table.row.launch_success == true ? '{"backgrondColor": "rgb(252, 230, 190)"}' : table.row.launch_success == false ? '{"backgrondColor": "rgb(252, 230, 190)"}' : '{"backgrondColor': "rgb(252, 230, 190)"}'

或者

在模板中

<el-table :data="tableData2" style="width: 100%" :row-class-name="tableRowClassName">

更新方法如下

methods: {
      tableRowClassName({row, rowIndex}) {
        if (row.launch_success == true) {
          return 'success-row';
        } else if (row.launch_success == false) {
          return 'warning-row';
        }
        return 'other-row';
      }
    },

如下更新 CSS

.el-table .warning-row {
background: 'rgb(252, 230, 190)';
}

.el-table .success-row {
background: 'rgb(252, 230, 190)';
}

.el-table .other-row {
background: 'rgb(252, 230, 190)';
}