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 并从那里控制状态。这样我还可以在表格的详细信息槽上设置一些显示选项，这样我就可以显示/隐藏表格中显示的对象的数据。