如何禁用 b-table 中整列的行单击事件？

Question

使用 bootstrap-vue 组件 b-table 我正在使用 @row-clicked 事件 link 到另一个页面。问题出现在我添加复选框的行中。我能够禁用复选框的行单击事件，但该列的其余部分仍然 links 到另一页。因此，如果用户在选择带有复选框的行时误点击了一点，他们就会被带到另一个页面。 b-table 是 vue-component.

的一部分

所以我的问题是如何为 b-table 的整个列禁用 @row-click 事件，而不仅仅是为列中的复选框禁用？

这是我的table。我一直在到处扔 @click.native.stop 试图解决这个问题。 template slot=" " 是带有复选框的列。我试图禁用一段文本并且文本本身是可点击的而不触发行事件但是框中的空 space 确实触发了行点击事件。

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

Answer 1

有趣的是，BootstrapVue 似乎并没有直接给你你点击的列。您可以通过在事件 ^(mdn) and Node.previousSibling ^(mdn).

上使用 srcElement 从实际的 MouseEvent 中检索它

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

如何禁用 b-table 中整列的行单击事件？

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

vue.js

bootstrap-vue