web-dev-qa-db-ja.com

vuejs 2でのページネーションを持つ要素-UIテーブルの行への背景色がレンダリングに失敗した

テーブル内の結果列に基づいて、TRUEの緑色の背景色の赤い背景色を追加しなければなりません。表の結果列に基づいて、データテーブル+ VUEJのElementUI +ページを使用しています。私は事前に結果列のスタイルバインディングを使用して列宣言で追加しようとしています

私のテンプレートコード

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

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

私は真の値を緑に入れる必要があります。

javascriptvuejs2element-ui
5
V L Sudhakar Inampudi

これを試して

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

それはいくつかのクラスバインディングまたは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クラスの変更が必要です。

0
V L Sudhakar Inampudi