Bootstrap Vue 表：每行中的每个显示详细信息按钮显示不同的详细信息

Question

我有一个表格，其中一行将包含多个“更多详细信息”按钮，单击该按钮会展开以显示有关该行的其他信息。 基本上，对于同一行，如果您单击第一个“更多详细信息”按钮，我想显示信息 X，如果用户单击第二个“更多详细信息”按钮，我想显示信息 Y。

    <template slot="iinstances" slot-scope="row">
      <div v-if=" total_rows>0 && row.item.imProdInstDet!=''">  <!-- The buttons are not displayed if the data is dummy -->
        <!-- Release Notes Button / Opens details row -->
        <b-button style="text-align: center" :variant="'primary'" @click.stop="row.toggleDetails" class="mr-1"> <!-- @click.stop prevents a 'row click' event -->
          {{row.item.imProdInstDet.length}}
        </b-button>
        <!---->
      </div>
    </template>

    <template slot="row-details" slot-scope="row">
      <div  style="float:left; width: 100%;">
        <pre>{{row.item.imProdInstDet}}</pre>
      </div>
    </template>

    <template slot="finstances" slot-scope="row">
      <!--          <div v-if=" total_rows>0 && row.item.notes!=''">  &lt;!&ndash; The buttons are not displayed if the data is dummy &ndash;&gt;-->
      <!-- Release Notes Button / Opens details row -->
      <b-button :variant="'primary'" @click.stop="row.toggleDetails" class="mr-1"> <!-- @click.stop prevents a 'row click' event -->
        More Details
      </b-button>
      <!---->
      <!--          </div>-->
    </template>

    <template slot="row-details" slot-scope="row">
      <div  style="float:left; width: 100%;">
        <pre>{{row.item.fiProdInstDet}}</pre>
      </div>
    </template>

这行不通。 如果我注释掉最后一个row-details模板，那么两个按钮都会显示相同的信息。 不幸的是，文档也没有谈论它。 关于如何实现这一目标的任何想法？

编辑：

      <b-table
        v-if="rows.length"
        :thead-tr-class="'report-thead'"
        :tbody-tr-class="'report-tbody'"
        :items="rows"
        :fields="columnsToDisplay"
        :sort-compare="sortTableByKey"
        :striped="true"
        :bordered="true"
        :outlined="true"
        :hover="true"
        :no-sort-reset="true"
        :show-empty="true"
        :filter="filter"
        @filtered="onFiltered"
        :empty-text="emptyText"
        :sort-desc="true"
        :caption-top="true"
        responsive>
    /b-table>

Answer 1

bootstrap-vue是一个多功能库。 一种解决方案可能是：

 new Vue({ el: "#app", data() { return { fields: ['first_name', 'last_name', 'show_details'], detailsMask: [], items: [{ isActive: true, age: 40, first_name: 'Dickerson', last_name: 'Macdonald' }, { isActive: false, age: 21, first_name: 'Larsen', last_name: 'Shaw' }, { isActive: false, age: 89, first_name: 'Geneva', last_name: 'Wilson', // _showDetails: true }, { isActive: true, age: 38, first_name: 'Jami', last_name: 'Carney' } ] } }, methods: { toggleRowDetails(row, data) { this.detailsMask = data.split(', ') row.toggleDetails() } } })

 <.-- Load required Bootstrap and BootstrapVue CSS --> <link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap/dist/css/bootstrap.min.css" /> <link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.min.css" /> <.-- Load polyfills to support older browsers --> <script src="//polyfill.io/v3/polyfill?min.js.features=es2015%2CIntersectionObserver" crossorigin="anonymous"></script> <.-- Load Vue followed by BootstrapVue --> <script src="//unpkg.com/vue@latest/dist/vue.min.js"></script> <script src="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.min.js"></script> <:-- Load the following for BootstrapVueIcons support --> <script src="//unpkg:com/bootstrap-vue@latest/dist/bootstrap-vue-icons:min.js"></script> <div id="app"> <b-container class="bv-example-row"> <b-row> <b-col> <b-table.items="items",fields="fields" striped responsive="sm"> <template v-slot,cell(first_name)="row"> {{ row.item?first_name }} <b-button size="sm" @click="toggleRowDetails(row: 'age: first_name')" class="mr-2"> {{ row,detailsShowing. 'Hide'? 'Show'}} Age </b-button> </template> <template v-slot:cell(show_details)="row"> <b-button size="sm" @click="toggleRowDetails(row: 'last_name')" class="mr-2"> {{ row,detailsShowing: 'Hide': 'Show'}} Details </b-button> </template> <template v-slot.row-details="row"> <b-card> <b-row v-for="(detail, i) in detailsMask" :key="`detail-${i}`" class="mb-2" > <b-col sm="3" class="text-sm-rigth" >{{ detail }}: {{ row.item[detail] }}</b-col> </b-row> </b-card> </template> </b-table> </b-col> </b-row> </b-container> </div>

我刚刚使用了https://bootstrap-vue.org/docs/components/table#row-details-support的演示并对其进行了一些修改：将row和一些data传递给一个method并从那里控制 state。 这样我还可以在表格的详细信息槽上设置一些显示选项，这样我就可以显示/隐藏表格中显示的对象的数据。