BootstrapVue - table 列标签格式

Question

寻求有关格式化我的 table 标签以按照代码中定义的方式显示的帮助。目前，标签仅将单词的第一个字符大写，而忽略其余部分。知道如何实现标签显示的定义值吗？当前 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>

结果

Answer 1

我假设这是 bootstrap-vue。

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

您可以使用 text-transform: none; 强制 headers 为普通样式。

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

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

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

BootstrapVue - table 列标签格式

BootstrapVue - table column label format

javascript

vue.js

bootstrap-vue