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>
    

    Codepen - https://codepen.io/Pratik__007/pen/ZEGJpGa



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


Log in to reply