Блог

Я попытался настроить заголовок таблицы данных vuetify с помощью слота. Я отключил заголовок по умолчанию и создал новый заголовок v-slot:header . Проблема в том, что если я создам новый заголовок, нет флажка, который поддерживает функциональность toggleSelectAll. Код приведен ниже.

 <template
  v-slot:header="{ props: { headers } }"
>
  <thead>
    <tr>
      <th v-for="header in headers" :key="header.value">
        <v-simple-checkbox
          color="purple"
          v-if="header.value === 'data-table-select'" 
        ></v-simple-checkbox>
        <span v-else>{{header.text}}</span>
      </th>
    </tr>
  </thead>
</template>
  

И вот ссылка на Codepen.
https://codepen.io/em0809/pen/gOrJGjJ

Я хочу добавить функциональность toggleSelectAll к простому флажку выше. Я пробовал v-slot:header.data-table-select , но это не работает.

Итак, пожалуйста, помогите мне с этим, если у вас есть опыт.

Спасибо.

Вы можете достичь этого за 1 шаг:

• Добавить @input="on['toggle-select-all']" в свой v-simple-checkbox .

 <template #header="{ props, on }">
  <thead>
    <tr>
      <th v-for="header in props.headers" :key="header.value">
        <v-simple-checkbox
          v-if="header.value === 'data-table-select'"
          v-model="props.everyItem"
          :indeterminate="props.someItems amp;amp; !props.everyItem"
          color="purple"
          @input="on['toggle-select-all']"
        ></v-simple-checkbox>
        <span v-else>{{ header.text }}</span>
      </th>
    </tr>
  </thead>
</template>
  

#header перезаписать #header.data-table-select , когда оба они используются.

Вы можете достичь этого за 4 шага:

1. Добавьте ref в свой компонент v-data-table
2. Передайте дополнительные реквизиты v-data-table в слот заголовка
3. Настройте свой v-model (и indeterminate поддержите, если необходимо)
4. Создайте метод «selectAll», который должен вызываться toggleSelectAll по ссылке

Пример кода показан ниже:

 <v-data-table
    ref="table"
    :value="selected"
    :items-per-page="itemsPerPage"
    :headers="headers"
    :items="desserts"
    item-key="name"
    show-select
    class="elevation-1"
    hide-default-header
    >
        <template v-slot:header="{ props: { headers, ...props } }">
            <thead>
                <tr>
                    <th v-for="header in headers" :key="header.value">
                        <v-simple-checkbox
                            v-model="props.everyItem"
                            :indeterminate="props.someItems amp;amp; !props.everyItem"
                            color="purple"
                            v-if="header.value === 'data-table-select'" 
                            @input="selectAll"
                        ></v-simple-checkbox>
                        <span v-else>{{header.text}}</span>
                    </th>
                </tr>
            </thead>
        </template>
</v-data-table>
...
methods: {
    selectAll(val) {
        this.$refs.table.toggleSelectAll(val)
    }
}
...