Question

你好，我每个人都用vue玩了两个月，我想知道我该如何更改bootstrapvue表中的颜色。这是我的桌子 enter image description here

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

engine = create_engine('sqlite:////tmp/test.db', convert_unicode=True)

db_session = scoped_session(sessionmaker(autocommit=False,autoflush=False,bind=engine))

Base = declarative_base()

Base.query = db_session.query_property()

Answer 1

对我来说，样式只有在 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>

Answer 2

您可以利用字段对象中的tdClass property来确定特定列应具有的类。

在代码段中，我将方法传递给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/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表文字颜色

2 个答案: