Javascript 引导Vue表：使用每行中的每个“显示详细信息”按钮显示不同的详细信息

我有一个表，其中一行将包含多个“更多详细信息”按钮，单击该按钮可展开以显示有关该行的其他信息。基本上，对于同一行，如果单击第一个“更多详细信息”按钮，我想显示信息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>

---

bootstrap vue

是一个多功能库。一种解决办法可以是：

newvue({
el:“应用程序”，
数据（）{
返回{
字段：[“名字”、“姓氏”、“显示详细信息”]，
详细信息任务：[]，
项目：[{
是的，
年龄:40,，
名字：“迪克森”，
姓：“麦克唐纳”
},
{
I：错，
年龄:21岁，
名字：“拉森”，
姓：“肖”
},
{
I：错，
年龄:89，
名字：“日内瓦”，
姓：“威尔逊”，
//_showDetails:正确
},
{
是的，
年龄:38，
名字：“Jami”，
姓：“卡尼”
}
]
}
},
方法：{
toggleRowDetails（行、数据）{
this.detailsMask=data.split（'，'））
row.toggleDetails（）
}
}
})

{{row.item.first_name}
{{row.detailsShowing？'Hide'：'Show'}Age
{{row.Details显示？'Hide'：'Show'}详细信息
{{detail}}:{{row.item[detail]}

您使用的是v-data-table吗？您能在定义表格的地方添加代码吗？您如何尝试显示更多信息？是通过弹出窗口吗？@JavierHeisecke，我正在使用，为表格添加了代码。当您搜索（显示详细信息）按钮时，我试图以下拉列表的形式显示信息（类似于此处：）。

      <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>