boostrap-vue table action on click

Question

I have a table in Vue.js having data and I would like to add some "action click" into the last cell.

About boostrap-table

This is my table template:

<BootstrapTable :columns="table.columns" :data="table.data" :options="table.options"  v-if="table.ready">

And the data:

this.table = {
   ready: false,
   columns: [
               {
                field: 'id',
                title: 'id',
                visible: true
               },
                {
                field: 'test',
                title: 'test',
                visible: true,
                formatter: addClicks(this)
               },
               ...
  ]}

[edit]

I would like something like this but, obviously, this is not rendered:

...
formatter: function (value, row) {
   const ve = "<span @click='setElement("+row.id+")' class='btn btn-success btn-sm'>Set</span>";
   return ve;
}

How should I do that to have my action on click?

Answer 1

You can trigger OnClickCell event from bootstrap-vue table

Evebt: onClickCell jQuery Event: click-cell.bs.table

Parameter: field, value, row, $element

Detail:

Fires when user click a cell, the parameters contain:

field: the field name corresponding to the clicked cell. value: the data value corresponding to the clicked cell. row: the record corresponding to the clicked row. $element: the td element.