Как применить цвет фона к таблице buefy?

Question

У меня есть такая таблица, и я хотел бы добавить класс bulma "has-background-color-dark"

<b-table :data="data" :columns="columns"></b-table>

Заранее спасибо.

Answer 1

Просто добавьте класс в свой компонент:

<b-table class="has-background-color-dark" :data="data" :columns="columns"></b-table>

Он применит класс к верхнему родительскому элементу компонента таблицы:<div class="b-table has-background-dark">....
Но Бульма установил белый фон в<table>, поэтому вся таблица не темная, а только разбивка на страницы. Как мы видим в исходном коде компонента таблицы buefy, нет возможности изменить это с помощью атрибутов. Итак, нам нужно перейти в css с/deep/.
Добавьте свой собственный класс, например<b-table class="myTable has-background-color-dark" ... и добавьте блок стилей в свой компонент:

<style lang="scss" scoped>
.myTable {
  /deep/ table.table {
    background-color: $dark;
  }
}
</style>

Answer 2

Вы можете определить class собственность в вашем data вариант как этот

export default {
  data() {
     return {
       tableClassList: ['some-class']
     }
  }
  computed: {
  },
  created() {
  },
  mounted() {
  },
};

Затем в своем шаблоне вы привязываете эту опору к вашему атрибуту класса следующим образом

<b-table :data="data" :class="tableClassList" :columns="columns"></b-table>

Затем, скажем, вы хотите добавить has-background-color-dark класс после действия, как нажатие кнопки. Для этого примера пользователь нажимает кнопку и метод appendClass называется так

export default {
  data() {
     return {
       tableClassList: ['some-class']
     }
  },
  methods: {
      appendClass() {
        this.tableClassList.push('has-background-color-dark')
      }
  },
  computed: {
  },
  created() {
  },
  mounted() {
  },
};

В этом примере я использовал массив в качестве списка для классов. Вы также можете использовать объект для более сложного условного добавления. Больше информации о связывании классов здесь

Пример скрипки