Как динамически изменить цвет строки таблицы без _rowVariant? - PullRequest
Новая
       11

Как динамически изменить цвет строки таблицы без _rowVariant?

0 голосов
/ 03 декабря 2018

Я использую таблицу начальной загрузки для отображения информации, которую извлекаю из JSON.Одна информация, которую я получаю, - это int с именем «Status», я хочу изменить цвет всей строки в соответствии с этой переменной, например, если Status равен 1, то строка зеленого цвета.]

В документации bootstrap-vue показано изменение цвета строки в соответствии с объектом _rowVariant внутри каждого элемента в данных массива элементов, но как я могу изменить цвет моей строкине имея этого объекта в моем массиве элементов?Если это невозможно, как я могу вставить эту переменную в каждый объект моего массива?

Вот код относительно содержимого таблицы: 

<b-container fluid>
  <b-table hover :items="requests" :fields="fields"
  @row-clicked="onRowClicked"
  >

  <template slot="show_details" slot-scope="row">
  <!-- we use @click.stop here to prevent emitting of a 'row-clicked' event  -->
  <b-button size="sm" @click.stop="row.toggleDetails" class="mr-2">
   {{ row.detailsShowing ? 'Hide' : 'Show'}} Details
  </b-button>
  </template>
  <template slot="row-details" slot-scope="row">
    <b-card>
      <b-row class="mb-2">
        <b-col sm="3" class="text-sm-right"><b>Info 1:</b></b-col>
        <b-col>{{ row.item.horas_info }}</b-col>
      </b-row>
      <b-row class="mb-2">
        <b-col sm="3" class="text-sm-right"><b>Info 2:</b></b-col>
        <b-col>{{ row.item.pdf }}</b-col>
      </b-row>
      <b-button size="sm" @click="row.toggleDetails">Hide Details</b-button>
    </b-card>
  </template>
  </b-table>
</b-container>

1 Ответ

0 голосов
/ 03 декабря 2018

Вы можете использовать вычисленные свойства, чтобы добавить дополнительное поле в список элементов: 

computed: {
  formartedItems () {
    if (!this.requests) return []
    return this.requests.map(item => {
      item._rowVariant  = this.getVariant(item.Status)
      return item
    })
  }
},
methods: {
  getVariant (status) {
    switch (status) {
      case 1:
        return 'success'
      case 1:
        return 'danger'
      default:
        return 'active'
    }
  }
}

, затем в HTML-коде: 

<b-table hover :items="formartedItems" :fields="fields" @row-clicked="onRowClicked">
...
</b-table>

Если вы хотите более индивидуальный стиль, вы можете отметить tdClass, thClass или thStyle в таблице начальной загрузки.

...