Disable selection checkbox in Table based on column value
-
How can I enable/disable (or show/hide) the selection checkbox of a Table based on the value in one of the columns.
Since this column is automatically generated, I don’t know how to reference it.
Any suggestions would be welcome.
-
You can use a custom body slot for this.
<q-table title="Treats" :data="data" :columns="columns" row-key="name" :selected-rows-label="getSelectedString" selection="multiple" :selected.sync="selected" > <template v-slot:body="props"> <q-tr :props="props" v-if="!hasDefaultSlot"> <q-td auto-width v-if="selection_prop!='none'"> <q-checkbox v-if="props.row['fat']!='6' && props.row['fat']!='16'" color="primary" v-model="props.selected"/> </q-td> <q-td v-for="col in props.cols" :key="col.name" :props="props" > {{ props.row[col.field] }} </q-td> </q-tr> </slot> </template> </q-table>
-
Thanks for the example.
This does work for hiding ( or disabling) the check box, but appears to break selection. Selecting the checkbox in the header row (Select All) appears to included rows where the checkbox is hidden/disabled. Any tips on short circuiting the selection process?
Not sure I understand the purpose of
v-if="!hasDefaultSlot" or v-if=“selection_prop!=‘none’”In the referenced CodePen, both of these directives show a warning in the console.
[Vue warn]: Property or method ‘hasDefaultSlot’ is not defined on the instance but referenced during render
[Vue warn]: Property or method ‘selection_prop’ is not defined on the instance but referenced during render -
@mshillinger the warning explains it, you don’t have those properties defined.
-
@mshillinger You need to handle the selection separately.