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

Question

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

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

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

<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

有趣的是，Bootstrap Vue 似乎并没有直接给你你点击的列。您可以通过在事件 ^{上使用 srcElement 从实际的 MouseEvent 中检索它 (mdn)} 和 Node.previousSibling ^(mdn) .

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