How to use buttons with check box table in vue-good-table

Question

I'm using checkbox table in Vue-good-table. I tried to add buttons with the table, but when I click the button it's automatically selected the checkbox that related to the row. Here is my code for table

<vue-good-table
  mode="remote"
  :line-numbers="true"
  :search-options="{
    enabled: true,
    placeholder: 'Search this table',
    searchFn: searchTbl
  }"
  :select-options="{
    enabled: true,
    selectionInfoClass: 'table-alert__box'
  }"
  :pagination-options="{
    enabled: true,
    mode: 'records'
  }"
  style-class="tableOne vgt-table"
  :rows="rows"
  @on-selected-rows-change="selectionChanged"
  :columns="columns"
  @on-page-change="onPageChange"
  :total-rows="totalRecords"
  @on-sort-change="onSortChange"
  @on-column-filter="onColumnFilter"
  @on-per-page-change="onPerPageChange"
>
  <div slot="table-actions" class="mb-3">
    <b-button class="form-btn" type="submit" variant="success" @click="loadItems">Refresh</b-button>
  </div>
  <div slot="selected-row-actions" class="mb-3">
    <b-button variant="danger">Delete</b-button>
  </div>

  <template slot="table-row" slot-scope="props">
    <span v-if="props.column.field == 'button'">
      <a href @click.prevent="editRecord(props.row)">
        <i class="i-Eraser-2 text-25 text-success mr-2" />
        {{ props.row.button }}
      </a>
      <a href @click.prevent="confirmMsg(props.row)">
        <i class="i-Close-Window text-25 text-danger" />
        {{ props.row.button }}
      </a>
    </span>
  </template>
</vue-good-table>

that's bcoz your are using href="", so, can you use button element or dev element instead of a anchor tag. use `.stop` or `.self` instead of `.prevent` — Syed, Mar 31 '20 at 08:24

score 2 · Accepted Answer · answered Mar 31 '20 at 08:34

2

Stop the click event's propagation - use @click.stop="" instead of .prevent.

Can you use button element or dev element instead of a anchor tag because href="" can make the page reload.

answered Mar 31 '20 at 08:34

Syed

15,657
13
120
154

Yes `@click.stop=""` is working and I have added href like this `href="javascript:void(0)"`. Now it's working prefectly. – Udara Herath Mar 31 '20 at 08:40

How to use buttons with check box table in vue-good-table

1 Answers1