Question

我使用的是“ bootstrap-vue”版本：“ 2.0.0-rc.11”，我不知道为什么表中的页脚不起作用。我尝试了文档示例，但对我而言不起作用。

我的代码：

<!-- TEST 1 -->
<b-table id="my-table" hover striped small outlined :items="items" :fields="fields" class="mt-0 mb-0">
    <template v-slot:custom-foot>
        <tr>
            <td class="bg-dark text-white">
                TEST 1
            </td>
        </tr>
    </template>
</b-table>

<!-- TEST 2 -->
<b-table id="my-table" hover striped small outlined :items="items" :fields="fields" class="mt-0 mb-0">
    <template v-slot:cell(name)="data">
        TEST 2
    </template>
</b-table>

data() {
    return {
    fields: [
        { key: 'name', label: 'Full Name' },
        { key: 'age', label: 'Age' },
        { key: 'sex', label: 'Sex' }
    ],
    items: [
        { name: 'John', sex: 'Male', age: 42 },
        { name: 'Jane', sex: 'Female', age: 36 },
        { name: 'Rubin', sex: 'Male', age: 73 },
        { name: 'Shirley', sex: 'Female', age: 62 }
    ]
    }
}

它根本不显示页脚。

Answer 1

您面临的问题与所使用的版本有关。

custom-foot插槽是2.0.0发行版中引入的，在rc版本中不可用。

您的TEST 2示例也是如此。 2.0.0中介绍了您在此处使用的广告位语法。

在版本[field]中，它是HEAD[field]，FOOT[field]和2.0.0-rc.28。（并且仅此版本）。

在2.0.0-rc.27版及其以下的是field，HEAD_field，FOOT_field。

我建议您考虑升级版本，以获取最新的功能和修复，因为您当前使用的版本已经很老了。

介于最新版本和正在使用的版本之间的唯一主要补丁是2.0.0版本，其中引入了一些重大更改。

可以使用migration guide来避免出现太多问题。

如果您不想/不能升级。您可以克隆git repository并在您的计算机上本地生成所用版本的文档。这样，文档中的信息将与您的版本匹配，以避免混淆。

如果您需要在线访问它，甚至可以将其上传到自己的主机。

不显示b表中的页脚-Bootstrap-vue

1 个答案: