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

Question

I am trying to add buttons for table rows without using a slot. I am trying to push buttons in the column I am sharing bellow:

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'}
]

From Template:

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

These buttons should pass current row id as well.

Answer 1

Here is some sample code from my project, this is how i do it.. let me know if you need more details..

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