vue.js - 在 v-data-table 标题中实现一个复选框

Question

我有一个 v-data-table，其中有带有复选框的行。我正在尝试在表格标题中实现一个复选框，其中选择该复选框将选择表格行中的整个复选框。

这是我的代码：

             <v-data-table
               v-model="model"
          styles="font-size:5px;"
          :headers="headers"
          :items="items"                      
          single-select
          :items-per-page="10"
           class="elevation-1"  hide-default footer   
   
        >
           <template slot="headers" slot-scope="props">
  <tr>
  <th> <v-checkbox  :input-value="props.all"> </v-checkbox> 
  </tr>

</template>
          <template v-slot:item="row" :activator="{ on, attrs }">
              <!-- <tr @click="highlightRow(item.item, item)">  -->
         <tr>
            <td>{{ row.item.DisplayValue }}</td>
             <td>
                    <label class="form-checkbox">
                        <input type="checkbox" :value="row.item.DataValue" v-model="preselected1" >
                        <i class="form-icon"></i>
                    </label>
                </td>
        <td>
                    <label class="form-checkbox">
                        <input type="checkbox" :value="row.item.DataValue" v-model="preselected2">
                        <i class="form-icon"></i>
                    </label>
                </td>       
         </tr>
          </template>              
       
          </v-data-table>

我确实尝试了https://vuetifyjs.com/en/components/data-tables/#row-selection的解决方案，但我想要实现的更像是：

在突出显示的地方需要复选框

任何有关实现这一目标的指针将不胜感激。

Answer 1

根据Vuetify 文档，您可以执行以下操作：

<v-data-table
    :headers="headers"
    :items="desserts"
    class="elevation-1"
  >
    <template v-slot:header.colWithCheckbox_1="{ header }">
      {{ header.text }}
      <v-checkbox v-model="headerCheckboxes.colWithCheckbox_1" />
    </template>
  </v-data-table>