【问题标题】:How to use buttons with check box table in vue-good-table如何在 vue-good-table 中使用带有复选框表的按钮
【发布时间】:2020-07-11 14:58:11
【问题描述】:

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

【问题讨论】:

  • 你能用.self代替.prevent吗?
  • @Syed 它正在重新加载整个页面
  • 那是因为您正在使用 href="",所以,您可以使用按钮元素或开发元素来代替锚标记。使用.stop 或.self 而不是.prevent

标签: vue.js vue-good-table


【解决方案1】:

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

你能用button元素或dev元素代替a锚标签吗,因为href=""可以使页面重新加载。

【讨论】:

  • 是的 @click.stop="" 正在工作,我添加了这样的 href href="javascript:void(0)"。现在它运行良好。
猜你喜欢
  • 1970-01-01
  • 2021-09-22
  • 2020-09-04
  • 2019-03-31
  • 2020-03-13
  • 2020-08-30
  • 2020-12-25
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多