Vue/Bootstrap b-table如何自定义CSS类实现行条件样式？

当然可以返回自定义CSS类，也能覆盖Bootstrap内置类来使用自定义颜色，具体实现方式如下：

一、返回自定义CSS类 #

tbody-tr-class方法完全支持返回自定义类名，只需按行数据判断返回对应类，再定义类的样式即可：

1. 组件内配置表格及行类判断逻辑

<template>
  <b-table
    :items="tableData"
    :tbody-tr-class="getRowClass"
  ></b-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        { id: 1, status: 'normal' },
        { id: 2, status: 'special' },
        { id: 3, status: 'invalid' }
      ]
    }
  },
  methods: {
    getRowClass(rowItem) {
      // 根据行数据返回对应类名
      switch(rowItem.status) {
        case 'special':
          return 'custom-special-row';
        case 'invalid':
          return 'custom-invalid-row';
        default:
          return '';
      }
    }
  }
}
</script>

2. 定义自定义类的样式
   如果是组件内样式，直接在scoped标签里写即可；如果要全局生效，放到全局样式文件中：

<style scoped>
.custom-special-row {
  background-color: #fff3cd;
  color: #856404;
}

.custom-invalid-row {
  background-color: #f8d7da;
  color: #721c24;
}

/* 可选：自定义hover状态 */
.custom-special-row:hover {
  background-color: #ffeeba;
}
</style>

二、覆盖Bootstrap内置类 #

如果想直接修改Bootstrap自带的table-*类样式，需要注意样式优先级：

1. 全局覆盖
   在全局样式文件（如custom.css或App.vue的非scoped样式）中重写类：

/* 覆盖table-primary类的背景色 */
.table-primary {
  background-color: #007bff !important; /* 用!important提升优先级，或用更具体选择器 */
  color: #fff;
}

2. 组件内局部覆盖
   如果只想在当前组件生效，使用深度选择器::v-deep（Vue2）或:deep()（Vue3）：

<style scoped>
::v-deep .table-warning {
  background-color: #fff3cd;
  color: #856404;
}
</style>

注意事项 #

• 自定义类的优先级如果低于Bootstrap类，可通过增加选择器层级（如b-table .custom-row）或!important解决冲突；
• scoped样式仅作用于当前组件，不会污染全局样式，适合局部自定义场景。

内容的提问来源于stack exchange，提问作者Bip Bop