元素行的背景颜色-ui table 在 vueJS 2 中具有分页但无法呈现

Question

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

我的模板代码

<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)'};
      }
    },

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

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)';
}

Answer 2

它需要一些 class 绑定或 vueJs 中的样式绑定。https://vuejs.org/v2/guide/class-and-style.html

我需要最小化以下 class 绑定逻辑。 我的模板代码：

<span :class="[{'row_success':table.row.launch_success},{'row_fail':!table.row.launch_success},{'row_schedule':table.row.launch_success == null}]">
<span class="cell_text_wrapper">{{ table.row.flight_number }}</span>
</span>

我的Css代码

.el-table td .row_success {
    color: #1caa14;
    background-color: #defdde;
    padding: 0;
    display: table;

  }
  .el-table td .row_fail {
    color: #f83364;
    background-color: #fdecec; 
    padding: 0;
    display: table;

  }
  .el-table td .row_schedule {
    color: #0e0e83;
    background-color: #d2f8f7;
    padding: 0;
    display: table;
  }

需要一些其他 css class 修改，这些修改在运行时间动态创建。

元素行的背景颜色-ui table 在 vueJS 2 中具有分页但无法呈现

Background colors to rows of a element-ui table with pagination in vueJS 2 but failing to render

javascript

vuejs2

element-ui