Vuetify-DataTable Header 實作全選/全不選

使用v-slot情境下 實作show-select功能

實作資料表的全選/全不選，如果沒有用到v-slot的話，可以參考 Vuetify 的 show-select。

Data table component - Vuetify

這樣的情境很容易實作。

如果是簡易的 checkbox，可以參考 Vuetify 的 Simple checkbox。

Data table component - Vuetify

在實作上，會發現與 show-select 不同之處在於多了 v-slot。
筆者實作的連結：

Vuetify - Playground

可以注意到左上方 Exclusive，與 show-select 的 checkbox 不同。

實作情境

1.需要用到 v-slot
2.希望維持header一樣是checkbox，且具備全選/全不選的功能

針對這樣的情境，參考以下的程式碼：

<template v-slot:[`header.${headers[0].value}`]="{ header }">
  <div>
    <v-checkbox v-model="selectAll" @change="toggleSelectAll"></v-checkbox>
    <span>{{ header.text }}</span>
  </div>
</template>

這樣不影響下方 v-slot:body

<template v-slot:body="{ items }">
...
</template>

原本的 headers 功能(像是sort)不影響。