在 b 表详细视图上更改颜色答案

【问题标题】：Change colour on b-table detailed view在 b 表详细视图上更改颜色
【发布时间】：2019-04-14 19:54:53
【问题描述】：

我希望能够更改表格提供给我的详细信息窗口的背景颜色。现在我想在详细信息视图中添加另一个表格，但由于颜色不匹配，现在看起来确实很糟糕。

示例图片：

我已尝试阅读 Bulma 和 Buefy 的文档，但我似乎无法找到是否真的可以选择更改背景颜色。

文档：

https://bulma.io/documentation/elements/table/

https://buefy.org/documentation/table/

我在这里完全失明了吗？谁能告诉我如何改变颜色的例子？

【问题讨论】：

您能否提供重现此问题的 CodePen 或 JSFiddle？
jsfiddle.net/h4536fk0/6“详细信息”按钮由于某种原因没有显示，但它位于表格行的左侧。
你想改变整个表格的背景，对吧？你试过用 CSS 吗？
您的 JSFiddle 非常混乱。你能把它清理干净，这样它就更接近你的问题了。帮助我们帮助你........

标签： vue.js bulma buefy

【解决方案1】：

您可以通过手动设置元素样式来绕过它，但您必须设置它们的“内部”元素之一（与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>

（基于https://buefy.org/documentation/table/ CodePen 链接“详细行”）

【讨论】：