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

【问题标题】：q-table - inser action button for each row (Quasar 2)q-table - 每行的插入操作按钮（Quasar 2）
【发布时间】：2021-11-21 17:38:51
【问题描述】：

除了标题之外没有什么可添加的了。我正在寻找将自定义列添加到 quasar q-table (laravel / vue3) 将保存行编辑/删除操作

【问题讨论】：

标签： vue.js vuejs3 quasar

【解决方案1】：

在columns 数组中定义一个新列

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

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

【讨论】：

先生！正是我需要的。我们同时从 vue2 / bootstrap 到 vue3 / quasar / typescript。非常值得花时间和精力，但是......一次很多