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

时间:2019-09-17 14:55:55

标签: bootstrap-vue

我正在尝试使用作用域插槽在bootstrap 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'}

                ],

0 个答案:

没有答案