我必须实现一个相当大的数据网格。这些列包含整数(最多3位)。列标题通常比整数宽得多。因此,我将标题旋转了-90度,这是通过v-data-table的“ headers”插槽完成的。
以下代码来自以下笔: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>
不幸的是,列的宽度没有缩小。 另一个问题是列标题的高度仍然很小。