我希望能够更改表格为我提供的详细信息窗口的背景颜色。现在,我想在details-view里面放另一个表,但是由于颜色不匹配,现在看起来确实很糟糕。
示例图片:
我尝试阅读布尔玛和Buefy的文档,但似乎找不到改变背景颜色的选项。
文档:
https://bulma.io/documentation/elements/table/
https://buefy.org/documentation/table/
我在这里完全失明吗?谁能给我看一个改变颜色的例子吗?
答案 0 :(得分:0)
您可以通过手动设置元素的样式来解决它,但是必须设置其“内部”元素之一的风格(与b-table
组件相对)。我会称其为错误。在其GitHub页面上打开一个问题。
const data = [{"id": 1,"user": {"first_name": "Jesse","last_name": "Simmons"},"date": "2016/10/15 13:43:27","gender": "Male"}];
new Vue({
el: '#app',
data() {
return {
data,
defaultOpenedDetails: [1]
}
},
methods: {
toggle(row) {
this.$refs.table.toggleDetails(row)
}
}
});
.inner-table .table { background: gold; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<script src="https://unpkg.com/buefy/dist/buefy.min.js"></script>
<link href="https://cdn.materialdesignicons.com/2.0.46/css/materialdesignicons.min.css" rel="stylesheet" />
<link href="https://unpkg.com/buefy/dist/buefy.min.css" rel="stylesheet" />
<div id="app" class="container">
<b-table :data="data" :opened-detailed="defaultOpenedDetails" detailed detail-key="id" :show-detail-icon="true">
<template slot-scope="props">
<b-table-column field="id" label="ID" width="40" numeric>{{ props.row.id }}</b-table-column>
<b-table-column field="user.first_name" label="First Name">{{ props.row.user.first_name }}</b-table-column>
<b-table-column field="user.last_name" label="Last Name">{{ props.row.user.last_name }}</b-table-column>
</template>
<template slot="detail" slot-scope="props">
<b-table :data="data" class="inner-table">
<template slot-scope="props">
<b-table-column field="id" label="ID" width="40" numeric>{{ props.row.id }}</b-table-column>
<b-table-column field="user.first_name" label="First Name">{{ props.row.user.first_name }}</b-table-column>
<b-table-column field="user.last_name" label="Last Name">{{ props.row.user.last_name }}</b-table-column>
</template>
<template slot="detail" slot-scope="props">
FOO
</template>
</b-table>
</template>
</b-table>
</div>