Добавление второй строки заголовка в b-таблицу bootstrap-vue

У меня есть заголовок таблицы, который выглядит так:

заголовок таблицы

Я пытаюсь воссоздать эту таблицу в bootstrap-vue. Необработанный HTML выглядит так (упрощенно):

<table>
  <thead>
    <tr>
      <th></th>
      <th colspan="4">Group 1</th>
      <th colspan="4">Group 2</th>
      <!--etc-->
    </tr> 
    <tr>
      <th>Field</th>
      <th>Median</th>
      <!-- etc -->
    </tr>
  </thead>
  <tbody><!-- actual data --></tbody>
</table>

Основной код b-таблицы создаст вторую строку легко/автоматически. Я пытаюсь понять, как запихнуть туда 1-й ряд. В качестве небольшого кикера мне нужно иметь возможность контролировать содержимое двух имен групп (т. Е. Если они где-то меняют элемент управления, «Группа 1» становится «Группой Foo»).

Я сделал игровую площадку для всех, кому нужна отправная точка, чтобы помочь разобраться в этом: https://codesandbox.io/s/p56y3y2lnx Цель состоит в том, чтобы программно добавить 1-ю строку, которая включает group1name и охватывает ширину таблицы в одном colspan.


vuejs2 bootstrap-vue
person Ryley    schedule 24.07.2018    source источник
comment
У меня была одна идея — использовать событие (@input) в b-таблице для вставки дополнительной строки... но это в значительной степени противоречит Vue :)   -  person Ryley    schedule 24.07.2018
comment
использует slot=top-row может быть одним из вариантов , как эта песочница   -  person Sphinx    schedule 24.07.2018

Ответы (2)


arrow_upward
3
arrow_downward

Начиная с версии v2.0.0-rc.14 (выпущенной 08.03.2019) теперь вы можете добавлять дополнительные строки над заголовком, используя слот thead-top.

В вашем примере вы должны поместить следующий код внутри тега b-table:

  <template slot="thead-top" slot-scope="data">
    <tr>
      <th></th>
      <th colspan="3">Group 1</th>
      <th colspan="4">Group 2</th>
      <th colspan="4"></th>
    </tr>
  </template>

Вот ссылка на новую функцию: https://bootstrap-vue.js.org/docs/components/table/#adding-additional-rows-to-the-header

person John Shipp    schedule 27.03.2019
comment
Спасибо, Джон. Кажется, я уговорил автора добавить эту функцию но я пока не могу обновиться до этой версии... Но в дальнейшем ваше решение определенно правильное! - person Ryley; 28.03.2019
comment
@Ryley: Спасибо, что добавили эту функцию! Я использовал его сейчас пару раз. - person John Shipp; 17.04.2019

arrow_upward
2
arrow_downward

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

На b-table вы можете добавить событие input, поэтому я сделал это, чтобы узнать, когда таблица будет загружена.

HTML:

<b-table @input="tableLoaded" ref="table"></b-table>

то в моих методах:

tableLoaded() {
    if (!this.$refs.table) {
        return;
    }

    var headers = this.$refs.table.$el.querySelectorAll('thead tr');
    if (headers.length > 1) {
        return;//nothing to do, header row already created
    }

    var topHeader = document.createElement('tr');
    topHeader.innerHTML =
        '<th></th>'+
        '<th colspan="3">Group 1</th>'+
        '<th colspan="4">Group 2</th>'+
        '<th colspan="4"></th>';
    headers[0].parentNode.insertBefore(topHeader, headers[0]);
}

Я был бы рад принять более чистое решение.

person Ryley    schedule 30.07.2018