Bootstrap Vue table 中的语法问题，PUG 模板中的作用域插槽

Question

根据 Bootstrap Vue table 文档，可以自定义呈现数据。

https://bootstrap-vue.org/docs/components/table#scoped-field-slots

示例显示以下模板：

<template v-slot:cell(index)="data">
  {{ data.index + 1 }}
</template>

我正在使用 PUG 作为模板语言，但我在使用它的语法时遇到了一些问题。我没有找到 "translate" 上述示例到 PUG 语法的正确方法。

这行不通，因为有冒号：

template(v-slot:cell(index)="data") {{ data.index + 1 }}

这似乎也不正确：

template(v-slot(cell(index)="data")) {{ data.index + 1 }}

更新#1

这是我的字段定义：

  fields: [
    "index",
    {
      key: "name",
      label: this.$t("document.name"),
      sortable: true
    }
  ]

这是模板：

b-table#filesList(
  v-if="list.length > 0"
  :items="list"
  :fields="fields"
  stacked="md"
  striped
  responsive
)
  template(v-slot:cell(index)="data") {{ data.index + 1 }}

这只显示一个空的 "Index" 列。如果我将模板更改为已弃用的 slot 和 slot-scope synctax，它会起作用：

template(slot="index" slot-scope="data") {{ data.index + 1 }}

Answer 1

这是您提供的 link 中代码示例的哈巴狗“翻译”。

我以前没有用过哈巴狗，但下面的代码看起来可以在 codepen.

中使用

由于您需要虚拟字段，因此您需要为 b-table 上的 fields 属性提供一个 fields 数组。这包括您要显示的所有字段。

b-table(small, :fields="fields", :items="items", responsive="sm")
  template(v-slot:cell(index)="data") {{ data.index + 1 }}

  template(v-slot:cell(name)="data")
    b.text-info {{ data.value.last.toUpperCase() }},
    b {{ data.value.first }}

  template(v-slot:cell(nameage)="data") {{ data.item.name.first }} is {{ data.item.age }} years old

  template(v-slot:cell()="data") 
    i {{ data.value }}

更新

以上语法要求 Bootstrap 版本 2.0.0 及以上。

2.0.0-rc.28 的 table 插槽命名（仅此版本）。是 [field]，HEAD[field] 和 FOOT[field]。

在版本 2.0.0-rc.27 及以下的字段中，HEAD_field、FOOT_field。

如果您使用的是低于该版本的版本，我建议您尽可能进行更新，以获得最新的功能和修复。但如果你不能，你可以改为克隆 github repo 并为你正在使用的版本生成文档。这将允许您查看当时可用的内容，并避免将来出现混淆。

Bootstrap Vue table 中的语法问题，PUG 模板中的作用域插槽

Syntax problem in Bootstrap Vue table with scoped slot in PUG template

vue.js

pug

bootstrap-vue

更新#1

更新