在 bootstrap-vue 表头中呈现 HTML

Posted 2023-02-22

【中文标题】在 bootstrap-vue 表头中呈现 HTML

【英文标题】：Rendered HTML in bootstrap-vue table header

【发布时间】：2019-10-01 18:50:05

【问题描述】：

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

我有一个表格 (<b-table>)，以平方米为单位显示面积，标题应显示：sq m 英文，m² (m<sup>2</sup>) 在翻译中。

所以标题字段标签从 i18n 语言环境 JSON 绘制到单个文件组件的表标题标签。字符串绘制正确，但 html 部分未呈现，不幸的是，我在页面上看到的是 m<sup>2</sup>。

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

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>

所以，一切正常，除了我无法从表头中的语言环境 json 呈现 HTML - 所以表会呈现其中的数据，而在其他组件中，<span v-html="$t('in_numbers.space')"></span> 技术工作得很好。

如果我尝试 m²(²) 或其他任何东西，它都不起作用。

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

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

【参考方案1】：

更新答案（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.org/docs/components/…

【参考方案2】：

好的，我解决了 - 代码中有一个不必要的 / - 原来<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>

【讨论】：

你能扩展一下你在这里所做的吗？这将非常有用:)

@Adriano 你对什么感兴趣？ VueJS 和 bootstrap-vue 自从我发布原始问题以来发生了很大变化，所以这里的答案可能不再正确。

我遇到了同样的问题：在b-table 元素中，我需要以编程方式在每列的th 中注入一些动态数据。在HEAD_space 插槽中注入数据对我不起作用。

如果您在 *** 上使用您尝试过的一些代码在此处发布您的问题，您可以在评论中引用该链接 - 也许我可以查看它。

这个解决方案对我有用，但正如阿德里亚诺所说，不幸的是，我发现在“HEAD_”之后对键进行硬编码远非理想。