Как изменить стиль в указанной строке c в таблице элементов интерфейса - PullRequest
Новая
       26

Как изменить стиль в указанной строке c в таблице элементов интерфейса

0 голосов
/ 18 февраля 2020

Я использую Element UI для своего веб-приложения. В моем приложении есть компонент таблицы, который создается компонентом el-table, предоставляемым пользовательским интерфейсом Element.

И я хотел бы изменить стиль только для указанной строки c.

Во-первых, пожалуйста, взгляните на скриншот и мой код, позже я объясню, что я хотел бы сделать именно с ними.

Это скриншот таблицы в моем приложении и мой код.

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>

Я хотел бы изменить цвет фона на синий для строки, в которой данные имеют значение 2016-05-03 и 2016-05-04 в случае выше.

Ответы [ 2 ]

2 голосов
/ 18 февраля 2020

Вы должны взглянуть на это https://element.eleme.io/# / en-US / component / table # table-with-status . на основе свойства row-class-name вы можете применить некоторые логики c для добавления класса в строку. 

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

Конечно, вы должны настроить это под свои нужды

0 голосов
/ 18 февраля 2020

Добавьте этот код в таблицу стилей компонента 

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