Блог

больше добавить нечего, кроме названия. я хочу добавить пользовательский столбец в q-таблицу квазара (laravel / vue3), в которой будут выполняться действия по редактированию / удалению строк

1. Определите новый столбец в columns массиве

 columns: [
  // ... other columns
  { name: 'actions', label: 'Action' }
]
 

2. Используйте body-cell-name слот для отображения кнопок для этого нового столбца

 <q-table
  title="Treats"
  :rows="rows"
  :columns="columns"
  row-key="name"
>
  <template v-slot:body-cell-actions="props">
    <q-td :props="props">
      <q-btn icon="mode_edit" @click="onEdit(props.row)"></q-btn>
      <q-btn icon="delete" @click="onDelete(props.row)"></q-btn>
    </q-td>
  </template>
</q-table>
 

ДЕМОНСТРАЦИЯ