Question

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

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

谢谢。

Answer 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

Answer 2

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

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

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

2 个答案: