问题描述
我已经成功使用了Boostrap-vue库中的b-table组件，但是现在我需要采取进一步的措施，我无法弄清。
一旦用户对表中的行进行排序和/或过滤，我需要提取前10行（或20行，或任何数量的行）以在地图中显示它们，因为每一行都包含一个地址。
如果我访问原始项目的数组，则行不会被过滤或排序。
现在，过滤和排序都是通过内置的过滤和排序过程完成的，因此也许我可以更改为自定义的方法，并且在这些方法中，可以将第-n-行添加到数组中。>
听起来不可行吗？还有其他我没想到的把戏吗？我想听听您如何解决或负担这项任务。
谢谢
我不确定代码是否可以在这种情况下提供帮助，因为我正在积极寻找解决方案，因为我没有任何解决方案。无论如何，这就是我定义表的方式。
<b-table
:busy="isBusy"
:items="listaContatti"
:fields="fields"
:sort-by.sync="sortBy"
:sort-desc.sync="sortDesc"
:filter="filter"
:filterIncludedFields="filterOn"
:filterIgnoredFields="filterOmit"
id="contatti"
primary-key="codice"
ref="selectableTable"
selectable
select-mode="single"
empty-text="Non trovati contatti"
empty-filtered-text="nessun contatto risponde ai criteri di ricerca"
show-empty
responsive
borderless
foot-clone
hover
outlined
small
striped
head-variant="dark"
table-class="table-vcenter"
sticky-header="1000px"
class="font-size-sm"
@filtered="onFiltered"
@row-selected="onRowSelected"
>
<!-- Busy table -->
<template v-slot:table-busy>
<div class="text-center text-danger my-2">
<b-spinner class="align-middle"></b-spinner>
<strong>Caricamento...</strong>
</div>
</template>
<!-- Empty table -->
<template v-slot:empty="scope" :show-empty="isEmpty">
<h4>{{ scope.emptyText }}</h4>
</template>
<!-- No rows selected -->
<template v-slot:emptyfiltered="scope">
<h4>{{ scope.emptyFilteredText }}</h4>
</template>
<!-- Index -->
<template v-slot:cell(index)="row">
{{ row.index + 1 }}
</template>
<!-- ATECO -->
<template v-slot:cell(ateco)="row"> {{ row.item.codiceAteco }} - {{ row.item.desAteco }} </template>
<!-- Available phone numbers -->
<template v-slot:cell(telefoni)="row">
{{ row.item.attivitaTel1 }},{{ row.item.attivitaTel2 }},{{ row.item.cellulare }}
</template>
<!-- Contact actions -->
<template v-slot:cell(actions)="row">
<!-- botton example
<b-button size="sm" @click="row.toggleDetails" class="mr-2">
{{ row.detailsShowing ? 'Nascondi' : 'Vedi' }} Dettagli
</b-button>
-->
<button
type="button"
class="btn-block-option"
block
v-b-tooltip.hover.bottom="'Dettagli'"
@click="row.toggleDetails"
>
<i class="si si-magnifier"></i>
</button>
</template>
<!-- Contact details -->
<template v-slot:row-details="row">
<b-card>
<b-row>
<b-col sm="3" class="text-sm-right"><b>Ateco:</b></b-col>
<b-col>{{ row.item.codiceAteco }} - {{ row.item.desAteco }}</b-col>
</b-row>
<b-row>
<b-col sm="3" class="text-sm-right"><b>Recapiti in azienda:</b></b-col>
<b-col><small>(email)</small> {{ row.item.attivitaEmail }}</b-col>
<b-col><small>(telefoni)</small> {{ row.item.attivitaTel1 }},{{ row.item.attivitaTel2 }}</b-col>
<b-col><small>(fax)</small> {{ row.item.attivitaFax }}</b-col>
</b-row>
<b-row>
<b-col sm="3" class="text-sm-right"><b>Azienda:</b></b-col>
<b-col><small>(forma)</small> {{ row.item.formaGiuridica }}</b-col>
<b-col><small>(natura)</small> {{ row.item.natura }}</b-col>
<b-col><small>(fatturato)</small> {{ row.item.classeFatturato }}</b-col>
</b-row>
<b-row>
<b-col sm="3" class="text-sm-right"><b>Note:</b></b-col>
<b-col>{{ row.item.note }}</b-col>
<b-col><small>(dipendenti)</small> {{ row.item.classeDipendenti }}</b-col>
</b-row>
<b-row>
<b-col sm="3" class="text-sm-right"><b>Ex-sponsor:</b></b-col>
<b-col
><span v-if="row.item.exSponsor"><i class="far fa-thumbs-up"></i></span
></b-col>
<b-col><small>(iniziativa precedente)</small> {{ row.item.iniziativaPrec }}</b-col>
<b-col><small>(data ordine)</small> {{ row.item.dataOrdine }}</b-col>
</b-row>
<b-row class="mb-1">
<b-col sm="3" class="text-sm-right"><b>Sito web:</b></b-col>
<b-col>{{ row.item.sitoWeb }}</b-col>
</b-row>
<!-- <b-button size="sm" @click="row.toggleDetails">Hide Details</b-button> -->
</b-card>
</template>
</b-table>
这是数据功能
data() {
return {
isBusy: true,sortBy: '',sortDesc: false,selectMode: 'multi',selected: [],filter: null,filterOn: [],filterOmit: [],totalFilteredRows: 0,filtriRichiesti: {},fields: [
// { key: 'index',label: 'Seq' },{ key: 'tipo',thStyle: 'width: 75px;',thClass: 'text-center',tdClass: 'text-center',sortable: true },{ key: 'codice',sortable: true,label: 'Codice' },{ key: 'cf',label: 'CF' },{ key: 'piva',label: 'P.Iva' },{ key: 'denominazione',{ key: 'ateco',label: 'ATECO' },{ key: 'indirizzo',{ key: 'frazione',{ key: 'cap',label: 'CAP' },{ key: 'comune',label: 'Comune' },{ key: 'provincia',label: 'Pr' },{ key: 'telefoni',label: 'Rec.telef.' },{ key: 'ultimoStato',label: 'Stato' },{ key: 'lat',label: 'Lat' },{ key: 'long',label: 'Long' },{ key: 'actions',label: '' }
]
}
}
项目列表listaContatti来自在服务器上调用REST API之后存储在其中的Vuex存储。
解决方法
迟到总比不到好，我希望——一种解决方案是使用自定义页脚。这使 showOnMap() 方法可以访问显示的表记录——在过滤、排序和分页之后：
<template v-slot:custom-foot="displayedTable">
<a @click="showOnMap(displayedTable.items)>Show On Map</a>
</template>
信用到期：[https://www.reddit.com/r/vuejs/comments/dliwwh/how_do_i_access_the_filtered_data_from_btable_in/]
Bootstrap Vue 文档：[https://bootstrap-vue.org/docs/components/table#creating-a-custom-footer]