如何将背景颜色应用于 buefy 表？答案

【问题标题】：How to apply the background color to buefy table?如何将背景颜色应用于 buefy 表？
【发布时间】：2018-08-23 13:32:24
【问题描述】：

我有一张这样的表，想添加 bulma 类“has-background-color-dark”

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

提前致谢。

【问题讨论】：

标签： vue.js buefy

【解决方案1】：

只需将类添加到您的组件：

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

它将类应用到表格组件的顶部父元素： <div class="b-table has-background-dark">... .
但是Bulma在<table>中设置了一个白色背景，所以整张表并没有变暗，只是分页。正如我们在the source code of buefy table component 中看到的那样，没有办法通过属性来改变它。所以，我们必须使用 /deep/ 进入 css。
添加您自己的类，如 <b-table class="myTable has-background-color-dark" ... 并将样式块添加到您的组件：

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

【讨论】：

【解决方案2】：

您可以像这样在data 选项中定义class 属性

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() {
  },
};

在这个例子中，我使用了一个数组作为类的列表。您还可以使用对象进行更复杂的条件附加。更多关于类绑定的信息here

例如fiddle

【讨论】：

感谢@Allkin。实际上它是将类附加到
而不是但无论如何我会根据您的建议进一步尝试。

它不起作用，因为 bulma 在表格元素中设置了背景颜色。请参阅下面的回复。