我有一个像这样的表,并希望添加bulma类“ has-background-color-dark”
<b-table :data="data" :columns="columns"></b-table>
谢谢。
答案 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>