如何将背景色应用于buefy表?

时间:2018-08-23 13:32:24

标签: vue.js buefy

我有一个像这样的表,并希望添加bulma类“ has-background-color-dark”

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

谢谢。

2 个答案:

答案 0 :(得分:1)

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

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

然后在模板中将该道具绑定到您的class属性上

<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

答案 1 :(得分:1)

只需将类添加到您的组件中即可:

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

它将类应用于表组件的顶部父元素: <div class="b-table has-background-dark">...
但是布尔玛在<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>