如何为类星体表中的每一行添加动态按钮

Question

我尝试在不使用插槽的情况下为表行添加按钮。我正试图按下我在下面分享的专栏中的按钮：

const columns = [
{
name: 'name',
required: true,
label: 'Member No.',
align: 'left',
field: row => row.name,
format: val => `${val}`,
sortable: true
},
{ name: 'short_name', align: 'left', label: 'Short Name', field: 'short_name', 
sortable:true},
{ name: 'address', align: 'left', label: 'Address', field: 'address', sortable:true},
{ name: 'ward_count', align: 'left', label: 'Ward No', field: 'ward_count', sortable:true},
{ name: 'bed_count', align: 'left', label: 'Bed No', field: 'bed_count'},
{ name: 'entry_by', align: 'left', label: 'Entry By', field: 'entry_by'}
]

来自模板：

<q-table
title="Treats"
:rows="rows"
:columns="columns"
row-key="id"
v-model:pagination="pagination"
:loading="loading"
:filter="filter"
@request="onRequest"
binary-state-sort
>
<template v-slot:top-right>
<q-input borderless dense debounce="300" v-model="filter" 
placeholder="Search">
<template v-slot:append>
<q-icon name="search" />
</template>
</q-input>
</template>
</q-table>

这些按钮也应该传递当前行id。

Answer 1

这是我的项目中的一些示例代码，我就是这样做的。如果您需要更多详细信息，请告诉我。。

<q-table  row-key="id" title :rows="arrData" :columns="arrColumns"
v-model:pagination="pagination" :filter="filter" @request="request" binary-state-sort   separator="cell" class="tableStyle outline">


<template v-slot:body-cell-your_button_column_name="props">
<q-td :props="props">
<q-btn round unelevated color="red" @click="onButtonClick(props.row.id)" label="Your Button Label"></q-btn>
</q-td>
</template>
</q-table>