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

Question

I have a table in which a row would contain more than one "More Details" button, which when clicked expands to show additional information about the row. Basically, for the same row, if you click the first "More Details" button, I want to show information X and if the user clicks second "More Details" button, I want to show information 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>

This doesn't work. And if I comment out the last row-details template, then both the buttons show same information. Unfortunately, the documentation doesn't talk about it either. Any idea on how I can achieve this?

Edit:

      <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 is a versatile library. One solution could be:

 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>

I just used the demo for https://bootstrap-vue.org/docs/components/table#row-details-support and modified it a bit: passed the row and some data to a method and controlled the state from there. This way I could also set some display options on the details slot of the table, so I could show/hide the data from the objects displayed in the table.