3

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

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

这是我的桌子。我一直在到处扔@click.native.stop 试图解决这个问题。模板 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>
4

1 回答 1

0

有趣的是，Bootstrap Vue 似乎并没有直接给你点击的栏目。您可以通过使用srcElementEvent (mdn)和Node.previousSibling (mdn)从实际的 MouseEvent 中检索它。

onRowClicked(item, index, event) {
  const element = event.srcElement;
  const isFirstElement = !element.previousSibling;
  if (!isFirstElement) {
    this.$router.push('/mythingy');
  }
}
于 2018-07-16T19:46:28.867 回答