bootstrap-vue 如何访问有序/过滤的行数据

Posted 2023-02-22

【中文标题】bootstrap-vue 如何访问有序/过滤的行数据

【英文标题】：boostrap-vue how to access ordered/filtered row data

【发布时间】：2020-12-10 16:05:16

【问题描述】：

我成功地使用了来自 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', sortable: true, label: 'CF' ,
         key: 'piva', sortable: true, label: 'P.Iva' ,
         key: 'denominazione', sortable: true ,
         key: 'ateco', sortable: true, label: 'ATECO' ,
         key: 'indirizzo', sortable: true ,
         key: 'frazione', sortable: true ,
         key: 'cap', sortable: true, label: 'CAP' ,
         key: 'comune', sortable: true, label: 'Comune' ,
         key: 'provincia', sortable: true, label: 'Pr' ,
         key: 'telefoni', sortable: true, label: 'Rec.telef.' ,
         key: 'ultimoStato', sortable: true, label: 'Stato' ,
         key: 'lat', sortable: true, label: 'Lat' ,
         key: 'long', sortable: true, label: 'Long' ,
         key: 'actions', label: '' 
      ]
    
  

项目列表 listaContatti 来自 Vuex 存储，它是在服务器上调用 REST API 后存储的。

【问题讨论】：

请分享一些codepen中的代码

【参考方案1】：

我希望迟到总比不到好——一种解决方案是使用自定义页脚。这使 showOnMap() 方法可以访问 显示的 表记录——在过滤、排序和分页之后：

<template v-slot:custom-foot="displayedTable">
  <a @click="showOnMap(displayedTable.items)>Show On Map</a>
</template>

信用到期：[https://www.reddit.com/r/vuejs/cmets/dliwwh/how_do_i_access_the_filtered_data_from_btable_in/]

引导 Vue 文档：[https://bootstrap-vue.org/docs/components/table#creating-a-custom-footer]