How to disable row-clicked events for an entire column in b-table?

3
votes

Working with the bootstrap-vue component b-table I am using the @row-clicked event to link to another page. The issue occurs in the row where i added checkboxes. I am able to disable the row-clicked event for the checkbox but the rest of the column still links to the other page. So if a user miss-clicks by a smidgen while selecting rows with the checkboxes they are brought to another page. The b-table is part of a vue-component.

So my question is how do i disable the @row-click event for an entire column of b-table instead of just for the checkbox in the column?

Here is my table. I have been throwing @click.native.stop everywhere trying to solve this. the template slot=" " is the column with the checkboxes. I attempted to disable a span of text and the text itself was clickable without triggering the row event but empty space in the box did trigger the row-clicked event.

<b-table ref="table" striped hover responsive foot-clone
      :items="values"
      :fields="fields"
      :filter="filter"
      :sort-by.sync="sortBy"
      :set-desc.sync="sortDesc"
      :per-page="perPage"
      :current-page="currentPage"
      @row-clicked="onRowClick"
      @filtered="onFiltered">
          <template slot=" "  v-on:click.stop="" @click.native.stop slot-scope="row">
              <b-form-checkbox @click.native.stop :value="row" block name="checkbox" size="lg"  @change="boxChecked(row)"></b-form-checkbox>
          </template>
          <span slot="url" slot-scope="data" v-html="data.value"> </span>
          <span slot="connected"  @click.native.stop v-on:click.stop="" style="height:100%; width:100%"slot-scope="data" v-html="data.value"></span>
          <span slot="enabled" slot-scope="data" v-html="data.value"></span>
          <span slot="powered" slot-scope="data" v-html="data.value"></span>
          <template slot="vlans.tagged" slot-scope="data">
                  <div v-for="tagged in data.item['vlans.tagged']">
                      {{tagged}}
                  </div>
          </template>
          <template slot="table-caption"> Total count {{totalRows}} </template>
  </b-table>
1
vue.jsbootstrap-vue

1 Answers

0
votes

Interestingly, Bootstrap Vue does not seem to directly give you the column you clicked on. You are able to retrieve it from the actual MouseEvent though using srcElement on the Event (mdn) and Node.previousSibling (mdn).

onRowClicked(item, index, event) {
  const element = event.srcElement;
  const isFirstElement = !element.previousSibling;
  if (!isFirstElement) {
    this.$router.push('/mythingy');
  }
}