BootstrapVue - 表格列标签格式答案

【问题标题】：BootstrapVue - table column label formatBootstrapVue - 表格列标签格式
【发布时间】：2021-05-19 14:54:28
【问题描述】：

寻求有关格式化我的表格标签以按照代码中定义的方式显示的帮助。目前，标签仅将单词的第一个字符大写，而忽略其余字符。知道如何将定义的值作为标签显示吗？当前，IP 地址在 HTML 中呈现时显示为 IP 地址（注意 IP 中的小写 p）。

<style>
    .x-table {
        text-align: center;
        background-color: #f0f0f0;
        max-width: 20px;
    }
</style>

<html>
    <b-table 
        style="background-color: #FFFFFF; width: 100%; font-size: 8px !important;" 
        id="my-table"
        responsive
        sticky-header="275px"
        outlined
        selectable 
        select-mode="single"
        @row-selected="onRowSelected"
        :per-page="perPage"
        :current-page="currentPage"
        :items="items" 
        :fields="fields"
        :keyword="keyword"
     ></b-table>
</html>

<script>
    data: function () {
        return {
            fields: [
            { key: 'hostname', label: 'Hostname', tdClass: 'x-table', visible: true, stickyColumn: true},
            { key: 'ip_address', label: 'IP Address', tdClass: 'x-table', visible: true}
            ]
        }
    }
</script>

结果

【问题讨论】：

在 codepen 中尝试您的代码：bootstrap-vue.org/play。它工作正常。

标签： javascript vue.js bootstrap-vue

【解决方案1】：

我假设这是 bootstrap-vue。

在创建 b-table 时，您可以在 thStyle 属性中传递样式对象。

您可以使用text-transform: none; 强制标题为正常样式。

在此处阅读文档：Bootstrap vue - b-table

请参阅“字段定义参考”部分

由于这不是纯粹的 vue，请确保添加正确的标签，以便您可以接触到更相关的受众。

【讨论】：

谢谢！这解决了我的问题。我一定会为更多帖子添加额外的标签，感谢反馈。