vue.js - 如何使 v-data-table 列的宽度适合旋转列标题的宽度？

Question

我必须实现一个相当大的数据网格。这些列包含整数（最多 3 位）。列标题通常比整数宽得多。因此，我将标题旋转了 -90 度，这是通过 v-data-table 的“标题”槽完成的。

以下代码来自以下笔：https ://codepen.io/burgstjo/pen/ZVXqmQ

    <v-data-table
        :headers="headersDataGrid"
        :items="dataGrid"
        >

        <template slot="headers" slot-scope="props">
            <tr>
                <th v-for="(header, index) in props.headers">
                    <p v-if="header.value === 'name'"
                        style="text-align: left">
                        {{ header.text}}
                    </p>
                    <p v-else 
                        style="height: 10px; text-align: left; transform: rotate(-90deg); transform-origin: left bottom">
                        {{ header.text }}
                    </p>
                </th>
            </tr>
        </template>

        <template slot="items" slot-scope="myprops">
            <td v-for="(header, index) in headersDataGrid">
            {{ myprops.item[header.value] }}
            </td>
        </template>

    </v-data-table>

不幸的是，列的宽度并没有缩小。另一个问题是列标题的高度仍然很小。

标签： vue.jsvuetify.js