Bootstrap-Vue переключатель развернуть строку таблицы - PullRequest
Новая
       8

Bootstrap-Vue переключатель развернуть строку таблицы

0 голосов
/ 07 февраля 2019

Это, кажется, остается без ответа, так что вот еще одна попытка решения.

В настоящее время в bootstrap-vue я рендеринг b-table.Я хотел бы улучшить это, имея возможность выбрать строку и свернуть / развернуть дополнительный div / row / etc, чтобы показать дополнительную информацию.

В следующем фрагменте вы увидите, что я пытаюсь.Проблема в том, что я не могу получить расширенные данные, чтобы охватить количество столбцов в таблице.Я попытался добавить <tr><td colspan="6"></td></tr>, но, похоже, он не соответствует ожидаемому.Есть ли обходные пути для этого?Спасибо. 

<b-table
    :items="case.cases"
    :fields="tableFields"
    head-variant="dark">
    <template
        slot="meta.status"
        slot-scope="data">
    <b-badge
        v-b-toggle.collapse1
        :variant="foobar"
        tag="h6">
        {{ data.value }}
    </b-badge>
    </template>
    <template
        slot="@id"
        slot-scope="data">
        <span
            v-b-toggle.collapse1>
            {{ data.value }}
        </span>
        <b-collapse id="collapse1">
            Collapse contents Here
        </b-collapse>
    </template>
</b-table>`

Ответы [ 2 ]

0 голосов
/ 13 июля 2019

Звучит так, как если бы вы могли использовать слот Row Details :

Если вы хотите дополнительно отображать дополнительную информацию о записи (например, столбцы, не указанные в массиве определения полей), вы можете использовать область видимости row-details

<b-table :items="case.cases" :fields="tableFields" head-variant="dark">
  <template slot="meta.status" slot-scope="data">
    <b-button @click="data.toggleDetails">
        {{ data.value }}
    </b-button>
  </template>
  <template slot="row-details" slot-scope="data">
    <b-button @click="data.toggleDetails">
        {{ data.detailsShowing ? 'Hide' : 'Show'}} Details }}
    </b-button>
    <div>
       Details for row go here.
       data.item contains the row's (item) record data
       {{ data.item }}
    </div>
  </template>
</b-table>

Хороший пример в документах: https://bootstrap -vue.js.org / docs / components / table #строка-подробности-поддержка

0 голосов
/ 03 апреля 2019

У меня (кажется) была та же проблема, и я нашел решение, которое использует функциональность фильтрации bootstrap-vue <b-table> для достижения эффекта расширения и свертывания строк.

Естьминимальный пример в JSFiddle здесь:

https://jsfiddle.net/adlaws/mk4128dg/

В основном вы предоставляете древовидную структуру для таблицы следующим образом: 

[
    {
        columnA: 'John', columnB:'Smith', columnC:'75',
        children:
        [
            { columnA: 'Mary', columnB:'Symes', columnC:'46' },
            { columnA: 'Stan', columnB:'Jones', columnC:'42' },
            { columnA: 'Pat', columnB:'Black', columnC:'38' },
        ]
    }
]

Затем дерево "сплющивается""к строкам, которые могут отображаться в таблице методом _flattenTreeStructure().Во время этого процесса строки также аннотируются некоторыми дополнительными свойствами для уникальной идентификации строки, хранения глубины строки (используемой для отступа), родительской строки строки (если есть) и того, развернута ли строка в настоящее время или нет..

Как только это будет сделано, уплощенная структура может быть передана <b-table>, так как это всего лишь массив строк - это делается через свойство compute d flattenedTree.

Основная работа теперь выполняется методом _filterFunction(), который обеспечивает настраиваемую фильтрацию таблицы.Он работает с состоянием свойства expandedRowIndices элемента данных filterObj.

При нажатии кнопок раскрытия / сворачивания индекс строки (заполняемый в процессе выравнивания) вставляется в качестве ключав expandedRowIndices с true или false, указывающим его текущее расширенное состояние.

_filterFunction() использует это для «отфильтровывания» строк, которые не развернуты, что приводит к эффекту расширения /сворачивание дерева в таблице.

ОК, так что это работает (ууу!), но ...

  • это не так гибко, как база <b-table>;если вы хотите отобразить разные столбцы данных, вам нужно будет поработать и заново выполнить разделы <template slot="???"> для столбцов, как требуется.
  • , если вы хотите использовать фильтрацию для фильтрации content (например, с помощью текстового поиска) вам необходимо расширить функцию пользовательского фильтра, чтобы учесть это также
  • сортировка данные не являютсячто-то, что я должен был сделать для своего варианта использования, и я не уверен, как это будет работать в контексте древовидной структуры - поддержание родительских / дочерних отношений дерева при изменении порядка строк будет ... забавнои я подозреваю, что это было бы хорошей задачей для тех, кто не так беден, как я.;)

В любом случае, я надеюсь, что это кому-то пригодится.Я довольно новичок в Vue.js, так что, возможно, есть лучший способ приблизиться к этому, но он сделал ту работу, которая мне была нужна.

...