bootstrap-vue数据表显示行详细信息问题

Question

试图获得与https://bootstrap-vue.js.org/docs/components/table#row-details-support相同的结果

我的代码：

<b-table ref="propertydata" striped hover 
                                    :items="datatable.items" 
                                    :fields="datatable.fields" 
                                    :current-page="datatable.currentPage" 
                                    :per-page="datatable.perPage"
                                    :filter="datatable.filter"
                                    :sort-by.sync="datatable.sortBy"
                                    :sort-desc.sync="datatable.sortDesc"
                                    :sort-direction="datatable.sortDirection"
                                    @filtered="onFiltered">

                                    <template slot="action" slot-scope="row">

                                        <!-- we use @click.stop here to prevent emitting of a 'row-clicked' event  -->
                                        <b-button size="sm" @click.stop="row.toggleDetails" class="mr-2">
                                           {{ row.detailsShowing ? 'Hide' : 'Show'}} Details
                                        </b-button>

                                    </template>

                                    <template slot="row-details" slot-scope="row">
                                        <b-card>
                                            <ul>
                                                <li v-for="(value, key) in row.item" :key="key">{{ key }}: {{ value}}</li>
                                            </ul>
                                        </b-card>
                                    </template>



                                </b-table>



                                <b-row>
                                    <b-col md="6" class="my-1">
                                        <b-pagination :total-rows="datatable.totalRows" :per-page="datatable.perPage" v-model="datatable.currentPage" class="my-0" />
                                    </b-col>
                                </b-row>



/* Datatable related */
                datatable: {
                    fields: [
                        {
                            key: 'account_id',
                            sortable: true
                        },
                        {
                            key: 'account_name',
                            sortable: true
                        },
                        {
                            key: 'property_count',
                            sortable: true,
                        },
                        {
                            key: 'commission',
                            sortable: true,
                            variant: 'success'
                        },
                        {
                            key: 'action',
                        }
                    ],
                    items: [],
                    currentPage: 1,
                    perPage: 20,
                    totalRows: 0,
                    pageOptions: [ 20, 100, 300, 500, 1000, 2000, 3000 ],
                    sortBy: null,
                    sortDesc: false,
                    sortDirection: 'asc',
                    filter: null
                }


computed: {

            sortOptions () {
                // Create an options list from our fields
                return this.datatable.fields
                .filter(f => f.sortable)
                .map(f => { return { text: f.label, value: f.key } })
            }

        }, // END COMPUTED

        methods: {

            onFiltered (filteredItems) {
                // Trigger pagination to update the number of buttons/pages due to filtering
                this.datatable.totalRows = filteredItems.length
                this.datatable.currentPage = 1
            }

        }, // END METHODS

结果是：

如您所见，显示详细信息被隔离到单个列而不是整行。

我想要实现的是，此显示详细信息部分为完整的行宽，如果我可以单击按钮转到一种方法，以调用要在此处显示的其他数据，而与本机自举功能相反。