CODEWITHSUNDEEP
vue.jselement-ui
Satoru Kikuchi
Satoru Kikuchi

Reputation: 1189

How to change style in specific row in Element UI Table

I'm using Element UI for my web app. In my app, there is a table component, that is made by el-table component provided by Element UI.

And I would like to change style for the only specific row.

Firstly, please take a look at the screenshot and my code, later, I will explain what I would like to do specifically with them.

These are the screenshot of table in my app and my code.

enter image description here

<template>
  <el-table
    :data="tableData"
    height="250"
    style="width: 100%">
    <el-table-column
      prop="date"
      label="Date"
      width="180">
    </el-table-column>
    <el-table-column
      prop="name"
      label="Name"
      width="180">
    </el-table-column>
    <el-table-column
      prop="address"
      label="Address">
    </el-table-column>
  </el-table>
</template>

<script>
  export default {
    data() {
      return {
        tableData: [{
          date: '2016-05-03',
          name: 'Tom',
          address: 'No. 189, Grove St, Los Angeles'
        }, {
          date: '2016-05-02',
          name: 'Tom',
          address: 'No. 189, Grove St, Los Angeles'
        }, {
          date: '2016-05-04',
          name: 'Tom',
          address: 'No. 189, Grove St, Los Angeles'
        }, {
          date: '2016-05-01',
          name: 'Tom',
          address: 'No. 189, Grove St, Los Angeles'
        }, {
          date: '2016-05-08',
          name: 'Tom',
          address: 'No. 189, Grove St, Los Angeles'
        }, {
          date: '2016-05-06',
          name: 'Tom',
          address: 'No. 189, Grove St, Los Angeles'
        }, {
          date: '2016-05-07',
          name: 'Tom',
          address: 'No. 189, Grove St, Los Angeles'
        }],
      }
    }
  }
</script>

I would like to change background color blue for the row that's Data is 2016-05-03 and 2016-05-04 in the case above.

Upvotes: 1

Views: 13974

Answers (3)

Furkan G&#252;ll&#252;
Furkan G&#252;ll&#252;

Reputation: 23

Additionally +

If you are using the new version of Element-UI and row-style instead of header-row-class-name, you must not use like return: 'background: red'. You have to return Object.

ex: return: {'background': 'red'}

Upvotes: 0

dreijntjens
dreijntjens

Reputation: 4825

You should have a look at this https://element.eleme.io/#/en-US/component/table#table-with-status. based on the property row-class-name you can apply some logic to add an class to the row.

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

JS

methods: {
  tableRowClassName({row, rowIndex}) {
    if (row.date >= new Date()) {
      return 'warning-row';
    } else if (rowIndex === 3) {
      return 'success-row';
    }
    return '';
  }
},

Of course you've to customize this to your needs

Upvotes: 4

Momin
Momin

Reputation: 3320

Add this code on the component stylesheet

.el-table tr:nth-child(odd) {
    background-color: #845353;
}

Upvotes: 0

Related Questions