Vue/Bootstrap 表使用 CSS 类条件样式化行

Question

我正在开发一个 Vue/Bootstrap 项目，并尝试根据表中项目的值有条件地更改

b-table

中行的颜色。我使用这篇文章中建议的方法取得了一些成功。该帖子中的示例可以在下面找到：

<template>
  <b-table :items="items" :fields="fields" :tbody-tr-class="rowClass">
  </b-table>
</template>

<script>
export default {
  data() {
    return {
      items: [ ... ],
      fields: [ ... ]
    }
  },
  methods: {
    // ...
    rowClass(item, type) {
      if (item && type === 'row') {
        if (item.released === true) {
          return 'text-success'
        } else {
          return 'text-secondary'
        } 
      } else {
        return null
      }
    }
  }
}
<script>

我见过几个像上面这样的例子，但在我见过的每个例子中，

rowClass

（或等效）返回的类始终是引导样式（例如

table-success

，

table-danger

）。有没有办法返回 CSS 类或覆盖引导类，以便我可以使用自定义颜色？谢谢！

Answer 1

通过在我返回的 CSS 样式旁边使用

/deep/

关键字（在

.vue

类中定义），我能够使用上面使用的方法应用我的 CSS 样式。问题出在作用域关键字上。结果代码看起来像这样：

<template>
  <b-table :items="items" :fields="fields" :tbody-tr-class="rowClass">
  </b-table>
</template>

<script>
export default {
  data() {
    return {
      items: [ ... ],
      fields: [ ... ]
    }
  },
  methods: {
    // ...
    rowClass(item, type) {
      if (item && type === 'row') {
        if (item.released === true) {
          return 'css-class-1'
        } else {
          return 'css-class-2'
        } 
      } else {
        return null
      }
    }
  }
}
<script>

<style scoped>
/deep/ .css-class-1 {
    background-color: red;
}
   
/deep/ .css-class-2 {
    background-color: green;
}

</style>