How to set hex color code to `tbody-tr-class` ? (bootstrap-vue)-CodePudding

I am trying to set b-table row with different colors. bootstrap-vue have a class tbody-tr-class.

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

Now, the class return some custom color assigned with hex color code.

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

I have tryied to assign class like these:

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

It's not working! How to set hex color code to tbody-tr-class?

CodePudding user response：

Give spacing for your class Names like

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

since you have specified stylings only for .hexvalue1 and .hexvalue2

CodePudding user response：

I think use Computed Properties

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