Checkbox Vuetify datatable选中所有禁用复选框
我对带有select行的数据表有问题。我有禁用复选框的行,但“全选”仍会选中它们。。。 这是虫子吗 我做了一个密码笔: 如何修复selectAll复选框仅选中可用复选框 模板:Checkbox Vuetify datatable选中所有禁用复选框,checkbox,datatable,vuetify.js,disable,selectall,Checkbox,Datatable,Vuetify.js,Disable,Selectall,我对带有select行的数据表有问题。我有禁用复选框的行,但“全选”仍会选中它们。。。 这是虫子吗 我做了一个密码笔: 如何修复selectAll复选框仅选中可用复选框 模板: <v-content> <v-data-table v-model="selected" :headers="headers" :items="desserts" item
<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>
在
v-data-table
组件上,您可以设置可选键
属性:
用于确定每个项目是否可选择的属性
如果未指定,则默认情况下使用isSelectable
。您可以创建一个计算属性,将此信息添加到您的甜点
属性中,如下所示:
计算:{
enrichedDesserts(){
返回这个.desserts.map(x=>({…x,isSelectable:x.carries
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: [...]
})