vue.js - 在 bootstrap-vue 表头中呈现 HTML
问题描述
我正在制作一个使用 NuxtJS、Bootstrap Vue 和 vue-i18n 的网站。
我有一个<b-table>
以平方米为单位显示面积的表格 ( ),标题应显示:英文为sq m,翻译为m 2 ( 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#自定义数据渲染)
有人看到在 bootstrap-vue 的表头中呈现 HTML 的方法吗?
解决方案
更新答案(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>
推荐阅读
- c# - 使用派生类中必须具有不同枚举类型的字段创建接口
- python - 点安装python 2.7
- mysql - MYSQL 查询从日志中获取项目详细信息和最后一个 MAX() 操作详细信息
- c# - EF 核心 2.1 中使用 lambda 表达式的最大 n 个组
- maven - Hamcrest 断言在 Maven 测试用例中失败
- c# - System.NotSupportedException:没有数据可用于编码 1252
- awk - 通过 awk 删除空列
- java - Java Spring MVC 发送电子邮件表单 javax/activation/FileTypeMap
- html - 引导程序中以前工作的选项卡显示多个活动
- c# - 如何在 IIS 上托管我的 WCF