【发布时间】: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