VueJS Bootstrap-Vue b-table - Флажок для всех и текущих предметов? - PullRequest
Новая
       15

VueJS Bootstrap-Vue b-table - Флажок для всех и текущих предметов?

0 голосов
/ 24 октября 2018

Я использую b-таблицу начальной загрузки с компонентом b-pagination (https://bootstrap -vue.js.org / docs / components / table / ).У меня это загружает ~ 50 элементов на страницу, и в каждой строке есть флажок b-form.Мне не удалось выполнить следующее:

1) Сопоставление флажков элемента строки со значением основного флажка «selectAll» в заголовке таблицы.Единственный способ, которым я знаю, как это сделать, - это пройти ВСЕ пункты и установить все в true, но я не хочу делать это со всеми элементами.Я только хочу, чтобы это было сделано в текущем списке элементов на странице.Это также необходимо, когда вы фильтруете и отображаете только 10 элементов, SelectAll должен выбирать только те 10 элементов, а не 11K элементов, которые не отображаются.

2) Как получить список элементов наcurrentPage (нумерация страниц) таблицы?Как вы инициализируете флажок, основанный на индексе b-таблицы?

В настоящее время это мой код: 

<b-table 
  striped 
  hover 
  small 
  outlined 
  :items="schools" 
  :fields="fields"
  :per-page="perPage"
  :current-page="currentPage"
  :total-rows="totalRows"
  :sort-by.sync="sortBy"
  :sort-desc.sync="sortDesc"
  @filtered="onFiltered"
>
  <template slot="HEAD_selected" slot-scope="data">
    <b-form-checkbox @click.native.stop @change="select" v-model="allSelected">
    </b-form-checkbox>
  </template>

  <template slot="selected" slot-scope="data">
    <b-form-checkbox @click.native.stop :value="data.item.schoolId" :checked="allSelected" v-model="selected">
    </b-form-checkbox>
    {{data.index}}
  </template>
</b-table>
<b-pagination size="md" :total-rows="totalRows" v-model="currentPage" :per-page="perPage">
</b-pagination>

Я знаю, если бы я только перебрал массив "schools", который мог бы установитьфлажки.Но я не знаю, какие из них показываются на странице, и я не хочу, чтобы какие-либо флажки "отмечались", если они не отображаются.

Возможно, есть способ установить флажок в true на основе индекса b-таблицы строки?Могу ли я пройтись по элементам на странице и установить флажок в true?Через какой объект я зацикливаюсь?

1 Ответ

0 голосов
/ 25 октября 2018

Ознакомьтесь с разделом v-model Binding в документации.Переменная, связанная с реквизитом v-модели, будет содержать мелкую копию отображаемых элементов.Вы можете изменить свойства этой мелкой копии, и это изменит элементы в вашем массиве элементов.

...