在 v-data-table 标题中实现复选框

如何解决在 v-data-table 标题中实现复选框

我有一个 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 中的解决方案，但我试图实现的目标更像是：

Need checkbox in highlighted places

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

解决方法

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

<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>