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

Question

I have to add red background Colour for false, and green background for true based on the result column in a table, I am using elementUI + paginations of data-tables + vuejs. I am try to add in the column declarations by using style binding on result column thanks in advance

My template code

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

my customRowBackgrond() function

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

I need to get the true value to green and false to red to my whole table.... Thanks in advance.

I am using element-ui + vuejs + data-tables on element ui tables to get paginations — V L Sudhakar Inampudi, Feb 06 '19 at 12:39
I think it should be `backgrond-color` instead? And no single quotes on last 2 returns. — thefallen, Feb 06 '19 at 12:47

Riddhi · Accepted Answer · 2019-02-08T10:54:15.870

8

Try this

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

Or

In template

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

Update method as below

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

Update CSS as below

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

edited Feb 08 '19 at 10:54

answered Feb 06 '19 at 13:06

Riddhi

2,174
1
9
17

Thanks @Ridhi, but my requirement is different.......I am using el-table + vue-data -tables in Vuejs2 reference: https://www.njleonzhang.com/vue-data-tables/#/en-us/actionBar. I want to know the where it has to put to work – V L Sudhakar Inampudi Feb 08 '19 at 09:18
Thats really simple.Have you checked this.https://jsfiddle.net/api/post/library/pure/ – Riddhi Feb 08 '19 at 10:32
Sorry @Riddi the link of 'jsfiddle' not working for me – V L Sudhakar Inampudi Feb 08 '19 at 12:10
Even i am not able to access it now..Every details regarding this is updated at official documentation site i guess.But did u try the above way that i edited in my answer??? – Riddhi Feb 08 '19 at 13:09
I am not using simple el-table here. I am using data-tables in 'vue-data-tables' library. Because el-table is not fully supporting paginations. For paginations I prefered data-tables https://www.njleonzhang.com/vue-data-tables/#/en-us/actionBar in that I have to modify row colors – V L Sudhakar Inampudi Feb 09 '19 at 10:32

score 0 · Answer 2 · edited Jul 16 '22 at 04:19

It needs some class bindings or style binding in vueJs.https://v2.vuejs.org/v2/guide/class-and-style.html

I need to minimize the following class binding logic. My Template Code:

<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>

My Css Code

.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;
  }

Needs some other css class modifications which are creating dynamically at run time.

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

2 Answers2