vue.js - 如何将十六进制颜色代码设置为“tbody-tr-class”？（引导程序）

Question

我正在尝试b-table用不同的颜色设置行。bootstrap-vue 有一个类tbody-tr-class。

<b-table
          head-variant="light"
          :tbody-tr-class="rowClass"
          :items="Clients"
          :fields="headers"
 >

现在，该类返回一些用十六进制颜色代码分配的自定义颜色。

rowClass(item, type) {
      if (!item || type !== "row") return;
      if (item.color_id === 1) return "table-hexvalue1";
      else return "table-hexvalue2";
    },

我已经尝试分配这样的课程：

<style lang="scss" scoped>
.hexvalue1 {
background-color: #D9FFBC;
color: #D9FFBC;
}
.hexvalue2 {
background-color: #fd7e14;
color: #fd7e14;
}
</style>

它不工作！如何将十六进制颜色代码设置为tbody-tr-class？

标签： vue.jsbootstrap-vue

Answer 1

为您的班级名称留出间距，例如

rowClass(item, type) {
      if (!item || type !== "row") return;
      if (item.color_id === 1) return "table hexvalue1";
      else return "table hexvalue2";
    },

因为您只为.hexvalue1and指定了样式.hexvalue2