Как изменить цвет заголовка таблицы в Bootstra Vue b-table - PullRequest
Новая
       1

Как изменить цвет заголовка таблицы в Bootstra Vue b-table

0 голосов
/ 24 января 2020

Я бы хотел изменить цвет b-таблицы в Bootstra Vue компонент b-таблицы. Простой пример: 

<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-класс (и классы устанавливаются правильно, но не работает) и изменить стиль элемента thead, но таблица по-прежнему белая. Есть ли у вас способ, которым я могу изменить цвет этого заголовка?

И некоторые из моих зависимостей из пакета . json: "nuxt": "^ 2.0.0", " bootstrap ":" ^ 4.1.3 "," bootstrap - vue ":" ^ 2.0.0 "

1 Ответ

2 голосов
/ 24 января 2020

Проблема в том, что вы используете тег стиля scoped. Если вы хотите настроить таргетинг на подкомпоненты, вам нужно использовать глубинный селектор , чтобы правильно настроить таргетинг на них. 

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>
-->
...