q-table - 每行插入操作按钮（Quasar 2）

Question

除了标题之外没有更多要添加的内容。我正在寻找向类星体 q-table (laravel / vue3) 添加一个自定义列，它将保存行编辑/删除操作

Answer 1

1. 在 columns 数组中定义一个新列

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

2. 使用 body-cell-name slot 呈现此新列的按钮

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

Demo