Изменить цвет на подробном просмотре b-таблицы

Я хотел бы иметь возможность изменить цвет фона окна сведений, которое мне предоставляет таблица. Прямо сейчас я хочу иметь еще одну таблицу в подробном представлении, но сейчас это выглядит ужасно из-за несоответствия цветов.

Пример изображения: a Example

Я попытался прочитать документацию как для Bulma, так и для Buefy, но я не могу найти, действительно ли есть возможность изменить цвет фона.

Документация:

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

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

Я здесь совершенно слепой? Может ли кто-нибудь показать мне пример того, как изменить цвет?


vue.js buefy bulma
person Stene    schedule 14.04.2019    source источник
comment
Можете ли вы предоставить CodePen или JSFiddle, воспроизводящий эту проблему?   -  person Matt Oestreich    schedule 15.04.2019
comment
jsfiddle.net/h4536fk0/6 По какой-то причине кнопка сведений не отображается, но это слева от строки таблицы.   -  person Stene    schedule 15.04.2019
comment
Вы же хотите изменить фон всей таблицы, верно? Вы пробовали использовать CSS?   -  person cdrini    schedule 15.04.2019
comment
Ваш JSFiddle очень сбивает с толку. Можете ли вы очистить его, чтобы он был ближе к вашему вопросу .. Помогите нам помочь вам ........   -  person Matt Oestreich    schedule 15.04.2019

Ответы (1)


arrow_upward
0
arrow_downward

Вы можете обойти это, стилизовав элемент вручную, но вы должны стилизовать один из их «внутренних» элементов (в отличие от компонента 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>
(based on https://buefy.org/documentation/table/ CodePen link for "Detailed row")

person cdrini    schedule 14.04.2019