如何更改Bootstrap-Vue表文字颜色 [英] How to change bootstrap-vue table text color

问题描述

你好，我每个人都用vue玩了两个月，我想知道我该如何更改bootstrapvue表中的颜色.这是我的桌子在此处输入图片描述

Hello every one i using vue for two mont and i want to know that How can i change color in bootstrapvue table. this is my table enter image description here

如果数据以(+)开头并将文本颜色更改为绿色，而数据以(-)开头并将文本颜色更改为红色，这就是我需要显示的内容.这是我的bootstrabvue代码

and this is what i need to display if data begin with (+) and change text color to green and if data begin with (-) and change text color to red. And here is my bootstrabvue code

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

推荐答案

您可以使用 tdClass属性，以确定特定列应具有的类.

You can utilize the tdClass property in your fields object to determine what class/classes a specific column should have.

在代码段中，我将方法传递给 tdClass ，该方法接收每行的列值，然后确定要返回的类.

In the snippet i pass a method to tdClass which receives the value of the column per row, and then i determine what class to return.

方法的返回值应该是字符串或数组.

The return value of the method should either be a string or an array.

作为替代方案，您可以利用插槽并根据那里提供的值绑定所需的类.但是我建议使用 tdClass

As an alternative you can utilize slots and bind the class you want based on the value provided there. However i would recommend utilizing 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/bootstrap@4.3.1/dist/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://unpkg.com/bootstrap-vue@2.1.0/dist/bootstrap-vue.css" rel="stylesheet"/>

<script src="https://unpkg.com/vue@2.6.10/dist/vue.min.js"></script>
<script src="https://unpkg.com/bootstrap-vue@2.1.0/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>

这篇关于如何更改Bootstrap-Vue表文字颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！