如何在 BootstraVue b-table 中更改表头颜色

Posted 2023-02-22

【中文标题】如何在 BootstraVue b-table 中更改表头颜色

【英文标题】：How to change table header color in BootstraVue b-table

【发布时间】：2020-05-10 13:54:57

【问题描述】：

我想更改 BootstraVue b-table 组件中 b-table 的颜色。 简单的例子是：

<template>
    <div>
        <b-table :items="items" thead-class="greenColor">
        </b-table>
    </div>
</template>
<style scoped>
.greenColor, .table thead th, thead, th 
    background-color: #00FF00 !important;

</style>
<script>
export default 
    data() 
        return 
            items: [
                name: "Paweł", surname: "Kowalski",
                name: "John", surname: "Nowak"
            ]
        
    

</script>

如您所见，我尝试设置 thead-class（并且类设置正确但不起作用）并更改 thead 元素的样式，但表格仍然是白色的。 你有办法让我改变这个标题的颜色吗？

还有一些来自 package.json 的依赖项： "nuxt": "^2.0.0", “引导程序”：“^4.1.3”， "bootstrap-vue": "^2.0.0"

【参考方案1】：

您面临的问题是因为您使用的是scoped 样式标签。 如果您想定位子组件，您需要使用deep selector 来正确定位它们。

new Vue(
  el: '#app',
  data() 
    return 
      items: [
         first: 'Mikkel', last: 'Hansen', age: 16 
      ],
      fields: [
        /* 
          Optionally define a class per header, 
          this will overlay whatever thead-class background you choose 
        */
         key: 'first', thClass: 'bg-white text-dark' ,
         key: 'last' ,
         key: 'age' 
      ]
    
  
)

<script src="https://unpkg.com/vue@2.6.11/dist/vue.min.js"></script>
<script src="https://unpkg.com/bootstrap-vue@2.2.2/dist/bootstrap-vue.js"></script>

<link href="https://unpkg.com/bootstrap@4.4.1/dist/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://unpkg.com/bootstrap-vue@2.2.2/dist/bootstrap-vue.css" rel="stylesheet"/>

<div id="app">
  <!-- If the CSS class is globally available (like bg-dark) you can simply use it in thead-class -->
  <b-table :items="items" thead-class="green-bg bg-dark text-white"></b-table>
  
  <!-- Optinally you can use the fields property and define classes per column -->
  <b-table :items="items" :fields="fields" thead-class="green-bg bg-dark text-white"></b-table>
</div>

<!-- Disabled since it doesn't work for SO snippets.
<style scoped>
  /* Example of how to use a deep selector */
  /deep/ .green-bg 
    background-color: green;
  
<style>
-->