Question

我正在建立一个使用NuxtJS，Bootstrap Vue和vue-i18n的网站。

我有一张表格（<b-table>），以平方米为单位显示区域，标题应显示： sq m 英文和 m ² （m2）。

因此，标题字段标签是从i18n语言环境JSON绘制到单个文件组件的表标题标签的。不幸的是，该字符串已正确绘制，但未呈现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>

因此，一切正常，除了我无法从表头中的语言环境json呈现HTML-因此，该表使用其中的数据进行呈现，并且在其他组件中，此技术也可以正常工作。

如果我尝试m²（²）或其他任何方法都无法使用。

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

有人看到一种在bootstrap-vue的表标题中呈现HTML的方法吗？

Answer 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>

Answer 2

好的，我解决了-代码中没有必要的 / -最初的<b-table>是一个自闭标签，添加了广告位后，我错过了对其的修改。 / p>

我已更正该错误，并且 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>

Bootstrap-Vue表头中的呈现HTML

2 个答案: