在 bootstrap-vue table header 中呈现 HTML

Question

我正在制作一个使用 NuxtJS、Bootstrap Vue 和 vue-i18n 的网站。

我有一个 table (<b-table>) 以平方米显示面积，header 应该显示：平方米英语，以及 m² (m2) 的翻译。

因此 header 字段标签是从 i18n 语言环境 JSON 绘制到单个文件组件的 table header 标签。字符串绘制正确，但 HTML 部分未呈现，不幸的是，所以我在页面上看到的是 m2.

以下是我尝试解决它的方法（示例已简化 - 部分已从中删除）：

hu.json（翻译语言环境文件）

{
  "in_numbers": {
    "space": "m<sup>2</sup>"
  }
}

tableComponentFile.vue（单文件组件）

<template>
  <b-container fluid>
    <b-row>
      <b-col cols="12">
        <b-table
          :items="floors"
          :fields="tableHeader"
        />
          <template slot="HEAD_space" slot-scope="data">
            <span v-html="data.label"></span>
          </template>
        </b-table>
      </b-col>
    </b-row>
  </b-container>
</template>

<script>
export default {
  computed: {
    floors() {
      return [
        { space: 552.96 },
        { space: 796.27 }
      ]
    }
  },
  data() {
    return {
      tableHeader: [
        {
          key: 'space',
          label: this.$t('in_numbers.space'),
          sortable: false
        }
      ]
    }
  }
}
</script>

所以，一切正常，除了我无法在 table header 中从语言环境 json 渲染 HTML - 所以 table使用其中的数据呈现，在其他组件中，这种  技术工作得很好。

如果我尝试 m²(²) 或任何其他方法都不起作用。

问题是 <template slot> 似乎对任何事情都没有反应（实际上我不确定它是否有效）- 但正如文档所述，它应该有效 (https://bootstrap-vue.js.org/docs/components/table#custom-data-rendering)

有人看到在 bootstrap-vue 的 table header 中呈现 HTML 的方法吗？

Answer 1

好的，我解决了 - 代码中有一个不必要的 / - 本来 <b-table> 是一个自闭标签，我添加了一个插槽后我错过了修改它。

我更正了错误，bootstrap-vue HEAD_ 插槽开始工作，现在一切都正确显示了。

所以，解决方案如下所示：

hu.json

{
  "in_numbers": {
    "space": "m<sup>2</sup>"
  }
}

tableComponentFile.vue

<template>
  <b-container fluid>
    <b-row>
      <b-col cols="12">
        <b-table
          :items="floors"
          :fields="tableHeader"
        >
          <template slot="HEAD_space" slot-scope="data">
            <span v-html="data.label"></span>
          </template>
        </b-table>
      </b-col>
    </b-row>
  </b-container>
</template>

<script>
export default {
  computed: {
    floors() {
      return [
        { space: 552.96 },
        { space: 796.27 }
      ]
    }
  },
  data() {
    return {
      tableHeader: [
        {
          key: 'space',
          label: this.$t('in_numbers.space'),
          sortable: false
        }
      ]
    }
  }
}
</script>

Answer 2

更新答案（2020 年 6 月）

VueJS 和 bootstrap-vue 自问题和接受的答案发布以来都发生了变化。它在 bootstrap-vue 文档中仍然不是很清楚，但是您可以通过以下方式实现相同的结果：

<template>
  <b-container fluid>
    <b-row>
      <b-col cols="12">
        <b-table
          :items="floors"
          :fields="tableHeader">
          <template v-slot:head(space)="data"> // This has changed
            <span v-html="data.field.label"></span> // Now you access data.field.label
          </template>
        </b-table>
      </b-col>
    </b-row>
  </b-container>
</template>

<script>
export default {
  computed: {
    floors() {
      return [
        { space: 552.96 },
        { space: 796.27 }
      ]
    }
  },
  data() {
    return {
      tableHeader: [
        {
          key: 'space',
          label: this.$t('in_numbers.space'),
          sortable: false
        }
      ]
    }
  }
}
</script>

在 bootstrap-vue table header 中呈现 HTML

Rendered HTML in bootstrap-vue table header

vue.js

nuxt.js

vue-i18n

bootstrap-vue