Сделать невидимым столбец Bootstrap-vue b-table 'Id'

У меня есть таблица bootstrap-vue (b-table) в данных, для которых я хочу сделать значение «Id» доступным для события позже, но которое я хочу скрыть от рендеринга таблицы.

Я думал, что нашел способ сделать это, привязав «Id» к row.key или row.index или другим подобным свойствам b-таблицы, но я нигде не могу этого найти.

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

Таблица выглядит так:

                <b-table show-empty responsive striped hover small outlined :stacked="stack"
                     :items="DisplayViewData"
                     :fields="fields"
                     :sort-by.sync="sortBy"
                     :sort-desc.sync="sortDesc">
                <template slot="select" slot-scope="data">
                    <b-form-checkbox v-model="data.item.IsSelected"/>
                </template>
            </b-table>

и поля определены следующим образом:

       fields: Array<any> = [
        {key: 'Id',},
        {key: 'LastName', sortable: true},
        {key: 'FirstName', sortable: true},
        etc.....
    ];

но это означает, что отображается столбец Id.

Есть ли способ сделать то, что я хочу, сделав столбец Id невидимым или назначив значение data.Id какому-либо другому контексту строк данных b-таблицы?


twitter-bootstrap vuejs2 bootstrap-4 bootstrap-vue
person Redeemed1    schedule 26.07.2018    source источник

Ответы (3)


arrow_upward
3
arrow_downward

Все, что вам нужно сделать, это не включать его в определение fields. Данные строки элемента все еще будут там и доступны через слоты с заданной областью из других полей.

Нет необходимости использовать классы CSS, чтобы скрыть столбец.

Чтобы получить доступ к значению через другой слот с областью действия полей (скажем, слот LastName):

<b-table :fields-"fields" :items="items" ... >
  <template slot="LastName" slot-scope="{ value, item }">
    <!-- value is the field value -->
    {{ value }}
    <!-- item is the entire row object -->
    <!--you can use it for actions on buttons, etc -->
    <b-button @click="doSomthing(item.Id)">{{ item.Id }}</b-button>
  </template>
</b-table>
person Troy Morehouse    schedule 09.07.2019

arrow_upward
6
arrow_downward

Мое быстрое решение для этого было бы таким:

fields: Array<any> = [
        {key: 'Id', thClass: 'd-none', tdClass: 'd-none' },
        {key: 'LastName', sortable: true},
        {key: 'FirstName', sortable: true},
        etc.....
    ];

Итак, для Id используйте thClass: 'd-none', tdClass: 'd-none'.

person latovic    schedule 26.07.2018
comment
Отредактированный ответ в соответствии с предложением @James A Mohler, определенно намного лучше использовать d-none, но все же идея такая же. - person latovic; 26.07.2018

arrow_upward
5
arrow_downward

Это похоже на ответ Латовича, но с использованием .d-none

fields: Array<any> = [
    {key: 'Id', thClass: 'd-none', tdClass: 'd-none' },
    {key: 'LastName', sortable: true},
    {key: 'FirstName', sortable: true},
    etc.....
];

Причина, по которой вы хотите использовать .d-none, заключается в том, что он уже встроен в Bootstrap 4.

См .: https://getbootstrap.com/docs/4.1/utilities/display/

person James A Mohler    schedule 26.07.2018