如何在此 BootstrapVue table 的列 header 中添加上标？

Question

我有一个 bootstrapvue table 看起来像这样；

这是代码；

<script>
  export default {
    data() {
      return {
        // Note 'isActive' is left out and will not appear in the rendered table
        fields: [
          {
            key: 'last_name',
            sortable: true
          },
          {
            key: 'first_name',
            sortable: false
          },
          {
            key: 'age',
            label: 'Person age',
            sortable: true,
            // Variant applies to the whole column, including the header and footer
            variant: 'danger'
          }
        ],
        items: [
          { isActive: true, age: 40, first_name: 'Dickerson', last_name: 'Macdonald' },
          { isActive: false, age: 21, first_name: 'Larsen', last_name: 'Shaw' },
          { isActive: false, age: 89, first_name: 'Geneva', last_name: 'Wilson' },
          { isActive: true, age: 38, first_name: 'Jami', last_name: 'Carney' }
        ]
      }
    }
  }
</script>

我想将第 3 列 header Person age 更改为上标，使其变为 Person age<sup>1</sup>

不幸的是，这不像在第 3 列 header 的标签内使用 HTML 那样容易。

我正在使用 vue v2.6 和 BootstrapVue。

Answer 1

您可以使用提供的 #head({key}) slot:

自定义 table header 的标记 (html)

<b-table>
  <template #head(age)="{ label }">
    {{ label }} <sup>1</sup>
  </template>
</b-table>

显然，您可以在其中放置任何内容，包括对该列的过滤器搜索等...都是动态的，连接到您的组件。

这里举几个例子：Header and Footer custom rendering via scoped slots.

Answer 2

最简单和最明显的小写解决方案：使用 Unicode 字符 U+00B9，SUPERSCRIPT ONE：¹。在许多情况下，这看起来与 HTML 等效的 ¹ 相当，并且在通过剪贴板复制时通常会显得更准确。 Unicode 提供 all digits and several useful mathematical symbols，至少与您需要的脚注和尾注一样多。

除此之外，Bootstrap Vue 允许您通过 table-specific scoped slots, which are an application of Vue's general concept of scoped slots (also available in Vue 3). As in the Vue documentation, I"m using the shorthand #head(age) instead of the equivalent full attribute v-slot 使用 HTML 覆盖特定单元格，如 v-slot:head(age).

<b-table :items="items" :fields="fields">
  <template #head(age)>
    Person age<sup>1</sup>
  </template>
</b-table>

为了避免在字段定义和自定义槽中重复“Person age”，或者更好地利用一般的 head() 和 foot() 回退应用于所有页眉和页脚单元格，您可以指定一个标识符，该标识符将采用槽上下文，定义为包含 field 和 label。这里我使用了context，但你可以随意命名；你也可以使用 destructuring, as in .

<b-table :items="items" :fields="fields">
  <template #head(age)="context">
    {{ context.label }}<sup>1</sup>
  </template>
</b-table>

fields 文档指出“任何添加到字段定义对象的附加属性都将保持不变”，所以我想如果这种情况对您来说很常见，您甚至可以添加自定义 field 对象属性（例如，note 或 superscript）然后渲染为 {{ context.label }}<sup v-if="context.field.note">{{ context.field.note }}</sup>.

Answer 3

我想回答我自己的问题，感谢@tao 的回答和他提供的link。这是对他的回答的轻微修改。

https://bootstrap-vue.org/docs/components/table#header-and-footer-custom-rendering-via-scoped-slots

<b-table>
  <template #head(age)="data">
    {{ data.label }} <sup>1</sup>
  </template>
</b-table>

如何在此 BootstrapVue table 的列 header 中添加上标？

How to have superscript in column header of this BootstrapVue table?

javascript

vue.js

vuejs2

bootstrap-vue