Цвета фона для строк таблицы element-ui с разбиением на страницы в vueJS 2, но без визуализации

Question

Мне нужно добавить красный цвет фона для false и зеленый фон для true на основе столбца результата в таблице. Я использую elementUI + нумерацию страниц данных-таблиц + 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)'};
      }
    },

Мне нужно получить истинное значение зеленого и ложное красное на всю мою таблицу .... Заранее спасибо.

Answer 1

Требуются некоторые привязки классов или привязки стилей в vueJs. https://vuejs.org/v2/guide/class-and-style.html

Мне нужно минимизировать следующую логику привязки классов. Мой код шаблона:

<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, которые создаются динамически во время выполнения.

Answer 2

Попробуйте это

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