vue.js - 如何将背景颜色应用于 buefy 表？

Question

我有一张这样的表，想附加 bulma 类“有背景颜色暗”

<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">....
但是 Bulma 在 中设置了一个白色背景<table>，所以整个表格并没有变暗，只是分页。正如我们在buefy table组件的源代码中看到的那样，没有办法通过属性来改变它。所以，我们必须在 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() {
  },
};

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

示例小提琴