在 PUG 模板中具有范围插槽的 Bootstrap Vue 表中的语法问题

Question

从 Bootstrap Vue 表格文档中，可以自定义呈现数据。

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

示例显示以下模板：

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

我使用 PUG 作为模板语言，但它的语法有些问题。我没有找到将上述示例“翻译”为 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 }}

这仅显示一个空的“索引”列。如果我将模板更改为已弃用的 slot 和 slot-scope 同步税，它就可以工作：

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

Answer 1

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

我以前没用过 pug，但是下面的代码看起来在这个 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 的表槽命名（仅此版本）。是 [field]、HEAD[field] 和 FOOT[field]。

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

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