bootstrap-vue - 使用范围槽的引导 vue 表组件中的自定义列

Question

我正在尝试使用作用域插槽在引导 vue 表组件中添加自定义列，但没有任何反应。我看过一些例子并做了同样的事情。

查看字段报告和测试

<b-table v-if="ShowSpinner != true && SearchReportModel.ResultModel.Success == true" class="mt-5" 
striped hover :items="SearchReportModel.ShortReportModelList" :fields="fields">
                <template v-slot:cell(Report)="data">                    
                        <b-button>{{data.item.Originator}}Rad</b-button>                   
                </template>
                <template v-slot:cell(test)="data">                  
                    <!--{{data.ShortReportModel.Id}}--><p>Test</p>               
                </template>
            </b-table>

<script>
    import '../styles/scss/_report-search.scss'
    import '../styles/scss/_main-text.scss'

    export default {
        name: 'ReportSearch',

        data: function () {
            return {
                fields: [
                    'Id',
                    'RecordType',
                    'Originator',
                    'DateOpened',
                    'Title',
                    'Report',
                    { key: 'test', label: 'testlabel'}

                ],

标签： bootstrap-vue