q-table - 每行插入操作按钮 (Quasar 2)

Question

除了标题之外，无需添加更多内容。我希望向 quasar q-table (laravel / vue3) 添加一个自定义列，该列将保存行编辑/删除操作

Answer 1

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>

演示