Как изменить цвет текста таблицы bootstrap-vue

Привет всем, я использую vue в течение двух месяцев, и я хочу знать, как я могу изменить цвет в таблице bootstrapvue. это моя таблица. введите здесь описание изображения

и это то, что мне нужно отобразить, если данные начинаются с (+) и меняют цвет текста на зеленый, и если данные начинаются с (-) и меняют цвет текста на красный. А вот мой код bootstrabvue

<b-table
    :items="search_transfer"
    :fields="columnsheader"
    :current-page="currentPage"
    :per-page="perPage"
    class="tbsearch"
></b-table>

vue.js bootstrap-vue
person Suab Nkauj Hmoob    schedule 16.12.2019    source источник

Ответы (2)


arrow_upward
1
arrow_downward

Вы можете использовать свойство tdClass в своих полях. объект, чтобы определить, какой класс / классы должен иметь конкретный столбец.

Во фрагменте я передаю метод tdClass, который получает значение столбца для каждой строки, а затем я определяю, какой класс возвращать.

Возвращаемое значение метода должно быть строкой или массивом.

В качестве альтернативы вы можете использовать слоты и привязать нужный класс на основе предоставленного там значения. Однако я бы рекомендовал использовать tdClass

new Vue({
  el: '#app',
  data() {
    return {
      items: [],
      fields: [
        { key: 'id' },
        { key: 'amount', tdClass: 'setAmountTdClass' },
        { key: 'amount2' }
      ]
    }
  },
  mounted() {
    this.items.push({ id: 1, amount: '+1.00', amount2: '+1.00'})
    this.items.push({ id: 2, amount: '-123.00', amount2: '-123.00' })
    this.items.push({ id: 3, amount: '-12.00', amount2: '-12.00' })
    this.items.push({ id: 4, amount: '-2.00', amount2: '-2.00' })
    this.items.push({ id: 5, amount: '-3.00', amount2: '-3.00' })
    this.items.push({ id: 6, amount: '+15.00', amount2: '+15.00' })
  },
  methods: {
    setAmountTdClass(value) {
      var firstChar = value.charAt(0)
      if(firstChar === '+')
        return 'text-green'
      else if(firstChar === '-')
        return 'text-red'
    }
  }
})
.text-red {
  color: red;
}

.text-green {
  color: green;
}
<link href="https://unpkg.com/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://unpkg.com/[email protected]/dist/bootstrap-vue.css" rel="stylesheet"/>

<script src="https://unpkg.com/[email protected]/dist/vue.min.js"></script>
<script src="https://unpkg.com/[email protected]/dist/bootstrap-vue.js"></script>

<div id="app">
 <b-table :items="items" :fields="fields">
 <!-- Alternative utilizing slots -->
  <template v-slot:cell(amount2)="{ value }">
    <span :class="{ 'text-red': value.charAt(0) === '-', 'text-green': value.charAt(0) === '+' }">
      {{ value }}
    </span>
  </template>
 </b-table>
</div>

person Hiws    schedule 16.12.2019
comment
вау ... это работает для меня, и это может мне очень помочь. Большое спасибо, сэр. - person Suab Nkauj Hmoob; 17.12.2019
comment
Bootstrap имеет несколько доступных служебных классов цвета текста: text-danger text-success, text-warning, text-info и т. Д. getbootstrap .com / docs / 4.4 / utilities / colors / # color. - person Troy Morehouse; 18.12.2019

arrow_upward
1
arrow_downward

Для меня стили работают только в том случае, если они определены встроенными в fields данные. В качестве примера см. Нижеприведенный фрагмент кода:


fields: [
                   {
                        key: 'shortfall',
                        sortable: true,
                        class: 'text-center',
                        tdClass: (value) => {
                            if (value != null && value.indexOf('-') === -1) {
                                return 'text-red'
                            }
                        }
                    },
    ]

И напоминание не использовать стиль scoped; использовать глобальный стиль:


<style>
.text-red {
    color: red;
}
</style>
person Akshay Lokur    schedule 08.07.2021