Question

我正在使用Vue-good-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>

Answer 1

停止点击事件的传播-使用@click.stop=""而不是.prevent。

您可以使用button元素还是dev元素而不是a锚标记，因为href =“”可以重新加载页面。

如何在vue-good-table中的复选框表中使用按钮

1 个答案: