Vuetify 数据表选择所有禁用复选框答案

【问题标题】：Vuetify datatable select all with disabled checkboxesVuetify 数据表选择所有禁用复选框
【发布时间】：2020-07-31 22:08:52
【问题描述】：

我遇到了带有选择行的数据表的问题。我有已禁用复选框的行，但无论如何全选都会检查它们... 这是一个错误吗？

我做了一个codepen：https://codepen.io/slayerbleast/pen/jOWjzWJ

如何修复 selectAll 复选框只检查可用的复选框？

模板：

<v-content>
    <v-data-table
        v-model="selected"
        :headers="headers"
        :items="desserts"
        item-key="name"
        show-select
    >
    <template #item="{ item }">
        <tr>
            <td>
                <v-checkbox
                    :disabled="item.calories > 250"
                    class="pa-0 ma-0"
                    :ripple="false"
                    v-model="selected"
                    :value="item"
                    hide-details
                >
                </v-checkbox>
            </td>
            <td>{{item.name}}</td>
            <td>{{item.calories}}</td>
            <td>{{item.fat}}</td>
            <td>{{item.carbs}}</td>
            <td>{{item.protein}}</td>
            <td>{{item.iron}}</td>
        </tr>
    </template>
    </v-data-table>
</v-content>

数据：

data: () => ({
        selected: [],
            headers: [
          {
            text: 'Dessert (100g serving)',
            align: 'start',
            sortable: false,
            value: 'name',
          },
          { text: 'Calories', value: 'calories' },
          { text: 'Fat (g)', value: 'fat' },
          { text: 'Carbs (g)', value: 'carbs' },
          { text: 'Protein (g)', value: 'protein' },
          { text: 'Iron (%)', value: 'iron' },
        ],
        desserts: [...]
})

【问题讨论】：

标签： checkbox datatable vuetify.js disable selectall

【解决方案1】：

在v-data-table 组件上，您可以设置selectable-key 属性：

每个项目的属性，用于确定它是否可选择

如果没有指定，默认使用isSelectable。您可以做的是创建一个计算属性以将此信息添加到您的 desserts 属性中，如下所示：

computed: {
  enrichedDesserts() {
    return this.desserts.map(x => ({ ...x, isSelectable: x.calories <= 250 }));
  }
}

然后更改v-data-table 的items 属性：

<v-data-table :items="enrichedDesserts">

请参阅此Codepen 以获取工作示例。

【讨论】：